<template>
  <div>
    <div class="Serch">
      <div class="Soccer-game row center">
        <div class="Soccer-game-title row center">
          <img class="returnimg" :src="img.searchreturn" @click="isreturn()">
          <span class="tit">{{title}}</span>
        </div>
        <div
          class="row center"
          style="height:0.88rem;padding-left:0.1rem;"
          @click="IsSoccerGameClick(isSoccerGameClick)"
        >
          <img
            :class="isSoccerGameClick==true?'Soccer-game-src act':'Soccer-game-src return'"
            :src="img.Soccerimg1"
          >
        </div>
      </div>
      <div class="Serch-box" v-if="searchShow">
        <div class="Serch-box-home">
          <img class="Serch-box-img" :src="img.Serchimg">
          <input
            v-model="SerchValue"
            @input="serchchange(SerchValue)"
            class="Serch-box-input"
            type="text"
            placeholder="请输入球队名称"
          >
          <img
            class="Serch-box-del"
            @click="delinputvalue()"
            v-if="Serchchange==true"
            :src="img.Serchdel"
          >
        </div>
      </div>
    </div>
    <div class="Soccer-game-box row" v-if="isSoccerGameClick==true">
      <p
        class="row item-center"
        v-for="(i,index) in Regulations"
        @click="listActive(i.id,i.name,i.num,index)"
        :key="index"
        :class="listnum==i.id?'active':''"
      >
        {{i.name}}
        <span
          class="Soccer-game-num"
          v-if="i.name!='冠军盘口'"
          :class="listnum==i.id?'active':''"
        >
          <!--Soccer 导航数字  -->
          {{i.num}}
        </span>
      </p>
    </div>
    <div
      v-if="isDataShow"
      class="event_prompt row item-center"
    >目前暂无可适用的{{event_prompt_name==''?'':event_prompt_name}}赛事</div>
    <div v-else class="ChampionsCup_content">
      <div v-if="listnum==1"></div>
      <div v-if="listnum==2"></div>
      <div v-if="listnum==3">
        <div v-for=" (item,index) in data.StMorningPlate.matchData" :key="index" class="Match-box">
          <div class="row allAlignment Match-box-top">
            <div class="Match-box-top-left">
              <span>{{item.match_date}}</span>
              <span>{{item.match_time}}</span>
            </div>
            <div class="Match-box-top-right row">
              <span style="margin-right: .15rem;" class="Match-box-top-num">{{item.tag}}</span>
              <span style="margin-right: .15rem;">让球</span>
              <span style="margin-right: .15rem;">大小</span>
            </div>
          </div>
          <div
            class="row allAlignment center"
            @click="matchInfo(item.match_id);"
            style="padding:0 .32rem"
          >
            <div class="column average name-box">
              <div>{{item.home_team}}</div>
              <div>{{item.guest_team}}</div>
            </div>
            <div class="Match-bottom-right">
              <!-- 主队 -->
              <div class="row">
                <div
                  class="Match-list-left"
                  v-for="(items,indexs) in item.oddsData.homeOdds"
                  :key="indexs"
                  @click.stop="bteBetting(item.match_id,items.id,item.home_team,item.guest_team,item.home_team,items.odds,items.condition,items.odds_only,items.odds_code,'homeOdds',items.p_code,items.status)"
                >
                  <div :class="items.isTrue ? 'activity' : ''" class="column center">
                    <span style="color:#FD8F26" v-if="items.odds > 0">{{items.condition}}</span>
                    <span v-if="items.odds >0">{{items.odds}}</span>
                    <img v-if="items.odds < 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"><img>
                  </div>
                </div>
              </div>
              <!-- 客队 -->
              <div class="row">
                <div
                  class="Match-list-right row"
                  v-for="(items,indexs) in item.oddsData.guestOdds"
                  :key="indexs"
                  @click.stop="bteBetting(item.match_id,items.id,item.home_team,item.guest_team,item.guest_team,items.odds,items.condition,items.odds_only,items.odds_code,'guestOdds',items.p_code,items.status)"
                >
                  <div :class="items.isTrue ? 'activity' : ''" class="column center">
                    <span v-if="items.odds > 0">
                      <i style="color:#FD8F26">{{items.condition}}</i>
                    </span>
                    <span v-if="items.odds >0">{{items.odds}}</span>
                    <img v-if="items.odds < 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"><img>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="listnum==4">
        <!-- 冠军组件 -->
        <div class="champion">
          <div v-for="(item,index) in ChampionData" :key="item.id">
            <div class="title">
              <span>{{item.name}}</span>
              <div class="time">
                <!-- <span>2019年5月29日</span> -->
                <span>{{item.last_time}}</span>
              </div>
            </div>
            <div v-for="(items,i) in item.data" :key="items.id">
              <div class="chmpTit">{{items.title}}</div>
              <div v-for="itemList in items.datas" :key="itemList.id">
                <div class="list">
                  <span class="chmName">{{itemList.team}}</span>
                  <div v-if="itemList.odds > 0 " class="num" @click="championBetting(index,i,itemList.id,itemList.odds,itemList.odds_only,itemList.p_code,itemList.match_id,itemList.odds_code,items.title,itemList.lg_id,itemList.team)"  :class="itemList.isTrue ? 'col':''">{{itemList.odds}}</div>
                  <div v-else  class="ratio column center">
                    <img style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"><img>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <div v-if="noData">
      <NotOpend :title="this.info"/>
          </div>-->
        </div>
      </div>
    </div>
    <div v-show="isBettingWindow == '100'">
      <BettingWindow/>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
