sport_pc/.svn/pristine/2a/2aafe88bafa095529523d7cf469e3a87b2d51c62.svn-base

<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>
    <div class="champion">
      <div v-for="item in ChampionData" :key="item.id">
        <div class="title">
          <span>{{item.name}}</span>
          <div class="time">
            <span>{{item.last_time}}</span>
          </div>
        </div>
        <div v-for="(items) 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(itemList.id,itemList.odds,itemList.odds_only,itemList.p_code,itemList.match_id,itemList.odds_code,items.title,itemList.lg_id,itemList.team)"
                :class="{active:itemList.isTrue,increased_color:itemList.change == 'add',reduce_color:itemList.change == 'red'}"
              >{{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>
    <div class="BettingWindow" v-if="isBettingWindow =='100'">
      <BettingWindow/>
    </div>
  </div>
</template>
<script>
import BettingWindow from "./StBettingWindow.vue";
import Loading from "@/components/StLoading";
export default {
  name: "champion",
  data() {
    return {
      title: this.$route.query.name, //标题
      data: "", // 冠军盘口数据
      ChampionData: "",
      isBettingShow: "0", //投注显示关闭默认false
      // 冠军盘新增
      match_id: "", //赛事ID
      betting: 10000, //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      lg_id: "",
      scorll: "", //背景滚动
      isBettingWindow: "-1",
      getIsShow:true,
      // 存储变色数据
      previousStorage:[],
      timers : true
    };
  },
  components: {
    BettingWindow,
    Loading
  },
  methods: {
    /*--------------------------------------------------------------------------------*/
    //   冠军盘玩法投注
    //冠军盘口投注
    championBetting(
      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
      };
      console.log(bettingInfo);
      let matchList = this.$store.getters.getBetting;
      if (this.thisNum != 10000) {
        //删除vuex投注数据
        matchList[this.thisNum].data.forEach((res, index) => {
          if (res.id == id) {
            console.log(res.id, id);
            this.modifyChampionStyle(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(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(id);
        if (this.$store.getters.getIsBetting == "100") return false;
        this.$store.dispatch("ISBETTING", "100");
      }
    },
    /*-----------------------------------------------------*/
    /*-----------------------------------------------------*/
    //修改当前页面样式公共方法
    modifyChampionStyle: function(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();
              console.log(res.isTrue);
              return false;
            }
            return true;
          });
          return true;
        });
      });
    },
    /*--------------------------------------------------------------------------------*/
    // 返回上一页
    isreturn() {
      history.go(-1);
    },
    getAjax() {
      this.$http
        .get(this.$ports.match.matchState, {
          game_code: this.$route.query.game_code,
          lg_id: this.$route.query.leagueID,
          type_code: "StChampion"
        })
        .then(res => {
          this.championGroup(res.data.data);
        });
            let _this = this;
      setTimeout(() => {
        _this.$store.dispatch("GETSHOW", false);
      }, 1000);
    },
    /*--------------------------------------------------- */
    //冠军
    championGroup(data) {
      // console.log("data", data);
      let champion = {},
        stiTime = "",
        chamData = [];
      let title = Object.keys(data);
      let val = Object.values(data);
      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;
      let storage = this.previousStorage;
      if(storage && storage != null && storage.length >0){
        this.ChampionData.forEach(e =>{
          e.data.forEach(k =>{
            k.datas.forEach(item =>{
              storage.forEach(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.ChampionData.forEach(e =>{
         e.data.forEach(k =>{
           this.previousStorage.push(k.datas)
         })
       })
      //  console.log('123123123',this.previousStorage)
      console.log("冠军", this.ChampionData);
    
    },
    //获取vueX相对应投注信息
    getTypeBetting: function(type) {
      let data = "-1";
      if (this.betting.length > 0) {
        this.betting.forEach((e, index) => {
          if (e.title == type) {
            data = e.data;
            this.thisNum = index;
          }
        });
      } else {
        data = "-1";
      }

      return data;
    }
  },
  mounted() {
       if (this.getIsShow) {
      this.$store.dispatch("GETSHOW", true);
      this.getIsShow = false;
    }
    if (this.$store.getters.getIsBetting == "100") {
      this.isBettingShow = 100;
    }
    //获取vuex玩法已投注相对应的数据
    //是否展示投注框
    if (this.$store.getters.getIsBetting == "100") {
      this.isBettingWindow = "100";
    }
    //获取vuex玩法已投注相对应的数据
    if (this.$store.getters.getBetting) {
      this.betting = this.$store.getters.getBetting;
    }
    // 调用
    this.getAjax();
        let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
     _this.getAjax("");
      }else{
        clearInterval(timing);
      }
    },(1000*10));
  },
  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;
      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 ("gj" == e.title) {
            this.thisNum = index;
            this.betting = e.data;
            // console.log('betting', this.betting)
          }
        });
      }
    },
    // 监听投注框开关
    getIsBetting(val) {
      this.isBettingWindow = val;
    }
  },
    beforeDestroy(){
    this.timers = false;
  }
};
</script>
<style scoped>
.Serch {
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #363636;
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.32rem;
}
.box-img {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.18rem;
}
.champion .title {
  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: #f4f4f4;
}
.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>