// 多选框组件
<template>
  <a-form :form="formTab" class="formTab">
    <a-form-item class="formItem">
      <p >最多选择{{maxLength}}个自定义信息</p>
      <div class="nowNum">{{nowNum}}/{{maxLength}}</div>
      <a-select
        v-decorator="['chooseList',{ validateTrigger:'change', initialValue: this.selKeysList, rules: [{validator: validateMax}] }]"
        mode="multiple"
        style="width: 100%"
        @change="changeMultipleSelect"
        placeholder="请选择需要展示的列表选项(多选)"
      >
        <a-select-option v-for="item in allKeys" :key="item.key">{{item.keyName}}</a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: 'MutSelect',
  props: {
    maxLength: { // 最多选中数
      type: [Number, String],
      default: 6,
    },
    nowNum: { // 当前数
      type: [Number, String],
      default: 1,
    },
    selKeysList: { //选中的项
      type: Array,
      default(){
        return []
      },
    },
    allKeys: { // 全部项
      type: Array,
      default() {
        return []
      },
    },
    columns: {
      type: Array,
      default() {
        return []
      },
    },
    tblName: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      formTab: this.$form.createForm(this),
    }
  },
  methods: {
    validateMax(rule, value, callback) { // 验证多选个数最大值 
      if (value.length > this.maxLength){
        this.formTab.setFieldsValue({
          'chooseList': this.selKeysList,
        })
        this.$message.error('最多选择'+this.maxLength+'项选项')
        callback('最多选择个'+this.maxLength+'自定义信息')
      } else
      if(value.length<1){
        this.formTab.setFieldsValue({
          'chooseList': this.selKeysList,
        })
        this.$message.error('最少选择一项选项')
        callback('最少选择1个自定义信息')
      } else {
        newArr = value
        callback()
      }
    },
    changeMultipleSelect(value) { // 多选框选中项发生变化,表格展示的列跟着变化
      // 不超过最大值,不少于1 则表格展示列跟着变化
      if (value.length < this.maxLength+1 && value.length > 0) {
        this.$emit('selKeysNew', value)
        this.changeColumnsList(value)
      }
    },
    changeColumnsList(value){ // 表格展示的列
      const arr = []
      this.columns.forEach(col => { // 判断在全部字段中  是否有当前字段(有些自定义可能会被删除,就不再显示了)
        if (value.indexOf(col.key) !== -1) {
          arr.push(col)
        }
      })
      arr.push({ // 添加操作的列
        title: '操作',
        dataIndex: 'action',
        width: 160,
        scopedSlots: {
          customRender: 'action'
        }
      })
      this.$emit('changeColumnsList', arr)
    },
  }

}
</script>

<style scoped>
  .formTab{
    padding: 10px;
  }
  .formItem {
    margin-bottom: 1rem;
  }
  .formItem p{
    text-align:left;
    margin-bottom:-1rem;
  }
   .nowNum{
    position: absolute;
    width: 15px;
    top: 31px;
    right: 13px;
    z-index: 9;
    color: red;
  }
</style>
