<template>
  <div class="xd-select">
    <template v-if="isRemote">
      <el-select
        :size="size"
        class="xd-select__list"
        @input="handleChange"
        v-model="selectValue"
        :placeholder="placeholder"
        :filterable="filterable"
        :filter-method="handleFilter"
        remote
        :clearable="clearable"
        :multiple="multiple"
        :collapse-tags="collapseTags"
        :style="width?'width:'+ width: ''"
        :disabled="disabled"
        :loading="loading"
        @remove-tag="removeTag"
      >
        <el-option
          :key="item.value"
          v-for="item in dataList"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled || false"
          :class="{'xd-notice-li':item.notice}"
        >
          <template v-if="item.notice">
            <div class="xd-notice-label">{{item.label}}</div>
            <div class="xd-notice-notice" v-html="item.notice"></div>
          </template>
        </el-option>
      </el-select>
    </template>
    <template v-else>
      <el-select
        :size="size"
        class="xd-select__list"
        @input="handleChange"
        v-model="selectValue"
        :placeholder="placeholder"
        :clearable="clearable"
        :filterable="filterable"
        :multiple="multiple"
        :collapse-tags="collapseTags"
        :style="width?'width:'+ width: ''"
        :disabled="disabled"
        @clear="handleClear"
      >
        <el-option
          :key="item.value"
          v-for="item in dataList"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled || false"
          :class="{'xd-notice-li':item.notice}"
        >
          <template v-if="item.notice">
            <div class="xd-notice-label">{{item.label}}</div>
            <div class="xd-notice-notice" v-html="item.notice"></div>
          </template>
        </el-option>
      </el-select>
    </template>
  </div>

</template>

<script>
  import {
    allOption
  } from "@/components/constant";

  /**
   * @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: "XdSelectList",
    props: {
      defaultValue: {
        type: Number|String,
        default: '',
      },
      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },
      placeholder: {
        type: String,
        default: '--请选择--'
      },
      width: {
        type: String,
      },
      isRemote:{
        type: Boolean,
        default: false,
      },
      filterable: {
        type: Boolean,
        default: true,
      },
      list:{
        type: Array | null,
        default: null
      },
      isAll: {
        type: Boolean,
        default: false,
      },
      multiple:{
        type: Boolean,
        default: false,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      collapseTags:{
        type: Boolean,
        default: false,
      },
      disabled:{
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        dataList: [],
        selectValue: '',
        loading:false,

        testData: [
          {"label": "万利达集团", "value": 4},
          {"label": "中国联通", "value": 5},
          {"label": "中国移动", "value": 6},
          {"label": "味多美", "value": 7},
        ]
      }
    },
    watch: {
      list(val){
        this.init();
      }

    },

    created() {
      if (!this.isRemote) {
        this.init();
      }

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

      handleFilter(query){
        query = this.$xdHelper.tirm(query);
        if(!query) return [];
        this.loading = true;
        this.$emit('onSearch', {query}, (res)=>{
          this.dataList = res;
          this.loading = false;
        })
      },

      init(){
        let list = [];
        if (this.list === null) list = this.$xdHelper.cloneDeep(this.testData);
        else list = this.$xdHelper.cloneDeep(this.list);
        this.dataList = this.isAll ? [allOption].concat(list) : list;

        //设置默认值
        if(this.multiple) {
          if(this.$xdHelper.checkVarType(this.defaultValue) === 'array' && this.defaultValue.length >0) {
            this.selectValue = this.defaultValue;
          }
          else  {
            this.selectValue = [];
          }
        }
        else{
          if (!this.$xdHelper.isKeyInLists(this.dataList, this.defaultValue, 'value')) {
            this.selectValue = ''
          } else {
            this.selectValue = this.defaultValue;
            if (this.$xdHelper.checkVarType(this.defaultValue) === 'string') {
              this.selectValue = this.defaultValue.trim();
            }
          }
        }

        this.handleChange();
      },

      handleChange() {
        let select = null;
        if(this.$xdHelper.checkVarType(this.selectValue) === 'array') {
          let temp = [];
          this.selectValue.map((item) => {
            temp.push(this.$xdHelper.isKeyInLists(this.dataList, item, 'value'))
          });
          select = temp;
        }
        else  {
          select = this.$xdHelper.isKeyInLists(this.dataList, this.selectValue, 'value');
        }

        this.update(select);
      },

      update(select){
        this.$emit('input', this.selectValue);
        this.$emit('change', {
          value: this.selectValue,
          select: select
        });

      },

      /**抛出移除某项**/
      removeTag(e){
        this.$emit('remove', e);
        this.update();
      },
    }
  }
</script>

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

  .xd-notice {
    &-li {
      height: auto!important;
      padding:4px 20px;

      &.selected::after{
        top:50%;
        transform: translateY(-50%);
      }
    }
    &-label {
      font-size: 14px;
      line-height: 16px;
      padding-bottom: 3px;
    }

    &-notice {
      color: #bbb;
      font-size: 12px;
      line-height: 16px;
      font-weight: normal;
    }
  }

  @media screen and (max-width: 768px) {
    xd-select {
      width: 100%;

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

</style>


