<template>
  <div class="hello">
    <el-col :span="24" class="subject">
      <div class="djclass">
          <el-col :span="8">
            <el-select v-model="oneLevel" placeholder="请选择一级分类" @change="currentSel" value-key="KsbClassName">
              <el-option v-for="item in options" :key="item.KsbClassID" :label="item.KsbClassName" :value="item"></el-option>
            </el-select>
          </el-col>

          <el-col :span="8">
            <el-select v-model="secondLevel" placeholder="请选择二级分类" @change="secondLevelCurrentSel" value-key="KsbClassName">
              <el-option v-for="item in secondary" :key="item.KsbClassID" :label="item.KsbClassName" :value="item"></el-option>
            </el-select>
          </el-col>

            <el-col :span="8">
              <el-select v-model="thirdclass" placeholder="请选择三级分类" @change="getDataThirdclass" value-key="Name">
                <el-option v-for="item in dataThirdclass" :key="item.AppID" :label="item.Name" :value="item"></el-option>
              </el-select>
            </el-col>
      </div>
    </el-col>
  </div>
</template>

<script>
  import {
    getKsbClass,
    getKsbClassInfo
  } from "../../api/Api.js";
  export default {
    props: {
      items: {
        type: Array,
        default: Array
      }
    },
    data() {
      return {
        options: [],
        oneLevel: "",
        secondLevel: "",
        stairID: {},
        secondary: [],
        twoId: {},
        thirdclass: "", //三级分类双向绑定
        dataThirdclass: [], //三级分类的数据
      };
    },
    watch: {


    },
    created() {
      getKsbClass().then(res => {
        console.log("科目列表", res.data.data);
        var datas = [];
        for (let index = 0; index < res.data.data.length; index++) {
          if (res.data.data[index].MediClassID != 0) {
            datas.push(res.data.data[index]);
          }
        }
        console.log("科目列表sssss", datas);
        this.options = datas;
      });
    },
    methods: {
      deleteStudent: function() {
        console.log("我是子组件的", 0)
        this.$emit("deleteIndex", 0);
      },
      //点击一级类别
      currentSel(val) {
        this.secondLevel = "";
        this.secondary = val.Childs;
      },
      //获取二级类别
      secondLevelCurrentSel(val) {
        var ids = {
          KsbClassID: val.KsbClassID
        };
        var that = this;
        getKsbClassInfo(ids).then(res => {
          that.dataThirdclass = res.data.data;
        });
      },
      getDataThirdclass(val) {
        console.log(val)
        this.$emit("uploadData", val);

      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style >
  .km-title {
    text-align: right;
    font-size: 20px;
    margin-right: 10px;
  }
  .subject{
    margin-top:10px;
  }
</style>
