<template>
  <el-select
    placeholder="请选择预设视频分类"
    @focus="getAssetTypeData"
    multiple
    v-model="assetTypeIdList"
    @change="getSelectDep"
  >
    <el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
    <el-option v-for="item in videoContentCat" :label="item.name" :value="item.id" :key="item.id"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      videoContentCat: [],
      assetTypeIdList: [],
      checkedThing: false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      }
    };
  },
  methods: {
    // this.$refs.mulDisplay.videoContentCat	// 使用时父组件直接获取此值即可
    // 获取视频分类列表
    getAssetTypeData() {
      let vm = this;
      vm.$https({
        url: "videoContentCat/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.videoContentCat = data;
          // this.value1[0]=data.expireDateEnd
          //this.value1[1]=data.expireDateStart
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    getSelectDep(assetTypeIdList) {
      if (assetTypeIdList.length === this.videoContentCat.length) {
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
    },

    selectAllThing() {
      // debugger
      this.assetTypeIdList = [];
      if (this.checkedThing) {
        this.videoContentCat.map(item => {
          this.assetTypeIdList.push(item.id);
        });
      } else {
        this.assetTypeIdList = [];
      }
    }
  }
};
</script>

<style>
</style>