<template>
  <div id="tag-sec-select">
    <el-collapse v-model="activeNames" @change="changeDisplay" :style="`text-align:${selectList.length > 0 ? 'left' : 'center'};`">
      <el-row style="background:#ffffff;">
        <el-col :span="24" v-if="displayList.length > 0" @click.native="changeDisplay">
          <el-tag
            v-for="(item, index) in displayList"
            :key="index"
            :closable="true"
            @close="tagClose(item)"
            style="margin-right:0.5rem;"
            :disable-transitions="true"
          >
            {{ item.label }}
          </el-tag>
        </el-col>
        <el-col :span="24" style="width:100%" @click.native="changeDisplay" v-else>
          {{ placeholder }}
        </el-col>
      </el-row>
      <el-collapse-item name="1" style="text-align:left;">
        <el-row :gutter="10" class="selectCard">
          <el-col :span="6" class="firstMenu">
            <el-menu background-color="#eeeeee" text-color="#000" active-text-color="#409EFF" @select="selectMenu">
              <el-menu-item v-for="(item, index) in firstList" :key="index" :index="item.value">
                <template v-slot="title">
                  {{ item.label }}
                </template>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="18" style="padding:1rem 1rem;">
            <el-row type="flex" style="margin-bottom:1rem;" v-if="secondList.length > 0">
              <el-switch v-model="allSelect" active-text="全选" inactive-text="" @change="childrenSelect"> </el-switch>
            </el-row>
            <el-checkbox-group v-model="selectList" @change="selectChange">
              <el-col :span="6" v-for="(item, index) in secondList" :key="index" class="word">
                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'tag-sec-select',
  props: {
    selected: { type: Array, default: () => [] }, //已选项
    placeholder: { type: String, default: '请选择' }, //提示
    firstList: { type: Array, default: () => [] }, //一级选项列表
    secondList: { type: Array, default: () => [] }, //二级选项列表
    type: { type: String },
  },
  components: {},
  data: () => ({
    activeNames: '',
    selectList: [],
    displayList: [],
    allSelect: false,
  }),
  mounted() {
    this.defaultProcess();
    this.checkIsAll();
  },
  created() {
    if (this.selected.length > 0) {
      this.defaultProcess();
    }
  },
  computed: {},
  watch: {
    selected: {
      handler(value, oval) {
        let dif = _.difference(value, oval);
        if (dif.length > 0) {
          this.defaultProcess();
        }
      },
    },
  },
  methods: {
    //显示/隐藏选择面板
    changeDisplay() {
      if (this.activeNames !== '') {
        this.$set(this, `activeNames`, '');
      } else {
        this.$set(this, `activeNames`, '1');
      }
    },
    //菜单操作
    async selectMenu(val) {
      if (val !== '0') {
        this.cleanUnlimited();
        await this.$emit('listChange', { val: val, type: this.type });
      } else {
        this.$set(this, `displayList`, [{ label: '不限专业', value: '0' }]);
        this.$set(this, `selectList`, [{ label: '不限专业', value: '0' }]);
        this.$emit('selectChange', { val: [{ label: '不限专业', value: '0' }], type: this.type });
      }
      this.checkIsAll();
    },
    //选项操作
    selectChange() {
      let newArr = [];
      this.selectList.map(item => {
        let result = this.secondList.filter(fil => fil.value === item);
        if (result.length > 0) {
          result.forEach(res => {
            newArr.push(res);
          });
        } else {
          result = this.displayList.filter(fil => fil.value === item);
          if (result.length > 0) {
            result.forEach(res => {
              newArr.push(res);
            });
          }
        }
      });
      this.disFilter(newArr);
      this.checkIsAll();
    },
    //不限专业
    cleanUnlimited() {
      let result = this.displayList.filter(item => item.value !== '0');
      this.$set(this, `displayList`, result);
      this.$set(this, `allSelect`, false);
    },
    //全/反选
    childrenSelect(val) {
      //本子列表全选及反选
      let newArr = [];
      let result = [];
      this.secondList.map(item => {
        newArr.push(item.value);
      });
      if (val) {
        result = _.uniq(_.concat(this.selectList, newArr));
      } else {
        result = _.differenceWith(this.selectList, newArr);
      }
      this.$set(this, `selectList`, result);
      this.selectChange();
    },
    //该页选择全部选项,自动切换全选;该页未全部选择,去掉全选
    checkIsAll() {
      if (this.secondList.length > 0) {
        let result = true;
        for (const item of this.secondList) {
          let i = 0;
          for (i = 0; i < this.selectList.length; i++) {
            const select = this.selectList[i];
            if (item.value === select) {
              break;
            }
          }
          if (i === this.selectList.length) {
            result = false;
            break;
          }
        }
        this.$set(this, `allSelect`, result);
      }
    },
    //初始化处理
    defaultProcess() {
      //处理复选框
      let select = this.selected.map(item => item.value);
      this.$set(this, `selectList`, select);
      //处理显示
      this.$set(this, `displayList`, this.selected);
    },
    //显示处理;选择值
    disFilter(val) {
      this.$emit('selectChange', { val: val, type: this.type });
      this.$set(this, `displayList`, val);
    },
    //关闭标签方法
    tagClose(val) {
      //取消选择
      let leastList = this.selectList.filter(item => item !== val.value);
      let leastDisplayList = this.displayList.filter(item => item.value !== val.value);
      this.$set(this, `selectList`, leastList);
      this.disFilter(leastDisplayList);
    },
  },
};
</script>

<style lang="less" scoped>
.selectCard {
  border: 1px solid #e7e8ec;
}
.el-menu-item {
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
</style>
