sport_mobile/.svn/pristine/33/33a8a25bfb996bb1bf1b71f8efe54435238ed23b.svn-base

<template>
  <div>
    <div class="elastic">
      <div class="title">
        <div>
          <div class="ball">
            <span>{{ball_type=='zq'?'足球':ball_type=='lq'?'篮球':ball_type=='bq'?'棒球':ball_type=='wq'?'网球':''}}</span>
          </div>
          <span class="menu" style="font-size:0.16rem">菜单</span>
        </div>
        <!-- <div @click="All()">
          <label>全选</label>
          <input type="checkBox" :checked="all">
        </div> -->
      </div>
      <div class="match">
        <div>联赛</div>
        <div class="btn">
          <div class="submit" v-if="showSubmit" @click="Submit()">提交</div>
          <div class="reset" @click="returns()">取消</div>
        </div>
      </div>
      <div class="info">
        <div v-for="(item,index) in data" :key="index">
          <div>
            <div class="title">
              <div>{{item.name}}</div>
              <div>
                <label for>全部</label>
                <input @click="Region(index)" type="checkBox" :checked="item.active">
              </div>
            </div>
            <div class="eventInfo row wrap">
              <div class="item row allAlignment " v-for="(itemList,j) in item.lg_list" :key="itemList.id">
                <div>
                  <input @click="League(index,j,itemList.id)" type="checkBox" :checked="itemList.click">
                  <span>{{itemList.leagueName}}</span>
                </div>
                <div class="num">{{itemList.matchNum}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navLIstData from "@/assets/navLIstData";
export default {
  name:'elasticFrame',
  data() {
    return {
      play_code:'',
      ball_type:'',
      showSubmit:false,//提交按钮状态
      data: [],
      chooseData:[],
    };
  },
  methods: {

    /*-----------------------------------------*/
    //地区选中 
    Region(index) {
      this.data.forEach((e,i)=>{
       if(i==index){
          this.$set(e,'active',!e.active)
          e.lg_list.forEach(a=>{
            this.$set(a,'click',e.active)
          })
       }
      })
      // this.getAll();
      this.showSubmit = false;
      this.getSubmit();
    },

    /*-----------------------------------------*/
    //联赛选中
    League(index, num,id) {
      this.$set(this.data[index].lg_list[num],'click',!this.data[index].lg_list[num].click)
      for(let i = 0 ;i <this.data[index].lg_list.length;i++){
        if(this.data[index].lg_list[i].click == true){
          this.data[index].active = true;
        }else{
          this.data[index].active = false;
          break;
        }
      }
      this.getLeague(index);
      // this.getAll();
      this.showSubmit = false;
      this.getSubmit();
    },

    /*-----------------------------------------*/
    //联赛选中判断父级选中
    getLeague(index){
      this.data[index].lg_list.forEach(e=>{
        if(e.click==false){
          this.data[index].active = false
        }
      })
    },

    /*-----------------------------------------*/
    // 取消返回父级
    returns(){
      this.$store.dispatch("SET_CONTROLROUTING",this.play_code);
      this.$store.dispatch("SET_LEAGUEDATA",[]);
    },

    // 数据交互，返回父级
    Submit(){
      // 发送请求
      this.$store.dispatch("SET_CONTROLROUTING",this.play_code);
      this.$store.dispatch("SET_LEAGUEDATA",[]);
      this.$store.dispatch("SET_LEAGUEDATA",this.chooseData);
    },
    // 获取提交按钮显示状态
    getSubmit(){
      this.chooseData =[];
      for(let i= 0 ;i< this.data.length;i++){
        for(let j = 0 ; j< this.data[i].lg_list.length ; j++){
          if(this.data[i].lg_list[j].click == true){
            this.showSubmit = true;
            this.chooseData.push(this.data[i].lg_list[j].lg_id)
            //return false
          }
        }
      }
    }
  },
  computed: {
  },
  mounted() {

    this.play_code = this.$store.getters.getPaly_code;
    this.ball_type = this.$store.getters.getBallCode

    //联赛赛事数据
    this.$http.get(this.$ports.home.gameList, {
        type: this.$store.getters.getActivity,
        p_code: this.play_code,
        game_code: this.ball_type,
      }).then(res => {
        if(res.data.data.length >0){
          this.data =res.data.data[1]
        }
      })

  },
  created(){
    this.data.forEach(e=>{
     this.$set(e,'active',false)
      e.lg_list.forEach(a=>{
        this.$set(a,'click',false)
      })
    })
  }
};
</script>
<style scoped>
.elastic {
  width: 100%;
  height: auto;
}
.elastic .title {
  background: rgba(170, 170, 170, 1);
  height: 0.5rem;
  line-height: 0.5rem;
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.elastic .title label {
  color: #666666;
  font-size: 0.16rem;
  vertical-align: middle;
}
.elastic .title .ball {
  display: inline-block;
  width: 0.5rem;
  height: 0.36rem;
  line-height: 0.36rem;
  text-align: center;
  background: rgba(204, 204, 204, 1);
  font-size: 0.18rem;
  color: #f76649;
  position: relative;
  margin-right: 0.15rem;
}
.elastic .title .ball::after {
  content: "";
  display: inline-block;
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.2rem;
  top: 0.08rem;
  border-width: 0.1rem;
  border-style: solid;
  border-color: transparent transparent transparent rgba(204, 204, 204, 1);
}
.elastic .title input {
  width: 0.2rem;
  height: 0.2rem;
  margin-left: 0.1rem;
}
/* 联赛 */
.match {
  background: #888888;
  color: #ffffff;
  display: flex;
  padding: 0 0.2rem;
  justify-content: space-between;
  align-items: center;
  height: 0.5rem;
  margin-bottom: 0.1rem;
}
.match div {
  font-size: 0.16rem;
}
.match .btn {
  text-align: center;
  display: flex;
}
.match .btn div {
  width: 0.6rem;
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  background: #71ca18;
  border-radius: 0.05rem;
  cursor: pointer;
}
.match .btn .reset {
  margin-left: 0.2rem;
  background: #666666;
  color: #cccccc;
}
/* 数据格式 */
.info {
  height: auto;
  background: #fff;
}
.info .title {
  background: #cccccc;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  color: #333333;
  padding: 0.2rem;
}
.eventInfo {
  width:100% ;
}
.item {
  width: 50%;
  padding:0.1rem 0.2rem;
  border-right: 1px solid rgba(237, 237, 237, 1);
}
.item input {
  width: 0.2rem;
  height: 0.2rem;
}
.item span {
  vertical-align: middle;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.14rem;
}
.num {
  width: 0.3rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background: #999999;
  text-align: center;
  color: #fff;
  border-radius: 0.05rem;
}
.match .btn .reset:hover {
  background: #959595;
  color: #fff;
}
</style>