<template>
  <div class="xd-select">
    <el-select
      v-if="dataList !== null"
      :size="size"
      class="xd-select__list"
      @input="update"
      v-model="selectValue"
      :placeholder="placeholder"
      :clearable="clearable"
      :filterable="filterable"
      :multiple="multiple"
      :collapse-tags="collapseTags"
      :disabled="disabled"
      @clear="handleClear"
    >
      <el-option
        :key="item.value"
        v-for="item in dataList"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div v-else class="xd-select-bg"></div>
  </div>
</template>

<script>
  import {
    allOption
  } from "@/components/constant";
  import emitter from 'element-ui/src/mixins/emitter';

  /**
   * @description 自定义下拉选择框 - 插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/select
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Number|String} defaultValue 默认选中值 （选填） 默认：''
   * @property {String} placeholder 占位显示 （选填） 默认：'--请选择--'
   * @property {Array|null} list 列表显示数据 （必选） 默认：null
   * @property {Boolean} isAll 是否显示全选选项 （必选） 默认：false
   * @property {Boolean} multiple 是否可以多选 （必选） 默认：false
   * @property {Boolean} clearable 是否显示清空按钮 （必选） 默认：true
   * @property {Boolean} filterable 是否可以进搜索选择 （必选） 默认：true
   * @property {Boolean} collapseTags 多选时大于2个选项自动折叠显示 （必选） 默认：false
   * @property {Boolean} collapseTags 多选时大于2个选项自动折叠显示 （必选） 默认：false
   * @property {Number | String} typeValue 返回值类型 值： 1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2] 默认:1
   *
   * @event {Function} change 选中改变事件 参数：(value)
   */

  export default {
    name: "XdRemoteSelectList",
    mixins: [emitter],
    props: {
      defaultValue: {
        type: Number|String,
        default: '',
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: String,
        default: '--请选择--'
      },

      filterable: {
        type: Boolean,
        default: true,
      },

      clearable: {
        type: Boolean,
        default: true,
      },

      setting: {
        type: Object,
        default(){
          return {}
        }
      },

      collapseTags:{
        type: Boolean,
        default: false,
      },

      disabled:{
        type: Boolean,
        default: false,
      },

      //自定义方法
      handleCustom: {
        type: Function || null,
        default: null
      },
    },
    data() {
      return {
        multiple: false,
        dataList: null,
        selectValue: '',
        loading:false,
      }
    },

    created() {
      //设置默认值
      if (typeof this.handleCustom !== 'function') {
        throw new Error(`请实现handleCustom自定义方法`);
      }

      if (this.$xdHelper.checkVarType(this.setting['multiple']) === 'boolean') {
        this.multiple = this.setting['multiple'];
        if(this.multiple) this.selectValue = [];
      }
      this.handleCustom({action: 'list', data: {
        params: {},
        cb:(res)=>{
          this.init(res);
        }
      }})
    },



    methods: {
      handleClear(){
        this.$emit('clear');
        this.update();
      },

      init(list){
        this.dataList = this.$xdHelper.cloneDeep(list);

        //多选
        if(this.multiple) {
          if(this.$xdHelper.checkVarType(this.defaultValue) === 'array' && this.defaultValue.length >0) {
            this.selectValue = this.defaultValue.filter(value=>{
              return  this.$xdHelper.isKeyInLists(this.dataList, value, 'value') !== null
            });
          }
        }

        //单选
        else{
          if (this.defaultValue && this.$xdHelper.isKeyInLists(this.dataList, this.defaultValue, 'value') !== null) {
            this.selectValue = this.defaultValue;
          }
        }

        //数据加载完成
        this.loading = true;
        this.$nextTick(()=>{
          this.update(true);
        });

      },

      getAllData() {
        //多选
        if(this.multiple) {
          return this.selectValue.filter(value=>{
            return this.$xdHelper.isKeyInLists(this.dataList, value, 'value') !== null;
          });
        }

        //单选
        else  {
         return this.$xdHelper.isKeyInLists(this.dataList, this.selectValue, 'value');
        }
      },

      checkParams(){
        return this.selectValue;
      },


      /**
       * @description 双向绑定数据处理
       */
      update(first = false) {
        console.log(this.selectValue);
        this.$emit('input', this.checkParams());
        this.$emit('change', {
          value: this.checkParams(),
          select: this.getAllData()
        });
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          if(!first) this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-select {
    width: 100%;
    &__list {
      width: 100%;
    }
  }

  .xd-select-bg {
    background: #fff;
    height: 36px;
    border:1px solid #e5e5e5;
    border-radius: 4px;
    min-width: 198px;
    box-sizing: border-box;
  }
  @media screen and (max-width: 768px) {
    xd-select {
      width: 100%;


      &__list {
        width: 100%!important;
      }
    }
  }

</style>


