<template>
  <div class="hello">
    <el-col :span="24" class="subject">
      <div class="djclass">
        <el-col :span="3" class="km-title">
          <span class="zlTitle">选择发布科目:</span>
        </el-col>
        <el-col :span="18">
          <el-col :span="5">
            <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="5">
            <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="6">
            <el-col :span="16">
              <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>
            <el-col :span="2" class="iconde">
              <div class="iconde">
                <i class="el-icon-delete" v-if="index" @click="deleteStudent"></i>
              </div>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-col>
  </div>
</template>

<script>
  import {
    getKsbClass,
    getKsbClassInfo
  } from "../../api/Api.js";
  export default {
    props: {
      index: {
        type: Number,
        required: true
      },
      items: {
        type: Array,
        default: Array
      }
    },
    data() {
      return {
        student: {
          one: {},
          two: {},
          tree: {}
        },
        options: [],
        oneLevel: "",
        secondLevel: "",
        stairID: {},
        secondary: [],
        twoId: {},
        thirdclass: "", //三级分类双向绑定
        dataThirdclass: [], //三级分类的数据
      };
    },
    watch: {
      student: {
        handler(newV, oldV) {
          if (newV.one.length === 0) {
            return false;
          }
          if (newV.two.length === 0) {
            return false;
          }
          if (newV.tree.length === 0) {
            return false;
          }
          this.$emit("uploadData", {
            index: this.index,
            data: newV
          });
        },
        deep: true
      },
      items: {
        handler(newV, oldV) {
          if (newV.length !== 0) {
            this.student = { ...newV[this.index]
            };
          }
        },
        deep: true
      }
    },
    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("我是子组件的", this.index)
        this.$emit("deleteIndex", this.index);
      },
      //点击一级类别
      currentSel(val) {
        console.log("我是获取到的", val);
        this.secondLevel = "";
        var stair = {
          name: val.KsbClassName,
          id: val.KsbClassID
        };
        this.student.one = stair;
        this.stairID = stair;
        console.log("一级分类名字和id", this.student.stairID);
        this.secondary = val.Childs;
      },
      //获取二级类别
      secondLevelCurrentSel(val) {
        var twoId = {
          name: val.KsbClassName,
          id: val.KsbClassID
        };
        this.student.two = twoId;
        console.log("二级分类名字和id", this.student.twoId);
        var ids = {
          KsbClassID: val.KsbClassID
        };
        var that = this;
        getKsbClassInfo(ids).then(res => {
          that.dataThirdclass = res.data.data;
          console.log("我时三级的", that.dataThirdclass);
        });
      },
      getDataThirdclass(val) {
        console.log(val);
        var tree = {
          id: val.AppID,
          name: val.Name
        };
        this.student.tree = tree;
      }
    }
  };
</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>