import BettingWindow from "@/components/StBettingWindow";
export default {
  name: "ChampionsCup",
  components: { BettingWindow },
  data() {
    return {
      title: "",
      // 日期时间数组
      arr: [],
      // 本页面的数据
      data: "",
      isDataShow: true, //显示无数据
      lg_id:'',
      scorll: "", //背景滚动
      //冠军盘口提示区分盘口名
      event_prompt_name: "",
      isSoccerGameClick: true,
      Serchchange: false,
      listnum: 2, //赛事类型
      SerchValue: "",
      betting: 10000, //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      plateNum:10000, //早盘vuex下标
      ChampionData: "", //冠军数据
      isBettingWindow: '-1',
      searchShow: true,
      title: "", //传入最后一页的名字
      match_id : '',//赛事Id
      game_code :'gj',
      img: {
        Soccerimg1: require("@/assets/st-imges/soccer1.png"),
        Soccerimg2: require("@/assets/st-imges/soccer1.png"),
        Serchimg: require("@/assets/st-imges/sousuo.png"),
        Serchdel: require("@/assets/st-imges/del.png"),
        searchreturn: require("@/assets/st-imges/returnbox.png")
      },
      Regulations: [
          { id: 1, name: "滚球", num: "" },
          { id: 2, name: "今日", num: "" },
          { id: 3, name: "早盘", num: "" },
          { id: 4, name: "冠军盘口" }
        ],
    };
  },
  created() {
    this.fun_date();
  },
  methods: {
    //冠军盘口投注
    championBetting(index,i,id,odds,odds_only,p_code,match_id,odds_code,play_name,lg_id,name){
         if(this.$store.getters.getLimit * 1 >= 10){
           this.$dialog.alert({mes: '你的注单已达到上限啦!'});
        }
      // 导入数据
      let _this = this;
      let isAdd = true;
      let bettingInfo = {
          id,
          home_team: '',
          guest_team: '',
          name,
          odds,
          match_id,
          condition:'',
          ballId:this.$store.getters.getBallId,
          odds_code: odds_code,
          p_code:'gj',
          play_name,
          score:'',
          bettingTime: "",
          odds_only,
          lg_id
      };
      let matchList = this.$store.getters.getBetting;
      if(this.thisNum != 10000){
        console.log('111', this.thisNum) 
        //删除vuex投注数据
        matchList[this.thisNum].data.forEach((res,index) =>{
          if(res.id == id){
            console.log(res.id,id)
             this.modifyChampionStyle(index,i,id)
            matchList[this.thisNum].data.splice(index,1);
            this.$store.dispatch("SET_LIMIT", false);
            this.$store.dispatch("BETTING", []);
            this.$store.dispatch("BETTING", matchList);
            isAdd = false;
            
          }
        })
        //添加vuex投注数据
        if(isAdd){
          if(this.$store.getters.getLimit * 1 >= 10)return false;
            this.modifyChampionStyle(index,i,id)
            matchList[this.thisNum].data.push(bettingInfo);
            this.$store.dispatch("BETTING", []);
            this.$store.dispatch("BETTING", matchList);
            if (this.$store.getters.getIsBetting == '100' ) return false;
            this.$store.dispatch("ISBETTING",100);
        }
      }else{
        //添加新的玩法赔率数据
        let obj = {
          title:'gj',
          data:[bettingInfo]
        };
        //console.log(obj);
        //判断vuex有误其它玩法数据
        if(matchList){
          matchList.push(obj);
        }else{
          this.$store.dispatch("BETTING", [obj]);
        }
        this.modifyChampionStyle(index,i,id)
        if (this.$store.getters.getIsBetting == '100') return false;
         this.$store.dispatch("ISBETTING", '100');
      }
    },

    /*-----------------------------------------------------*/
    //修改当前页面样式公共方法
    modifyChampionStyle:function(index,i,id){
        this.ChampionData.forEach(a =>{
          a.data.forEach(b =>{
            b.datas.every((res,index) =>{
              if(res.id == id){
                this.$set(res,'isTrue',res.isTrue ? false : true);
                this.$forceUpdate();
                return false;
              }
            return true;
          })
          return true;
        })
      })
    },

    /*-------------------------------------*/
    // 获取一周赛事
    fun_date: function() {
      let date = new Date();
      let MonthNum = 0;
      let lastMonth = new Date(date.getFullYear(),date.getMonth() + 1,0).getDate();
      for (let i = 1; i < 7; i++) {
        let years = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate()+i < 10 ? "0" + date.getDate()+i : date.getDate()+i;
        if( date.getDate()+i > lastMonth){
          MonthNum ++;
          month =  date.getMonth() + 2;
          day =  "0" + MonthNum;
        }
        let time2 = {};
        time2.id = years + "-" + month + "-" + day;
        time2.title = years + "-" + month + "-" + day;
        this.arr.push(time2);
        if (i == 6) {
          this.arr.push({ id: "morning", title: "早盘" });
        }
      }
    },

    /*-------------------------------------------*/
    //切换赛事类型
    listActive(id, name, num, index) {
      if (this.listnum == id) return false;
      this.SerchValue = "";
      let time;
      this.listnum = id;
      this.event_prompt_name = name;
      // 判断冠军杯活动是否有数据
      this.isDataShow = num == 0 ? true : false;
      //判断是否显示搜索框
      if (id != 4) {
        this.searchShow = true;
      } else{
        this.championGroup(this.data.StChampion);
        this.searchShow = false;
      }
    },

    /*---------------------------------------------*/
    //删除搜索框数据
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
      this.getAjax();
    },

    /*---------------------------------------------- */
    //
    toggle: function(index, id) {
      this.active = index;
      this.datetimeNum = id;
      console.log("id", this.datetimeNum);
      this.SerchValue = "";
    },

    /*----------------------------------------------- */
    // 返回上一层页面
    isreturn() {
      history.go(-1);
    },

    /*---------------------------------------------- */
    //获取input输入的值查询数据
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
      this.getAjax(val);
    },

    /*---------------------------------------------- */
    //显示隐藏赛事类型
    IsSoccerGameClick(isclick) {
      this.isSoccerGameClick = !isclick;
    },

    /*---------------------------------------------- */
    //
    matchInfo(id) {
      this.$router.push({
        path: "/StRollBallBettingPage",
        query: { gameCode: this.game_code, name: this.title }
      });
      this.$store.dispatch("MACTH_ID", id);
    },

    /*---------------------------------------------- */
    //获取冠军杯数据
    getAjax(search) {
      this.$store.dispatch("GETSHOW", true);
      this.$http.get(this.$ports.match.ChampionsCup, { search }).then(res => {
        this.lg_id=res.data.data.lg_id;
        if (res.data.data && res.data.status == 1) {
          let resData =  res.data.data;
          this.data = resData;
          //设置冠军杯title信息和数据
          this.Regulations.forEach(e => {
            if (e.id == 1) {
              e.name =resData.StRollBall.typeName;
              e.num =resData.StRollBall.matchNum;
            } else if (e.id == 2) {
              e.name =resData.StToday.typeName;
              e.num =resData.StToday.matchNum;
            } else if (e.id == 3) {
              e.name =resData.StMorningPlate.typeName;
              e.num =resData.StMorningPlate.matchNum;
            } else if (e.id == 4) {
              //console.log(33);
              e.name =resData.StChampion.typeName;
              e.num =resData.StChampion.matchNum;
            }
          });

          console.log("list", this.Regulations);
          // if (this.listnum != 4) {
          //   this.searchShow = true;
          //   //this.data = res.data.data;
          // }else

          if (this.listnum == 4){
            this.searchShow = false;
            //this.data = res.data.data.StChampion;
            let champion = {},
            title = "",
            stiTime = "",
            //matchData = [],
            chamData = [];
            title = Object.keys(this.data.matchData);
            let val = Object.values(this.data.matchData);
            title.forEach((e, index) => {
              chamData.push({
                name: e,
                data: val[index]
              });
            });
            chamData.forEach(res => {
              res.last_time = res.data.last_time;
              let resData = Object.values(res.data);
              let resTitle = Object.keys(res.data);
              res.data = [];
              resTitle.forEach((e, index) => {
                if (e !== "last_time") {
                  res.data.push({
                    title: e,
                    datas: resData[index]
                  });
                }
              });
            });
            // this.ChampionData = chamData;
   
            this.championGroup(chamData);
          }else if(this.listnum == 3){
            if( this.data.StMorningPlate.matchData.length < 1){
                this.isDataShow = true;
            }else{
            this.isDataShow = false;
            this.dataGroup(this.data)
            }
          }

          // // 取值出来进行判定
          // if (this.data.StMorningPlate.matchData && this.data.StMorningPlate.matchData.length < 1) {
          //   this.isDataShow = true;
          // } else if (this.data.StMorningPlate.matchData && this.data.StMorningPlate.matchData.length > 0) {
          //   this.isDataShow = false;
          //   // console.log('dtaa',this.data)
          //   console.log("找不到", this.data);
            
          // }
          // if (this.listnum == 4) {
          //   if (this.data.StChampion.matchData == null) {
          //     this.isDataShow = true;
          //   } else {
          //     this.isDataShow = false;
          //   }
          // }
        }
        this.title = res.data.data.leagueName;
        let _this = this;
        setTimeout(function() {
          _this.$store.dispatch("GETSHOW", false);
        }, 500);
      });
    },
    /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(
      match_id,
      id,
      home,
      guest,
      name,
      odds,
      condition,
      odds_only,
      odds_code,
      type,
      p_code
    ) {
      console.log(id);
      let isAdd = true;
      let matchList = this.$store.getters.getBetting;
      let bettingInfo = {
        id,
        home_team: home,
        guest_team: guest,
        name,
        odds,
        match_id,
        lg_id:this.lg_id,
        odds_id:id,
        condition,
        ballId: this.$store.getters.getBallId,
        odds_code: odds_code,
        p_code: p_code,
        play_name:
          odds_code == "concede_home" || odds_code == "concede_guest"
            ? "让球"
            : "大小",
        score: this.score,
        bettingTime: "",
        odds_only
      };
      console.log(matchList);
      // console.log('11111', this.thisNum)
      if (this.plateNum != 10000) {
        //删除vuex投注数据
        
        matchList[this.plateNum].data.forEach((res, index) => {
          if (res.id == id) {
            matchList[this.plateNum].data.splice(index, 1);
            // this.$store.dispatch("ISBETTING",false);
            this.$store.dispatch("SET_LIMIT", false);
            this.$store.dispatch("BETTING", []);
            this.$store.dispatch("BETTING", matchList);
            isAdd = false;
            //处理当前页面样式
            this.modifyStyle(id, type);
          }
        });
        //添加vuex投注数据
        if (isAdd) {
          if (this.$store.getters.getLimit * 1 >= 10) return false;
          //处理当前页面样式
          this.modifyStyle(id, type);
          matchList[this.plateNum].data.push(bettingInfo);
          this.$store.dispatch("BETTING", []);
          this.$store.dispatch("BETTING", matchList);
       if (this.$store.getters.getIsBetting == '100') return false;
         this.$store.dispatch("ISBETTING", '100');
        }
      } else {
        //添加新的玩法赔率数据
        let obj = {
          title: "concede_size",
          data: [bettingInfo]
        };
        //判断vuex有误其它玩法数据
        if (matchList) {
          matchList.push(obj);
        } else {
          this.$store.dispatch("BETTING", [obj]);
        }
        //处理当前页面样式
        this.modifyStyle(id, type);
       if (this.$store.getters.getIsBetting == '100') return false;
         this.$store.dispatch("ISBETTING", '100');
      }
    },

    /*--------------------------------------------------------------------------------*/
    //修改当前页面样式公共方法
    modifyStyle: function(id, type) {
      // console.log(id,type)
      // console.log('data', this.data)
      // console.log('错值', this.data);
      this.data.StMorningPlate.matchData.every(e => {
        // console.log('e',e)
        // let ret = false;
        if (type == "homeOdds") {
          e.oddsData.homeOdds.every((res, index) => {
            if (res.id == id) {
              this.$set(
                e.oddsData.homeOdds[index],
                "isTrue",
                res.isTrue ? false : true
              );
              // ret = true;
              this.$forceUpdate();
              return false;
            }
            return true;
            // console.log(e.oddsData.homeOdds[index])
          });
        } else if (type == "guestOdds") {
          e.oddsData.guestOdds.every((res, index) => {
            if (res.id == id) {
              this.$set(
                e.oddsData.guestOdds[index],
                "isTrue",
                res.isTrue ? false : true
              );
              // ret = true;
              this.$forceUpdate();
              return false;
            }
            return true;
          });
        }
        return true;
        if (ret) {
          return false;
        } else {
          return true;
        }
         
      });
    },
    /*--------------------------------------------------------------------------------*/
    // 修改投注样式
    bteBetting(
      match_id,
      id,
      home,
      guest,
      name,
      odds,
      condition,
      odds_only,
      odds_code,
      type,
      p_code,
      status
    ) {
      if(odds >0){
        if(status == '-1') return false;
          if (this.data) {
            //处理vuex里面数据
            this.AddDelete(
              match_id,
              id,
              home,
              guest,
              name,
              odds,
              condition,
              odds_only,
              odds_code,
              type,
              p_code
            );
            //处理当前页面样式
            // this.modifyStyle(id, type);
          }
        }

    },
    /*--------------------------------------------------------------------------------*/
    //早盘赛事赔率玩法数据组合方法
    dataGroup: function(data) {
      let homeOdds = [],
        guestOdds = [];
      let A, B, C, D;
      this.getTypeBetting('concede_size')
      data.StMorningPlate.matchData.forEach((column, index) => {
        if (column.oddsData == null || column.oddsData.length == 0) {
          column.oddsData = {
            homeOdds: [{ status: -1 }, { status: -1 }],
            guestOdds: [{ status: -1 }, { status: -1 }]
          };
        } else {
          console.log('1', this.betting)
          column.oddsData.forEach(val => {
            if (this.betting != 10000) {
              this.betting.forEach(e => {
                e.data.forEach(k =>{
                if (val.id == k.id) {
                  // console.log('1aval',val.id,k.id)
                  // val.isTrue = true;
                  this.$set(val,'isTrue',true);
                }
                })
              });
            } else {
              val.isTrue = false;
            }
            if (val.odds_code == "concede_home") {
              A = val;
            } else if (val.odds_code == "size_home") {
              B = val;
            } else if (val.odds_code == "concede_guest") {
              C = val;
            } else if (val.odds_code == "size_guest") {
              D = val;
            }
          });
          column.oddsData = {};
          column.oddsData.homeOdds = [];
          if (A != undefined) {
            column.oddsData.homeOdds.push(A);
          }
          if (B != undefined) {
            column.oddsData.homeOdds.push(B);
          }
          column.oddsData.guestOdds = [];
          if (C != undefined) {
            column.oddsData.guestOdds.push(C);
          }
          if (D != undefined) {
            column.oddsData.guestOdds.push(D);
          }
        }
      });
      this.title = data.typeName;
    },

    /*--------------------------------------------------- */
    //冠军
    championGroup(data){
      console.log('a1',data)
      let champion = {},stiTime = "",chamData = [];
      let title = Object.keys(data.matchData);
      let val = Object.values(data.matchData);
      let championBet = this.getTypeBetting('gj');
      title.forEach((e, index) => {
        chamData.push({
          name: e,
          data: val[index]
        });
      });
      chamData.forEach(res => {
        res.last_time = res.data.last_time;
        let resData = Object.values(res.data);
        let resTitle = Object.keys(res.data);
        res.data = [];
        resTitle.forEach((e, index) => {
          if (e !== "last_time") {
            if(championBet != '-1'){
              championBet.forEach(bet=>{
                resData[index].forEach(val =>{
                  // 
                  if(bet.id == val.id){
                  //console.log('冠军',val)
                    val.isTrue = true;
                  }
                })
              })
            }
            res.data.push({
              title: e,
              datas: resData[index]
            });
          }
        });
      });
      this.ChampionData = chamData;
      console.log('冠军', this.ChampionData);
    },

   /*------------------------------------------ */
    //今日 


   /*------------------------------------------ */
    //滚球 

    /*--------------------------------------*/
    //  


    /*---------------------------------------*/
    //获取vueX相对应投注信息
    getTypeBetting:function(type){
      let data = '-1';
      if(this.betting.length>0){
        this.betting.forEach((e,index)=>{
          console.log('title',e.title)
        if ("concede_size" == e.title) {
            this.plateNum = index;
            data = e.data;
          }else if('gj' == e.title){
              this.thisNum = index;
             data = e.data;
          } 
          // if(e.title ==type){
          //   data = e.data;
          //   this.thisNum =index;
          // }
        })
      }else{
        data ='-1'
      }
      return data;
    }
  },
  mounted() {
    // 默认选中数据
    this.listnum = 3;
    // 获取是否滑动信息
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    //是否展示投注框
    if (this.$store.getters.getIsBetting =='100') {
      this.isBettingWindow = '100';
    }
    //获取vuex玩法已投注相对应的数据
    if(this.$store.getters.getBetting){
      this.betting = this.$store.getters.getBetting;
    }
  

    
    // if (getBetting) {
    //   getBetting.forEach((e, index) => {
        
    //     ///console.log((e.title).split("_")[1])
    //     if ("concede_size" == e.title) {
    //       this.thisNum = index;
    //       if (e.data.length > 0) {
    //         this.betting = e.data;
    //       }
    //     //console.log('beeeeting',this.betting)
    //     }else if('gj' == (e.title).split("_")[1]){
    //       console.log(e);
    //       this.thisNum = index;
    //       if (e.data.length > 0) {
    //         this.betting = e.data;
    //         console.log('beeeeting',this.betting)
    //       }
    //     }
    //   });
    // }
    this.getAjax();
  },
  computed: {
    getBetting() {
      return this.$store.getters.getBetting;
    },
    getIsBetting() {
      return this.$store.getters.getIsBetting;
    },
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    }
  },
  watch: {
    // 监听滚动状态变化赋值滚动
    getscorllcode(val) {
      this.scorll = val;
    },
    getDeleteType(val) {
      let flag = true;
      if(this.listnum == 3){
              this.data.StMorningPlate.matchData.forEach(e => {
        if (val == "all") {
          e.oddsData.guestOdds.forEach(data => {
            this.$set(data, "isTrue", false);
          });
          e.oddsData.homeOdds.forEach(data => {
            this.$set(data, "isTrue", false);
          });
        } else {
          let showData = true;
          e.oddsData.guestOdds.forEach(data => {
            if (data.id == val) {
              this.$set(data, "isTrue", false);
              showData = false;
            }
          });
          if (showData) {
            e.oddsData.homeOdds.forEach(data => {
              if (data.id == val) {
                this.$set(data, "isTrue", false);
              }
            });
          }
        }
      });
      }else if(this.listnum == 4){
        this.ChampionData.forEach(e =>{
          if(val == 'all'){
            e.data.forEach(k =>{
              k.datas.forEach(i =>{
                this.$set(i,'isTrue',false)
            })
          })
          }else{
             let showData = true;
             e.data.forEach(k =>{
              k.datas.forEach(i =>{
                if(i.id == val){
                  this.$set(i,'isTrue',false)
                  showData = false;
                }
            })
          })
          if(showData){
            e.data.forEach(k =>{
              k.datas.forEach(i =>{
                if(i.id == val){
                  this.$set(i,'isTrue',false)
                }
            })
          })
          }
          }
        })
      }

    },
    /*--------------------------------------------------------------------------------*/
    //获取已投注信息
    getBetting(val) {
      //获取vuex玩法已投注相对应的数据
      if (val) {
        val.forEach((e, index) => {
          if ("concede_size" == e.title) {
            this.plateNum = index;
            this.betting = e.data;
          }else if('gj' == e.title){
             this.thisNum = index;
             this.betting = e.data;
            // console.log('betting', this.betting)
          } 
        });
      }
    },
    /*--------------------------------------------------------------------------------*/
    // 监听投注框开关
    getIsBetting(val) {
      console.log('val',val)
      this.isBettingWindow = val;
    }
  }
};
</script>

