sport_pc/.svn/pristine/28/2831582e073859f319d5b475457bd638af6a5c6b.svn-base

<template>
  <div>
    <div class="title" v-if="isShow">
      <span style="font-size:.28rem;color:#F76649;">{{titel}}</span>
    </div>
    <div
      v-for="(item,id) in data"
      @click="getInfo(id,item.match_id,item.game_code)"
      class="macth row allAlignment"
      :key="id"
      v-if="isShow"
    >
      <div class="row">
        <div class="column allAlignment center">
          <div class="score-icon row center">
            <span style=" margin:0.07rem; ">{{item.home_score}}</span>
          </div>
          <div class="score-icon row center">
            <span style=" margin:0.07rem; ">{{item.guest_score}}</span>
          </div>
        </div>
        <div class="team-box column allAlignment">
          <span class="teamName">{{item.home_team}}</span>
          <span style="font-size:0.2rem;padding:0.06rem 0 ;">vs</span>
          <span class="teamName">{{item.guest_team}}</span>
        </div>
      </div>
      <div class="row">
        <div class="column allAlignment center">
          <span class="macth-time" v-if="item.game_code != 'lq'">{{item.match_process}}</span>
          <span class="macth-time" v-else-if="item.game_code == 'lq' && item.match_process == '1'">第一节</span>
          <span class="macth-time" v-else-if="item.game_code == 'lq' && item.match_process == '2'">第二节</span>
          <span class="macth-time" v-else-if="item.game_code == 'lq' && item.match_process == '3'">第三节</span>
          <span class="macth-time" v-else-if="item.game_code == 'lq' && item.match_process == '4'">第四节</span>
          <img src="../assets/st-imges/stadium.png" alt>
          <span class="macth-time">{{item.match_time ? item.match_time :'00:00'}}  </span>
        </div>
      </div>
    </div>
    <div class="rolling" v-if="isShow">
      <RollingBall :ballName="ball.name" :bm='bm' :name="name" :index="ball.index" :gameCode="gameCode"></RollingBall>
    </div>
  </div>
</template>
<script>
import "../css/index.css";
import RollingBall from "./StRollingBall";
import Loading from "./StLoading";
export default {
  name: "BasketballBlock",
  props: ["type"],
  data() {
    return {
      titel: "",
      timer: [], //存储时间
      idx: "",
      isShow: false,
      gameCode: "", //球类别名
      name: "", //球类名称传值
      bm: "gq",
      ball: {
        name: "",
        index: ""
      },
      data: "",
      timers: true, // 定时器
      getIsShow:true
    };
  },
  components: {
    RollingBall,
    Loading
  },
  methods: {
    getInfo: function(val, match_id,game_code) {
      this.$store.dispatch("GETACTIVITY", "StRollBall");
      //onsole.log("id", val);
      this.$router.push({
        path: "./StRollBallBettingPage",
        query: {
          gameCode: this.gameCode,
          status: 1,
          number: 0,
          home: true,
          name: this.titel
        }
      });
      this.$store.dispatch('GET_BALL_ID',game_code)
      this.$store.dispatch("MACTH_ID", match_id);
    },
    getAjax: function(data) {
      if(data.matchData == 0) return false;
      let _this = this;
      if (this.type == 1) {
        let matchDtat_leng = data.matchData.length;
        for(var i = 0; i < matchDtat_leng; i++){
          data.matchData[i].game_code = data.game_code;
        }
        if(matchDtat_leng > 6){
          this.data = data.matchData.slice(0,6);
        }else{
           this.data = data.matchData
        }
        this.isShow = true;
        this.titel = data.gameName;
        this.name = this.titel;
        this.ball.name = "所有" + this.titel + "滚球";
        this.ball.index = data.matchData.length;
        this.gameCode = data.game_code;
        // let [f, s] = this.data[0].match_time.split(":");
        
        // _this.data.forEach(val => {
        //   if (val.match_time != "") {
        //     let [f, s] = val.match_time.split(":");
        //     this.$public.timer(f, s, function(f, s) {
        //       val.match_time = f + ":" + s;
        //     });
        //   }
        // });

      } else if (this.type == 2) {
        let matchDtat_leng = data.matchData.length;
        for(var i = 0; i < matchDtat_leng; i++){
          data.matchData[i].game_code = data.game_code;
        }        
        if(matchDtat_leng > 6){
          this.data = data.matchData.slice(0,6);
        }else{
           this.data = data.matchData
        }        
        this.isShow = true;
        this.titel = data.gameName;
        this.name = this.titel;
        this.ball.index = this.data.length;
        this.ball.name = "所有" + this.titel + "滚球";
        this.gameCode = data.game_code;
      } else if (this.type == 3) {
        let matchDtat_leng = data.matchData.length;
        for(var i = 0; i < matchDtat_leng; i++){
          data.matchData[i].game_code = data.game_code;
        }        
        if(matchDtat_leng > 6){
          this.data = data.matchData.slice(0,6);
        }else{
           this.data = data.matchData
        }            
        this.isShow = true;
        this.titel = data.gameName;
        this.ball.index = this.data.length;
        this.name = this.titel;
        this.ball.name = "所有" + this.titel + "滚球";
        this.gameCode = data.game_code;    
      }
     
      setTimeout(()=>{
        _this.$store.dispatch("GETSHOW", false);
      },1000)
      
    }
  },
    /**
   * 计算属性
   */
  computed: {
    getHomeRollBall() {
      return this.$store.getters.getHomeRollBall;
    },
  },
  /**
   * 监听器
   */
  watch: {
    getHomeRollBall(val){
      if(this.type == 1){
        this.getAjax(val.zqData);
      }else if(this.type == 2){
       this.getAjax(val.lqData);
      }else if(this.type == 3){
        this.getAjax(val.bqData);
      }
    }
  },
  mounted() {
    if(this.getIsShow){
      this.$store.dispatch("GETSHOW", true);
      this.getIsShow = false;
    } 
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>
<style scoped>
/* .box{
        border-bottom: 1px soild  red;
    } */
.macth {
  height: 1.76rem;
  margin-top: 0.2rem;
  color: #333333;
  background: #dcdcdc;
  border-radius: 0.08rem;
  /* border:2px solid #CECECE; */
  padding: 0.24rem;
  font-size: 0.22rem;
}
.score-icon {
  min-width: 0.66rem;
  background: #f76649;
  border-radius: 0.17rem;
  color: #f5f5f5;
  font-size: 0.2rem;
}
.teamName {
  font-size: 0.26rem;
}
.team-box {
  margin-left: 0.29rem;
  max-width: 3.4rem;
}
.macth-time {
  font-size: 0.24rem;
}
.title {
  padding-top: 0.1rem;
  margin: 0.1rem 0;
  font-size: 0.28rem;
  color: #000000;
}
.rolling {
  padding-top: 0.41rem;
  padding-bottom: 0.46rem;
}
</style>