<template>
  <el-select
    class="xd-select__best"
    :size="size"
    :disabled="disabled"
    @input="handleChange"
    v-model="selectValue"
    :placeholder="placeholder"
    clearable
  >
    <el-option
      :key="item.value"
      v-for="item in list"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
  /**
   * @description Switch 状态选择一插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/select
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Number|String|Boolean} defaultValue 已经选中数据 （选填）  默认：''   defaultValue其值:1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2]
   * @property {String}  type 状态类型 （必选） 默认：status  其值: best,status,check,associate,yes,open
   * @property {String}  placeholder 占位符 （选填） 默认：--请选择--
   * @property {Boolean} isAll 是否显示全选选项 （选填） 默认：false
   * @property {Number|String} typeValue 返回值类型 值： 1=>（Y,N） 2=> [true|false]  3=>[1,0]  4=>[1, 2] 默认:1
   * @property {Boolean} disabled 是否禁用 （必选） 默认：false
   *
   * @event {Function} change 选中改变事件 参数：(value)
   */

  import {
    allOption,
    isBestList,
    isCheckList,
    isAssociateList,
    statusList,
    isYesList,
    isOpenStatusList
  } from "@/components/constant";
  import emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: "XdSelectStatus",
    props: {
      defaultValue:{
        type: Number | String | Boolean,
        default: '',
      },
      value:{
        type: Number | String | Boolean,
      },

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

      type: {
        type: String,
        default: 'status'
      },

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

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

      /**
       * @description 返回值的类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
       */
      typeValue: {
        type: Number | String,
        default: 1,
      },

      disabled: {
        type: Boolean,
        default: false,
      },
    },
    mixins:[
      emitter
    ],
    data() {
      return {
        list: [],
        selectValue: '',
        uiValue: '',
      }
    },

    created() {
      this.init()
    },
    methods: {
      init(){
        this.list = this.getList();
        if (this.$xdHelper.checkVarType(this.defaultValue) === 'string') this.uiValue = this.defaultValue.trim();
        else this.uiValue = this.defaultValue;
        this.setValue(this.uiValue);
        this.handleChange()
      },

      /**
       * @description 获取状态类型列表
       */
      getList(){
        let map = {
          status: statusList,
          best: isBestList,
          associate: isAssociateList,
          yes : isYesList,
          open : isOpenStatusList,
          check: isCheckList,
        };
        let list = map[this.type];
        if(!list) list = map['status'];
        return this.isAll ? [allOption].concat(list) : list;
      },

      /**
       * @description 设置默认选中值
       */
      setValue(val) {
        //选中值为all不处理
        if (val === 'all') {
          this.selectValue = val;
          return;
        }

        //字符串处理
        if (this.$xdHelper.checkVarType(val) === 'string') {
          if (val === 'Y' || val === 'N' || val === '') {
            this.selectValue = val;
          } else {
            this.selectValue = '';
            throw new Error(`选择值格式：Y或者N,您传入的选择值：${this.selectValue}`)
          }
        }

        //布尔值处理
        if (this.$xdHelper.checkVarType(val) === 'boolean') {
          this.selectValue = val ? 'Y' : 'N';
        }

        //数字类型处理
        if (this.$xdHelper.checkVarType(val) === 'number') {
          if (val === 1 || val === 0 || val === 2) {
            this.selectValue = val === 1 ? 'Y' : 'N';
          } else {
            this.selectValue = '';
            throw new Error(`选择值格式：0或者1,您传入的选择值：${this.selectValue}`)
          }
        }
      },

      /***
       * @description 返回值的类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=> [1,2]
       * @type number|string
       */
      getData() {
        if (this.selectValue === 'all') {
          return this.selectValue;
        }

        let typeValue = this.typeValue;
        if (this.$xdHelper.checkVarType(this.typeValue) === 'string') {
          typeValue = Number(typeValue);
        }

        //字符串处理
        if (typeValue === 1) {
          return this.selectValue;
        }

        //布尔值处理
        if (typeValue === 2) {
          return this.selectValue === 'Y';
        }

        //数字类型处理
        if (typeValue === 3) {
          if (this.selectValue === 'Y') return 1;
          else if(this.selectValue === '') return null;
          else return 0;
        }

        //数字类型处理
        if (typeValue === 4) {
          if (this.selectValue === 'Y') return 1;
          else return 2;
        }
      },

      /**
       * @description 更新事件
       */
      handleChange() {
        this.$emit('input', this.getData());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.getData()]);
          this.dispatch('ElFormItem', 'el.form.blur', [this.getData()])
        }
      },
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 768px) {
    .xd-select__best {
      width: 100%;
    }
  }
</style>
