<template>
  <div class="filters_group">
      <!-- <div class="tag_group" v-for="(filterItem,index) in filtersData" :key="index">
        <div class="tag_group_title">{{ filterItem.name }}：</div>
        <div class="tag_item" v-for="item in filterItem.list" :key="item.value" @click="selectItem(index,item.value, filterItem)" 
        :class="item.value == filterItem.value?'active':''">
          {{ item.label }}
        </div>
      </div> -->

      <div class="tag_group">
        <div class="tag_group_title">科目名称：</div>
        <div class="tag_item" v-for="(item,index) in courseList" :key="item.code" 
          @click="selectItem(index,item, 1)" 
          :class="courseIndex == index?'active':''">
            {{ item.name }}
        </div>
      </div>

      <div class="tag_group" v-if="registrationTypeList.length > 0">
        <div class="tag_group_title">学籍类型: </div>
        <div class="tag_item" v-for="(item,index) in registrationTypeList" :key="item.code" 
          @click="selectItem(index,item, 2)" 
          :class="registrationTypeIndex == index?'active':''">
            {{ item.name }}
        </div>
      </div>

      <div class="tag_group" v-if="reportTypeList.length > 0">
        <div class="tag_group_title">分数类型: </div>
        <div class="tag_item" v-for="(item,index) in reportTypeList" :key="item.code" 
          @click="selectItem(index,item, 3)" 
          :class="reportTypeIndex == index?'active':''">
            {{ item.name }}
        </div>
      </div>

      <div class="tag_group">
        <div class="tag_group_title">班级类型：</div>
        <div class="tag_item" v-for="(item,index) in classTypeArr" :key="item.code" 
          @click="selectItem(index,item, 2)" 
          :class="classTypeIndex == index?'active':''">
            {{ item.name }}
        </div>
      </div>
      <div class="tag_group" v-if="classList.length > 0">
        <div class="tag_group_title">班级名称：</div>
        <div class="tag_item" v-for="(item,index) in classList" :key="item.code" 
          @click="selectItem(index,item, 3)" 
          :class="classNameIndex == index?'active':''">
            {{ item.name }}
        </div>
      </div>

      





    </div>
</template>
<script>
  export default {
    props:{
      filtersData:{// 班级 科目对象数据
        type: Object,
        default:()=> {}
      }
    },
    data() {
      return {
        filtersData: {},// 后端数据
        courseList: [],// 科目名称数组
        registrationTypeList: [],// 学籍类型数组
        classList: [],// 班级名称数组
        reportTypeList:　[],// 分数类型数组
        classTypeArr: [],// 教学班级数组数据,

        courseIndex: 0,// 默认展示科目名称索引
        registrationTypeIndex: 0,// 学籍类型默认索引
        reportTypeIndex:0,// 分数类型索引
        classTypeIndex: 0,// 默认展示班级类型索引
        classNameIndex: 0,// 班级名称默认索引

        

    　}
    },
    methods:{
      selectItem(index, item){
        this.idx = index;
        this.classList = item.classList;

        // let d = {index,value:val}
        // this.$emit('selectItem',d, item)
      }
    },
    created() {
      // let filtersData = JSON.parse( localStorage.getItem('filtersData') );// 接口调不同，调试，上线注掉
      let filtersData = this.filtersData;
      this.classTypeArr.push(filtersData.classType.jxClass);// 班级类型赋值
      this.classTypeArr.push(filtersData.classType.xzClass);// 班级类型赋值
      this.classList = this.classTypeArr[0].classList;// 默认展示班级
      this.courseList = filtersData.courseList;// 科目名称赋值
      this.registrationTypeList = filtersData.registrationTypeList;// 学籍类型赋值
    }
  }
</script>
<style lang="scss" scoped>
.filters_group {
  background: #fff;
  .tag_group{
    padding:8px 0;
    .tag_group_title{
      margin-right: 8px;
      width:auto;
      height: auto;
      color:#333333;
      font-size:14px;
      text-align: left;
      line-height: 30px;
      font-weight: 600;
      letter-spacing: 0em;
    }
    display: flex;
    .tag_item {
      margin-right: 8px;
      padding:0 8px;
      line-height:30px;
      border-radius:2px;
      font-size: 14px;
      background: #fff;
      color:#999999;
      cursor: pointer;
      &.active {
        // background: #2E64FA;
        // color:white;
        background: rgba(71,113,203,0.1);
        color:#2E64FA;
      }
      &:hover
      {
        color:#2E64FA;
      }
    }
  } 
}
</style>