<style scoped>
.event_prompt {
  height: 0.88rem;
  background: #737373;
  color: #a6a6a6;
  padding-left: 0.3rem;
}
.Soccer-game-num {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #a6a6a6;
  color: #626262;
  margin-left: 0.1rem;
  line-height: 0.4rem;
  text-align: center;
}
.Soccer-game-num.active {
  background: #f76649;
  color: #f8f8f8;
}
.activity {
  background: #f76649;
  border: 2px solid #f76649 !important;
}
.act {
  transform: rotate(180deg);
  transition: 0.2s;
}
.return {
  transform: rotate(0deg);
  transition: 0.2s;
}
.Serch {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #6a6a6a, #565656);
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.33rem;
}
.returnimg {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.Serch-box {
  display: flex;
  align-items: center;
}
.Serch-box-input {
  width: 3.8rem;
  border: none;
  position: absolute;
  height: 0.44rem;
  line-height: 0.44rem;
  left: 0.5rem;
  color: #aaa;
}
.Serch-box-img {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left: 0.1rem;
  top: 0.06rem;
}
.Serch-box-del {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  right: 0.2rem;
}
.Serch-box-home {
  height: 0.45rem;
  line-height: 0.45rem;
  width: 4.2rem;
  background: #e4e4e4;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  position: relative;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.23rem;
}
.Soccer-game-title .tit {
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  background-color: #626262;
}
.Soccer-game-box > p {
  margin-left: 0.3rem;
  color: #a6a6a6;
}
.Soccer-game-box p.active {
  color: #f76649;
}
.Soccer-game-src {
  width: 0.25rem;
  height: 0.15rem;
  /* margin-left: .3rem */
}

.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.26rem;
  border-radius: 50%;
  color: #f5f5f5;
}

