<template>
  <div id="tag-checkbox">
    <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="selectList.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-card>
          <el-row>
            <el-col :span="24">
              <el-checkbox-group v-if="max" :max="max" :min="min" v-model="selectList" @change="selectChange">
                <el-col :span="6" v-for="(item, index) in firstList" :key="index" class="word">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </el-col>
              </el-checkbox-group>
              <el-checkbox-group v-else v-model="selectList" @change="selectChange">
                <el-col :span="6" v-for="(item, index) in firstList" :key="index" class="word">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </el-col>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'tag-checkbox',
  props: {
    selected: { type: Array, default: () => [] }, //已选项
    placeholder: { type: String, default: '请选择' }, //提示
    firstList: { type: Array, default: () => [] }, //一级选项列表
    max: { type: Number },
    min: { type: Number },
    type: { type: String },
  },
  components: {},
  data: () => ({
    activeNames: '',
    selectList: [],
    displayList: [],
  }),
  created() {},
  watch: {
    selected: {
      handler(val, oval) {
        let dif = _.difference(val, oval);
        if (dif.length > 0) {
          this.defaultProcess();
        }
      },
    },
  },
  computed: {},
  methods: {
    selectChange() {
      let newArr = [];
      this.selectList.map(item => {
        let result = this.firstList.filter(fil => fil.value === item);
        if (result.length > 0) {
          result.forEach(res => {
            newArr.push(res);
          });
        }
      });
      this.disFilter(newArr);
    },
    //显示/隐藏选择面板
    changeDisplay() {
      if (this.activeNames !== '') {
        this.$set(this, `activeNames`, '');
      } else {
        this.$set(this, `activeNames`, '1');
      }
    },
    //初始化处理
    defaultProcess() {
      let select = this.selected.filter(item => item.value !== undefined);
      if (select.length > 0) {
        let result = this.selected.map(item => item.value);
        this.$set(this, `selectList`, result);
        //处理显示
        this.$set(this, `displayList`, this.selected);
      } else {
        let result = this.selected.map(item => {
          return this.defalutSearch(item);
        });
        this.disFilter(result);
      }
    },
    //显示处理;选择值
    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);
    },
    defalutSearch(label) {
      let result = this.firstList.filter(fil => fil.label === label);
      if (result.length > 0) {
        return result[0];
      } else {
        result = this.secondList.filter(fil => fil.label === label);
        if (result.length > 0) {
          return result[0];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
