<template>
  <div id="lecturePopup">
    <p class="top">筛选</p>
    <van-collapse v-model="activeNames" :border="false">
      <van-collapse-item title="直播院校" name="1" :border="false">
        <span class="select_item" v-for="(item,i) in selectArr" :key="'select'+i" :class="item.isSelect?'active':''" :data-index="i" @click="handleSelect">{{item.label}}</span>
      </van-collapse-item>
      <van-collapse-item title="高考特色" name="2" :border="false">
        <span class="select_item" v-for="(item,i) in characteristicList" :key="'characteristic'+i" :class="item.isSelect?'active':''" :data-index="i" @click="handleCharacteristic">{{item.text}}</span>
      </van-collapse-item>
      <van-collapse-item title="办学性质" name="3" :border="false">
        <span class="select_item" v-for="(item,i) in natureList" :key="'nature'+i" :class="item.isSelect?'active':''" :data-index="i" @click="handleNature">{{item.text}}</span>
      </van-collapse-item>
      <van-collapse-item title="地区" name="4" :border="false">
        <span class="select_item" v-for="(item,i) in areaList" :key="'area'+i" :class="item.isSelect?'active':''" :data-index="i" @click="handleArea">{{item.label}}</span>
      </van-collapse-item>
    </van-collapse>
    <div class="btn_box">
      <van-button type="default" @click="resetAll">重置</van-button>
      <van-button type="info" @click="confirmSelect">确认</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeNames: ['1', '2', '3', '4'],
      selectArr: [{
        label: '全部',
        isSelect: true
      }, {
        label: '未开始',
        isSelect: false
      }, {
        label: '直播中',
        isSelect: false
      }, {
        label: '已结束',
        isSelect: false
      }],
      characteristicList: [],//高考特色 885 211
      natureList: [],//办学性质 公办 民办
      areaList: [],
    }
  },
  mounted () {
    this.getAreaList()//地区列表
    this.getUniParam()//高考特色、办学性质
  },
  methods: {
    // 筛选时间段
    handleSelect (e) {
      let index = e.currentTarget.dataset.index;
      let selectArr = [...this.selectArr];
      for (let i in selectArr) {
        selectArr[i].isSelect = false;
      }
      selectArr[index].isSelect = true;
      this.selectArr = selectArr;
    },
    //获取高考特色、办学性质
    getUniParam () {
      this.http.getUniParam().then((res) => {
        if (res.success) {
          this.characteristicList = res.data[1].children;
          this.natureList = res.data[2].children;
        }
      })
    },
    // 点击高考特色
    handleCharacteristic (e) {
      let index = e.currentTarget.dataset.index;
      let characteristicList = [...this.characteristicList];
      characteristicList[index].isSelect = !characteristicList[index].isSelect;
      this.characteristicList = characteristicList;
    },
    // 点击办学性质
    handleNature (e) {
      let index = e.currentTarget.dataset.index;
      let natureList = [...this.natureList];
      natureList[index].isSelect = !natureList[index].isSelect;
      this.natureList = natureList;
    },
    // 获取地区列表
    getAreaList () {
      this.http.getAreaList().then((res) => {
        if (res.success) {
          this.areaList = res.data;
        }
      })
    },
    // 点击地区
    handleArea (e) {
      let index = e.currentTarget.dataset.index;
      let areaList = [...this.areaList];
      areaList[index].isSelect = !areaList[index].isSelect;
      this.areaList = areaList;
    },
    // 重置筛选项
    resetAll () {
      // 重置时间段
      let selectArr = [...this.selectArr];
      for (let i in selectArr) {
        selectArr[i].isSelect = false;
      }
      selectArr[0].isSelect = true;
      this.selectArr = selectArr;
      // 重置高考特色
      let characteristicList = [...this.characteristicList];
      for (let i in characteristicList) {
        characteristicList[i].isSelect = false;
      }
      this.characteristicList = characteristicList;
      // 重置办学性质
      let natureList = [...this.natureList];
      for (let i in natureList) {
        natureList[i].isSelect = false;
      }
      this.natureList = natureList;
      // 重置地区
      let areaList = [...this.areaList];
      for (let i in areaList) {
        areaList[i].isSelect = false;
      }
      this.areaList = areaList;
    },
    // 确认筛选项
    confirmSelect(){
      let type = '';//1-未开始； 2-直播中； 3-已结束
      for(let i in this.selectArr){
        if(this.selectArr[i].isSelect&&i!=0){
          type = i
        }
      }

      let characteristic = [];
      for(let i in this.characteristicList){
        if(this.characteristicList[i].isSelect){
          characteristic.push(this.characteristicList[i].text)
        }
      }
      let nature = [];
      for(let i in this.natureList){
        if(this.natureList[i].isSelect){
          nature.push(this.natureList[i].text)
        }
      }
      let area = [];
      for(let i in this.areaList){
        if(this.areaList[i].isSelect){
          area.push(this.areaList[i].label)
        }
      }
      this.$emit('changeSchoolParam',{type,characteristic,nature,area})
    }
  }
}
</script>
<style lang="scss">
#lecturePopup {
  width: 624px;
  background: #fff;
  height: 100vh;
  overflow: auto;
  padding-bottom: 100px;
  box-sizing: border-box;
  .top {
    font-size: 28px;
    line-height: 72px;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    background: #f8f8f8;
  }
  .van-collapse-item__content {
    padding: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .select_item {
    display: inline-flex;
    font-size: 24px;
    line-height: 30px;
    color: #999999;
    width: 132px;
    height: 64px;
    background: #f8f8f8;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    margin-right: 16px;
    text-align: center;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
    &.active {
      color: #4576ff;
      background: #f3f6ff;
    }
  }
  .btn_box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 624px;
    .van-button {
      width: 50%;
    }
  }
}
</style>