<template>
  <div class="xd-switch-Box">
    <el-switch
      :disabled="disabled"
      v-if="showTips"
      @input="handleChange"
      v-model="selectValue"
      :active-color="color[0]"
      :inactive-color="color[1]"
      :active-text="list[1]"
      :inactive-text="list[0]">
    </el-switch>
    <el-switch
      v-else
      :disabled="disabled"
      @input="handleChange"
      v-model="selectValue"
      :active-color="color[0]"
      :inactive-color="color[1]"
    >
    </el-switch>
  </div>
</template>

<script>

  /**
   * @description Switch 开关一插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/switch
   * 文档：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 {Boolean} showTips 是否显示左右描述文案 （选填） 默认：false
   * @property {Array} color 左右颜色 （选填） 默认：['','']
   * @property {Array} list 左右描述文案 （选填） 默认：['否','是']
   * @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)
   */

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

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

      color: {
        type: Array,
        default() {
          return ['','']
        }
      },

      list: {
        type: Array,
        default(){
          return ['否','是'];
        },
      },

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

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

    created() {
      this.switchList = this.list;
      if (this.$xdHelper.checkVarType(this.defaultValue) === 'string') this.uiValue = this.defaultValue.trim();
      else this.uiValue = this.defaultValue;
      this.setValue(this.uiValue);
      this.$emit('input', this.getData());
    },
    methods: {
      /**
       * @description 设置值
       * @param val 默认值
       */
      setValue(val){
        //字符串处理
        if(this.$xdHelper.checkVarType(val) === 'string'){
          if(val === 'Y' || val === 'N' || val === '') {
            this.selectValue = val === 'Y';
          }
          else {
            this.selectValue = false;
            throw new Error(`选择值格式：Y或者N,您传入的选择值：${this.selectValue}`)
          }
        }

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

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

      /***
       * @description 返回值的类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 34=>[1,2]
       * @type number|string
       */
      getData(){
        let typeValue = this.typeValue;
        if (this.$xdHelper.checkVarType(this.typeValue) === 'string') {
          typeValue = Number(typeValue);
        }

        console.log(typeValue);

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

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

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

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

      /**
       * @description 更新事件
       */
      handleChange() {
        this.$emit('input', this.getData());
        this.$emit('change', this.getData())
      },
    }
  }
</script>

