sport_mobile/.svn/pristine/8d/8d6dbd9353564983f528d9fdfe2345ab7fd7c889.svn-base

<template>
  <div>
    <div v-if="isData">
      <div v-if="obj.a">
        <div class="tit">
          <span>{{'球队得分:'+home_team+'-最后一位数'}}</span>
        </div>
        <div class="playCode">
          <div
            class="home flex"
            v-for="item in data "
            v-if="item.odds_code.startsWith('last_home')"
          >
            <span class="teamName">{{item.condition}}</span>
            <div>
              <span class="odds" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}">{{item.odds}}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.b">
        <div class="tit">
          <span>{{'球队得分:'+guest_team+'-最后一位数'}}</span>
        </div>
        <div class="playCode">
          <div
            class="home flex"
            v-for="item in data "
            v-if="item.odds_code.startsWith('last_guest')"
          >
            <span class="teamName">{{item.condition}}</span>
            <div>
              <span class="odds" :class="{chooseStyle:item.isTrue,rising:item.change == 'rising',falling:item.change == 'falling'}">{{item.odds}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "last_number",
      data: [], //数据源
      isData: "", //是否有数据
      guest_team: "", //客队名
      home_team: "", //主队名
      obj: "" ,//
      lg_id:'',
    };
  },
  /***
   * 方法
   */
  methods: {
    //玩法分类
    playGrouping(data) {
      let obj = {};
      let betting = this.$store.getters.getBetting;
      data.forEach(e => {
         if(betting.length > 0){
          for(let i= 0; i< betting.length; i++){
            if(betting[i].title =="last_number" && betting[i].data.length >0){
              for(let j = 0 ; j < betting[i].data.length ; j++ ){
                if(betting[i].data[j].id == e.id){
                  this.$set(e,'isTrue',true);
                  //betting[i].data.splice(j,1);
                }
              }
              break;
            }
          }
        }
        e.lg_id = this.lg_id;
        if (e.odds_code.startsWith("last_home")) {
          obj.a = true;
        } else if (e.odds_code.startsWith("last_guest")) {
          obj.b = true;
        }
      });
      this.obj = obj;
    }
  },
  /**
   * 计算属性
   */
  computed: {
    getGameRatio() {
      return this.$store.getters.getGameRatio;
    },
    //获取投注数据
    getBetting(){
      return this.$store.getters.getBetting
    }

  },
  /**
   * 监听器
   */
  watch: {
    getGameRatio(val) {
      this.lg_id = val.lg_id
      this.guest_team = val.guest_team;
      this.home_team = val.home_team;
      val.oddsData.forEach(e => {
        if (e[0].p_code == this.title) {
          this.data = e;
          this.isData = true;
          this.playGrouping(this.data);
        }
      });
      //console.log(this.data);
    },
    //投注数据监听和处理
    getBetting(val) {
      if (val.length > 0) {
        let id = this.$store.getters.getDeleteType;
        for (let i = 0; i < val.length; i++) {
          if (val[i].title == this.title) {
            for (let j = 0; j < this.data.length; j++) {
              if (this.data[j].id == id) {
                this.$set(this.data[j], "isTrue", false);
                break;
              }
            }
            break;
          }
        }
      } else {
        for (let j = 0; j < this.data.length; j++) {
          if (this.data[j].isTrue) {
            this.$set(this.data[j], "isTrue", false);
          }
        }
      }
    },
  }
};
</script>
<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tit {
  background: #373737;
  font-size: 0.14rem;
  padding: 0 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #b4b4b4;
}
.playCode {
  color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #fff;
}
.playCode .home {
  width: calc(50% - 1px);
  padding: 0 0.1rem;
  background: #fff;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  height: 0.4rem;
  line-height: 0.4rem;
}
.playCode .odds {
  display: inline-block;
  height: 0.3rem;
  border: 1px solid #e4e4e4;
  width: 0.5rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.23rem;
  margin: 7px auto 4px;
  padding: 0.04rem;
}
.playCode .odds:hover {
  background: orange;
  color: #fff;
  border-color: orange;
}

.playCode .home:hover {
  background: #fff5e9;
}
.condation {
  height: 0.4rem;
  vertical-align: middle;
  color: #bd4700;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
</style>