.Match-box-top-right > span {
  width: 1.07rem;
  text-align: center;
}
.Match-box {
  height: 2.45rem;
}
.name-box {
  height: 1.76rem;
}
.Match-box-top {
  height: 0.45rem;
  line-height: 0.45rem;
  background: #dcdcdc;
  font-size: 0.23rem;
  padding: 0 0.32rem;
}
.Match-box-top-num {
  width: 0.64rem !important;
  height: 0.45rem;
  background: #ebebeb;
  font-size: 0.24rem;
}
.Match-box {
  background: #f8f8f8;
}
.Match-bottom-right {
  height: 2rem;
  padding: 0.1rem 0.1rem 0 0.14rem;
}
.Match-list-left div {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  padding: 0.1rem;
  margin: 0.06rem 0.08rem;
}
.Match-list-right div {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  margin: 0.06rem 0.08rem;
}
/* 冠军 */
.champion .title {
  height: 1rem;
  padding: 0.15rem 0.2rem;
  background-color: #626262;
}
.champion .title span {
  font-size: 0.28rem;
  font-weight: bold;
  color: #e1e1df;
}
.champion .title .time span:nth-child(2) {
  color: #f76649;
}
.chmpTit {
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0.2rem;
  background: #e4e4e4;
}
.champion .list {
  height: 1rem;
  line-height: 0.6rem;
  padding: 0.1rem 0.2rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  font-size: 0.28rem;
  background: #ffffff;
}
.champion .list span:nth-child(1) {
  margin-top: 0.1rem;
}
.champion .list .num {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  padding: 0.1rem;
  text-align: center;
}
.col {
  background: #f76649;
  border: 2px solid #f76649 !important;
}
.col span {
  color: #f4f4f4 !important;
}
.ratio {
  width: 1rem;
  height: 0.76rem;
  border: 1px solid #cecece;
  margin-right: 0.14rem;
  border-radius: 0.1rem;
  margin: 0.06rem;
}
</style>