<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 10:58:22
 * @LastEditTime: 2019-08-27 11:32:22
 * @LastEditors: Please set LastEditors
 -->
<template>
  <!-- 禁止滚动 -->
  <div>
    <div class="Serch row item-center">
      <div class="Soccer-game row item-center">
        <div
          style=" display:flex;align-items:center;justify-content:center;"
          class="Soccer-game-title"
          @click="isreturn()"
        >
          <img class="box-img" src="../assets/st-imges/returnbox.png" />
          {{this.title}}
        </div>
      </div>
      <div class="Serch-box row item-center">
        <div class="Serch-box-home row item-center">
          <img class="Serch-box-img" src="../assets/st-imges/sousuo.png" />
          <input
            v-model="SerchValue"
            @input="searchTeam(SerchValue)"
            class="Serch-box-input"
            type="text"
            placeholder="请输入球队名称"
          />
          <img
            class="Serch-box-del"
            @click="delinputvalue()"
            v-if="Serchchange==true"
            src="../assets/st-imges/del.png"
          />
        </div>
      </div>
    </div>
    <div v-if="isMatchShow" class="row allAlignment box center">
      <span>{{data.leagueName}}</span>
      <div class="Match-title-num">
        <span>{{data.matchNum}}</span>
      </div>
    </div>

    <div
      v-if="isMatchShow && ballSelt == 10"
      v-for=" (item,index) in data.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;">{{ballType == 'zq'?'让球':'让分'}}</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 v-for="(items,indexs) in item.oddsData" :key="indexs">
            <div v-if="items.odds">
              <div class v-if="items.odds_code.startsWith('co')">
                <div
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  class="letballHome"
                  v-if="items.odds_code.endsWith('h')"
                  @click.stop="bteBetting(item,items,item.home_team,'homeOdds',data.lg_id,ballType == 'zq'?'让球':'让分')"
                >
                  <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{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
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  class="letballGuest"
                  v-if="items.odds_code.endsWith('g')"
                  @click.stop="bteBetting(item,items,item.guest_team,'guestOdds',data.lg_id,ballType == 'zq'?'让球':'让分')"
                >
                  <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{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 v-if="items.odds_code.startsWith('gs')" class="row bigSmall">
                <div   class="bigHome" v-if="items.odds_code.endsWith('b')"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="bteBetting(item,items,'大','homeOdds',data.lg_id,'大小')">
                  <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                    <span class="bigSmall">大</span>
                    <span v-if="items.condition != '大'">{{items.condition}}</span>
                  </div>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                  <img v-if="items.odds <= 0"  style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"/>
                </div>
                <div class="bigGuest"   v-if="items.odds_code.endsWith('s')"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="bteBetting(item,items,'小','guestOdds',data.lg_id,'大小')"
                >
                  <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                    <span class="bigSmall">小</span>
                    <span v-if="items.condition != '小'">{{items.condition}}</span>
                  </div>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{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 class="row bigSmall" v-if="items.odds_code.startsWith('tn')">
                <div class="bigHome" v-if="items.odds_code.endsWith('b')"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="bteBetting(item,items,'大','homeOdds',data.lg_id,'大小')"
                >
                  <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                    <span class="bigSmall">大</span>
                    <span v-if="items.condition != '大'">{{items.condition}}</span>
                  </div>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                  <img v-if="items.odds <= 0"  style="width: 0.7rem;height: 0.5rem;"
                    src="@/assets/st-imges/mima.png" />
                </div>
                <div
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  class="bigGuest"
                  v-if="items.odds_code.endsWith('s')"
                  @click.stop="bteBetting(item,items,'小','guestOdds',data.lg_id,'大小')"
                >
                  <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                    <span class="bigSmall">小</span>
                    <span v-if="items.condition != '小'">{{items.condition}}</span>
                  </div>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                  <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"
                    src="@/assets/st-imges/mima.png"/>
             
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 网球 -->
    <div class="Match-box" v-if="isMatchShow && ballSelt == 100" v-for=" (item,index) in data.matchData"  
    :key="item.id" >
      <div class="row allAlignment Match-box-top wqMatch-box">
        <div class="Match-box-top-left">
          <span>{{item.match_date}}</span>
          <span style="color: rgb(253, 143, 38);">{{item.match_time}}</span>
          <div>三盘两胜</div>
        </div>
        <div class="Match-box-top-right row">
          <span
            style="margin-right: .15rem;height:100%;line-height:0.65rem;"
            class="Match-box-top-num"
          >{{item.tag}}</span>
          <span style="margin-right: .15rem;line-height:0.65rem;">独赢盘</span>
          <span style="margin-right: .15rem;line-height:0.65rem;">让盘</span>
        </div>
      </div>
      <div class="row allAlignment center"  @click="matchInfo(item.match_id);" style="padding:0 .32rem">
        <div class="column average wqavg name-box">
          <div>{{item.home_team}}</div>
          <div>{{item.guest_team}}</div>
        </div>
        <div class="Match-bottom-right">
          <!-- 主队 -->
          <div class v-for="(items,indexs) in item.oddsData" :key="indexs">
            <div class v-if="items.odds_code.startsWith('c')">
              <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                class="letballHome"  v-if="items.odds_code.endsWith('h')"
                @click.stop="bteBetting(item,items,item.home_team,'homeOdds',data.lg_id,'独赢盘')">
                <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                <img  v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"
                  src="@/assets/st-imges/mima.png" />
              </div>
              <div class="letballGuest" v-if="items.odds_code.endsWith('g')"
                :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                @click.stop="bteBetting(item,items,item.guest_team,'guestOdds',data.lg_id,'独赢盘')"
              >
                <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{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 class="row bigSmall" v-if="items.odds_code.startsWith('ld')" >
              <div class="bigHome" v-if="items.odds_code.endsWith('h')"
                :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                @click.stop="bteBetting(item,items,item.home_team,'homeOdds',data.lg_id,'让盘')"
              >
                <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"
                  src="@/assets/st-imges/mima.png"/>
              </div>
              <div
                :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                class="bigGuest"
                v-if="items.odds_code.endsWith('g')"
                @click.stop="bteBetting(item,items,item.guest_team,'guestOdds',data.lg_id,'让盘')"
              >
                <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"
                  src="@/assets/st-imges/mima.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 棒球 -->
    <div
      v-if="isMatchShow && ballSelt == 1000"
      v-for=" (item,index) in data.matchData"
      :key="item.id"
      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>
        </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 v-for="(items,indexs) in item.oddsData" :key="indexs">
            <div v-if="items.odds_code">
              <div class="row bigSmall" v-if="items.odds_code.startsWith('c')">
                <div class="bigHome" v-if="items.odds_code.endsWith('h')"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="bteBetting(item,items,item.home_team,'homeOdds',data.lg_id,'独赢盘')">
                  <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                  <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"  />
                </div>
                <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  class="bigGuest" v-if="items.odds_code.endsWith('g')"
                  @click.stop="bteBetting(item,items,item.guest_team,'guestOdds',data.lg_id,'独赢盘')">
                  <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                  <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                  <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"
                    src="@/assets/st-imges/mima.png"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="BettingWindow" v-if="isBettingShow =='100'">
      <BettingWindow />
    </div>
    <div v-if="noData">
      <NotOpend :title="this.info" />
    </div>
  </div>
</template>

<script>
import BettingWindow from "./StBettingWindow.vue";
import NotOpend from "@/components/StNotOpend";
import Loading from "@/components/StLoading";

export default {
  name: "SerchBox",
  data() {
    return {
      SerchValue: "",
      Serchchange: false,
      title: " ", //标题
      data: " ",
      isMatchShow: true,
      lg_id: "",
      isAddData: false, //判断是否添加
      game_code: this.$route.query.game_code, //球的类型别名
      leagueID: this.$route.query.leagueID, //获取联赛id
      isBettingShow: "0", //投注显示关闭默认false
      score: "0", //比分
      codeShow: false, // 如果是参赛表传值过来，则显示另一部分
      info: "没有相关联赛信息",
      noData: false, //没有数据为true
      betting: [], //vuex里面玩法投注数据
      timers: true,
      getIsShow:true,
      ballSelt:0, // 当为10的时候为篮球，足球，100的时候为网球，1000的时候为棒球
      ballType:'',//
      // 存储变色数据
      previousStorage:[]      
    };
  },
  components: {
    BettingWindow,
    NotOpend,
    Loading
  },
  /**
   *函数方法
   */
  methods: {
   
    /***************返回上一页***************/
    isreturn() {
      history.go(-1);
    },

    /*************是否显示删除按钮************/
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
    },

    /***************查询球队****************/
    searchTeam(val) {
      let getActivity = this.$store.getters.getActivity;
      let matchDate = this.$route.query.matchDate;
      let dataObj = this.dataObj;
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
      dataObj.search = val;
      if (this.$route.query.navBall) {
        this.getMatchData(this.$ports.match.matchState, dataObj);
      } else {
        dataObj.type_code = "";
        dataObj.search = val;
        this.getMatchData(this.$ports.match.matchDetails, dataObj);
      }
    },

    /**************清空输入**************/
    // 
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
      let matchDate = this.$route.query.matchDate;
      let dataObj = {
        oddsType: this.$store.getters.activity,
        game_code: this.game_code,
        leagueID: "",
        lg_id: this.leagueID,
        type_code: this.$store.getters.getActivity,
        matchDate: "",
        match_date: matchDate,
        search: "",
        str_type: ""
      };
      if (this.$route.query.navBall) {
        this.getMatchData(this.$ports.match.matchState, dataObj);
      } else {
        dataObj.leagueID = this.leagueID;
        dataObj.lg_id = "";
        dataObj.type_code = "";
        dataObj.matchDate = matchDate;
        dataObj.match_date = "";
        this.getMatchData(this.$ports.match.matchDetails, dataObj);
      }
    },

    /*************添加、删除vuex投注数据公共方法************/
    AddDelete: function(item,items,name,type,lg_id,play_name) {
      let isAdd = true,isNew=true;
      let matchList = this.$store.getters.getBetting;
      if (status == "-1") return false;
      let ball = this.$store.getters.getBallId;
      // if(ball == 'zq'){
      let bettingInfo = items;
      bettingInfo.home_team = item.home_team;
      bettingInfo.guest_team= item.guest_team;
      bettingInfo.name = name;
      bettingInfo.match_id = item.match_id;
      bettingInfo.ballId =ball;
      bettingInfo.play_name =play_name;
      bettingInfo.lg_id = lg_id;
      bettingInfo.oddsType = this.$store.getters.getActivity;
      let mark = bettingInfo.mark;
      //添加新的玩法赔率数据
      let obj = {
        title:bettingInfo.p_code,
        data: [bettingInfo]
      };
      if(matchList !=null ){
        for(let i =0 ;i < matchList.length; i++ ){
          if(matchList[i].title == bettingInfo.p_code){
            //删除vuex投注数据
            matchList[i].data.forEach((res, index) => {
              // console.log(res.id,id)
              if (res.mark == mark) {
                matchList[i].data.splice(index, 1);
                this.$store.dispatch("SET_LIMIT", false);
                this.$store.dispatch("BETTING", []);
                this.$store.dispatch("BETTING", matchList);
                isAdd = false;
                isNew = false;
                //处理当前页面样式
                this.modifyStyle(mark,type);
              }
            });
            //添加vuex投注数据
            if (isAdd){ 
              isNew = false;
              if (this.$store.getters.getLimit * 1 >= 10) return false;
              //处理当前页面样式
              this.modifyStyle(mark, type);
              matchList[i].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);
            }
            break;
          }
        }
        if(isNew){
          matchList.push(obj)
          this.$store.dispatch("BETTING",[]);
          this.$store.dispatch("BETTING",matchList);
          this.modifyStyle(mark, type);
          if (this.$store.getters.getIsBetting == "100") return false;
          this.$store.dispatch("ISBETTING", "100");
        }

      }else{
        this.$store.dispatch("BETTING",[obj]);
        this.modifyStyle(mark, type);
        if (this.$store.getters.getIsBetting == "100") return false;
        this.$store.dispatch("ISBETTING", "100");
      }
    },

    /***********修改当前页面样式公共方法***********/
    modifyStyle: function(mark, type) {
      // console.log('type',type)
      //if(this.$store.getters.getLimit*1 > 10 )
      this.data.matchData.every(e => {
        let ret = false;
        if (type == "homeOdds") {
          e.oddsData.every((res, index) => {
            if (res.mark == mark) {
              this.$set(
               res,
                "isTrue",
                res.isTrue ? false : true
              );
              this.$forceUpdate()
              ret = true;
              return false;
            }
            return true;
          });
        } else if (type == "guestOdds") {
          e.oddsData.every((res, index) => {
            if (res.mark == mark) {
              this.$set(
               res,
                "isTrue",
                res.isTrue ? false : true
              );
                this.$forceUpdate()
              ret = true;
              return false;
            }
            return true;
          });
        }
        if (ret) {
          return false;
        } else {
          return true;
        }
      });
    },

    /************修改投注样式*************/
    bteBetting(item,items,name,type,lg_id,play_name) {
     if(items.odds > 0){
      if (this.data) {
          //处理vuex里面数据
          this.AddDelete(item,items,name,type,lg_id,play_name);
          if (this.$store.getters.getLimit * 1 >= 10) {
            this.$dialog.alert({ mes: "你的注单已达到上限啦!" });
          }
        }       
     }

    },

    /************跳转到赛事详情**************/
    matchInfo: function(id) {
      this.$router.push({
        path:"/StRollBallBettingPage",
        query: {
          gameCode: this.game_code,
          home: 1,
          name: this.$route.query.name
        }
      });
      this.$store.dispatch("MACTH_ID", id);
    },

    /***********获取联赛比赛列表数据*********/
    getMatchData: function(url, data) {
      this.$http.get(url, data).then(res => {
        this.codeShow = true;
        if (res.data.status == 1 && res.data.data != null) {
             this.lg_id = res.data.data.lg_id;
          if (res.data.data.matchData && res.data.data.matchData.length < 1) {
            this.isMatchShow = false;
            this.noData = true;
          } else if (res.data.data.matchData &&res.data.data.matchData.length > 0 ) {
            this.isMatchShow = true;
            this.noData = false;
            this.dataGroup(res.data.data);
          }
        }else{
          this.data = '';
          this.noData = true;
          this.isMatchShow = false;
        }
      });
      let _this = this;
      setTimeout(function(){
        _this.$store.dispatch("GETSHOW", false);
      },1000)
    },
    
    /************赛事赔率玩法数据组合方法************/
    dataGroup: function(data) {
      // console.log('SerchBox')
      let homeOdds = [],guestOdds = [];
      let A, B, C, D;
      // console.log('beeeee',this.betting)
      let ball = this.$store.getters.getBallId;
      data.matchData.forEach((column, index) => {
        if (column.oddsData == null || column.oddsData.length == 0) {
          if(ball == 'bq'){
            column.oddsData = {
            homeOdds: [{ status: -1 }],
            guestOdds: [{ status: -1 }]
          };
          }else{
          column.oddsData = {
            homeOdds: [{ status: -1 }, { status: -1 }],
            guestOdds: [{ status: -1 }, { status: -1 }]
          };
          }
        } else {
          column.oddsData.forEach(val => {
            if(this.betting.length > 0){
              this.betting.forEach(e =>{
                e.forEach(item =>{
                  if(val.id == item.id){
                    val.isTrue = true;
                  }
                })
              })
            }
          });
        }
      });
      this.data = data;
      // console.log('处理数据',this.data);
       //更新数据和上一次的数据匹配
      let storage =this.previousStorage;
      if(storage && storage != null && storage.length > 0){
        this.data.matchData.forEach(k=>{
          k.oddsData.forEach(item =>{
            storage.forEach(a =>{
              if(typeof a == "string" ){ 
                a = JSON.parse(a);
              }
              a.forEach(b =>{
                if(item.id == b.id){
                  if(item.odds > b.odds){
                    item.change = 'add'
                  }else if(item.odds  < b.odds){
                    item.change = 'red';
                  }else{
                    item.change = '';
                  }
                }
              })
            })
          })
        })
      }
      this.previousStorage = [];
      this.data.matchData.forEach(e =>{
        this.previousStorage.push(JSON.stringify(e.oddsData))
      })
      this.$store.dispatch('GETGAMERATIO',this.data)      
    },

    /**************更新投注数据**************/
    upBettingData(ball){
      let getBetting = this.$store.getters.getBetting;
      this.betting =[];
        if(ball == 'zq'){
          getBetting.forEach((e,index) =>{
            if(('CO' == e.title || 'GS' == e.title) && e.data.length >0 ){
              this.betting.push(e.data);
            }
          })
        }else if(ball == 'lq'){
          getBetting.forEach((e,index) =>{
            if(('CO' == e.title || 'TN' == e.title) && e.data.length >0 ){
              this.betting.push(e.data);
            }
          })
        }else if(ball == 'bq'){
          getBetting.forEach((e,index) =>{
            if('C' == e.title && e.data.length >0 ){
              this.betting.push(e.data);
            }          
          })
        }else if(ball == 'wq'){
          getBetting.forEach((e,index) =>{
            if(('LD' == e.title || 'C' == e.title)&& e.data.length >0 ){
              this.betting.push(e.data);
            }
          })
        }
    }
    
  },

  /**
   * 计算属性
   */
  computed: {
    
    //
    getIsBettingType() { 
      return this.$store.getters.getIsBetting;
    },
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    },
  },
  /**
   * 监听器
   */
  watch: {
    /*--------------------------------------------------------------------------------*/
    // 监听投注框开关
    getIsBettingType(val) {
      this.isBettingShow = val;
    },

    getDeleteType(val) {
      let flag = true;
      this.data.matchData.forEach(e => {
        if (val == "all") {
          e.oddsData.forEach(data => {
            this.$set(data, "isTrue", false);
          });
        } else {
          e.oddsData.forEach(data => {
            if (data.mark == val) {
              this.$set(data, "isTrue", false);
            }
          });
        }
      });
      this.upBettingData(this.$route.query.game_code);
    },
    /*--------------------------------------------------------------------------------*/
  
  },
  /***
   * 页面加载完成触发事件
   */
  mounted() {
    // 获取球类，判定状态
    let ball = this.$store.getters.getBallId;
    let getters = this.$store.getters;
    let match = this.$ports.match;
    let matchDate;
    this.ballType = ball;
    if(ball == 'zq' || ball == 'lq'){
      this.ballSelt = 10;
      if(ball == 'zq' ){
        matchDate = this.$route.query.matchDate;
      }
    }else if(ball == 'wq'){
      this.ballSelt = 100;
    }else if(ball == 'bq'){
      this.ballSelt = 1000;
    }

    if (this.getIsShow) {
      this.$store.dispatch("GETSHOW", true);
      this.getIsShow = false;
    }
    let _this = this;
    let query = this.$route.query;
    let { game_code, leagueID, name } = this.$route.query;
    this.title = name;
    this.game_code = game_code;
    let dataObj = {
      oddsType: getters.getActivity,
      game_code: this.game_code,
      leagueID: "",
      lg_id: this.leagueID,
      type_code: getters.getActivity,
      matchDate: "",
      match_date: matchDate,
      search: "",
      str_type: ""
    };
    this.dataObj = dataObj;
    //
    if (getters.getIsBetting == "100") {
      this.isBettingShow = 100;
    }
    //获取vuex玩法已投注相对应的数据
    this.upBettingData(ball);
    if (query.navBall &&query.strType != undefined && query.code != undefined) {
      this.$public.ajaxTimerFun(function(timing) {
        // console.log(1)
        if (_this.timers) {
        _this.getMatchData(match.matchState, dataObj);
        }else{
          clearInterval(timing);
        }
      },(1000*10));

      this.getMatchData(match.matchState, dataObj);
    } else if (this.$route.query.strType != undefined) {
      dataObj.str_type = this.$route.query.strType;

      if (getters.getActivity != "StChampion") {
        this.$public.ajaxTimerFun(function(timing) {
            // console.log(2)
          if (_this.timers) {
          _this.getMatchData(match.matchState, dataObj);
          }else{
            clearInterval(timing);
          }
        },(1000*10));
        this.getMatchData(match.matchState, dataObj);
      } else {
        this.$public.ajaxTimerFun(function(timing) {
          // console.log(3)
          if (_this.timers) {
          _this.getMatchData(match.matchState, dataObj);
          }else{

            clearInterval(timing);

          }
        },(1000*10));
        this.getMatchData(match.matchState, dataObj);
        
      }
    } else if (this.$route.query.matchDtl != undefined) {
      this.$public.ajaxTimerFun(function(timing) {
       
        dataObj.leagueID = _this.leagueID;
        dataObj.lg_id='';
        dataObj.matchDate = matchDate
        if (_this.timers) {
        _this.getMatchData(match.matchDetails, dataObj);
        }else{
          //  console.log(4)
          clearInterval(timing);
        }
      },(1000*10));
     dataObj.leagueID=this.leagueID;
     dataObj.matchDate = this.$route.query.matchDate;
     dataObj.lg_id='';
      this.getMatchData(match.matchDetails, dataObj);
    } else if (this.$route.query.btn != undefined) {
      dataObj.lg_id = "27822";
      this.getMatchData(match.matchState, dataObj);
    } else {
      this.$public.ajaxTimerFun(function(timing) {
        // console.log(5)
        if (_this.timers) {
        _this.getMatchData(match.matchState, dataObj);
        }else{
          clearInterval(timing); 
        }
      },(1000*10));
      this.getMatchData(match.matchState, dataObj);
    }
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>

<style scoped>
.Serch {
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #363636;
  color: #fd8f26;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.32rem;
}
.lock {
  background: #f4f4f4;
}
.Serch-box-input {
  width: 2rem;
  border: none;
  position: absolute;
  left: 0.5rem;
  top: 0.06rem;
}
.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.44rem;
  width: 4.73rem;
  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;
}
.box-img {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.18rem;
}
.Soccer-game-title {
  display: flex;
  color: #f76649;
  align-items: center;
  width: 1.5rem;
  height: 0.75rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  display: flex;
  left: -0.3rem;
  top: 0.2rem;
  background: #fff;
  background: #626262;
  color: #a6a6a6;
  height: 0.7rem;
  align-items: center;
}
.Soccer-game-src {
  width: 0.25rem;
  height: 0.25rem;
}
.box {
  padding: 0 0.32rem;
  color: #e1e1df;
  height: 0.88rem;
  font-size: 0.32rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
}
.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;
}
div.wqMatch-box {
  height: 0.65rem;
  line-height: 0.3rem;
}
.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;
  width: 2.5rem;
  padding: 0.1rem 0.1rem 0 0.14rem;
  position: relative;
}
.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;
}
.active {
  background: #f76649;
  border: none;
  color: #e1e1df !important;
}
.wqavg {
  width: 4.3rem;
}
/* 赔率 */

.letballHome,
.letballGuest,
.bigHome,
.bigGuest {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  margin: 0.06rem 0.08rem;
  padding: 0.05rem 0;
  /* margin: 0.06rem 0.6rem 0.06rem 0; */
  text-align: center;
}
.letballGuest {
  position: absolute;
  bottom: 0.19rem;
}
.bigHome span,
.bigGuest span,
.letballHome span,
.letballGuest span {
  display: block;
}
.bigHome {
  position: absolute;
  right: 0;
  top: 0.1rem;
}
.bigGuest {
  position: absolute;
  right: 0;
  top: 0.93rem;
}
.active span {
  color: #e1e1df !important;
}
.stardBig {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stardBig .bigSmall {
  color: #9b9999;
}
.mg {
  margin-top: 0.2rem;
}
</style>
