<!--
 * @Description: 带多选按钮的多选下拉框
 * @Author: Rockery
 * @Date: 2021-06-21 09:54:49
 * @LastEditors: Rockery
 * @LastEditTime: 2021-07-15 08:51:45
 * @FilePath: \pc_web\src\components\CheckboxMultipleSelect\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <el-select
    v-model="selectValues"
    v-bind="$attrs"
    :size="size"
    multiple
    :filterable="filterable"
    :clearable="clearable"
    :collapse-tags="collapseTags"
    placeholder="请选择"
    style="width: 50%;"
    @change="changeSelect"
  >
    <el-option v-if="options.length" label="全选" value="全选">
      <el-checkbox v-model="isSelectAll" @click.prevent.native>全选</el-checkbox>
    </el-option>
    <el-option
      v-for="item in options"
      :key="item[props.value]"
      :label="item[props.label]"
      :value="item[props.value]"
    >
      <el-checkbox v-model="item.isCheck" @click.prevent.native>{{item[props.label]}}</el-checkbox>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "MultipleSelect",
  inheritAttrs: false,
  model: {
    prop: "initSelectValues",
    event: "change"
  },
  props: {
    initSelectValues: {
      type: Array,
      default: () => []
    },
    // 下拉选项
    options: {
      type: Array,
      default: () => []
    },
    // 选项键值对
    props: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value"
        }
      }
    },
    filterable: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: true
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      selectValues: [],
      isSelectAll: false
    }
  },
  watch: {
    // 监听（全选，全不选以及checkbox是否勾选）
    selectValues: {
      handler(arr) {
        this.options.forEach(item => {
          if (arr.includes(item[this.props.value])) {
            item.isCheck = true;
          } else {
            item.isCheck = false;
          }
        });

        if (arr.length === this.options.length) {
          this.isSelectAll = true;
        } else {
          this.isSelectAll = false;
        }
        // 强制更新（checkbox回显)
        this.$forceUpdate();
      }
    },
    initSelectValues(newVal, oldVal){
      this.selectValues = this.initSelectValues;
    }
  },
  created() {
    // 回显
    this.selectValues = this.initSelectValues;
  },
  methods: {
    changeSelect(val) {
      let currentChangSelect = [];
      if (val.includes("全选")) {
        // 说明已经全选了，所以全不选
        if (val.length > this.options.length) {
          this.selectValues = [];
          currentChangSelect = [];
        } else {
          this.selectValues = this.options.map(item => item[this.props.value]);
          currentChangSelect = this.options;
        }
      }else{
        for(let valIndex = 0; valIndex < val.length; valIndex++){
          for(let optIndex = 0; optIndex < this.options.length; optIndex++){
            if (val[valIndex] == this.options[optIndex][this.props.value]){
              currentChangSelect.push(this.options[optIndex]);
              break;
            }
          }
        }
      }
      this.$emit("change", this.selectValues);
      this.$emit("all-change", currentChangSelect);
    }
  }
}
</script>
