<template>
  <div class="xd-radio-yes">
    <el-radio-group
      @input="handleChange"
      v-model.number="selectValue"
    >
      <el-radio
        :disabled="disabled"
        v-for="(item,index) in radioList"
        :key="index"
        :label="item.value"
      >
        <span v-html="item.label"></span>
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  import {
    isBestList,
    isCheckList,
    isAssociateList,
    statusList,
    isYesList,
    isOpenStatusList
  } from "@/components/constant";

  /**
   * @description 单选-二选一插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/radio
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Number|String|Boolean} defaultValue 已经选中数据 （选填） 默认：''  其值:1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2]
   * @property {String}  type 状态类型 （必选） 默认：status  其值: best,status,check,associate,yes,open
   * @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: "XdRadioStatus",
    props: {
      defaultValue:{
        type: Number | String | Boolean,
        default: '',
      },

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

      type: {
        type: String,
        default: 'status' //其值: best,status,check,associate,yes,open
      },

      /***
       * @description 返回值的类型。 返回值： 1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2]
       */
      typeValue: {
        type: Number | String,
        default: 1,
      }
    },
    data() {
      return {
        radioList: [],
        selectValue: '',
        uiValue: '',
      }
    },

    created() {
      this.radioList = 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()
    },
    methods: {
      /**
       * @description 获取状态类型列表
       */
      getList() {
        let map = {
          status: statusList,
          best: isBestList,
          associate: isAssociateList,
          yes: isYesList,
          open: isOpenStatusList,
          check: isCheckList,
        };
        return map[this.type];
      },

      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(this.typeValue);
        }

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

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

        //数字类型3 = [1,0]
        if(typeValue === 3){
          return this.selectValue === 'Y' ? 1 : 0;
        }

        //数字类型4 = [1,2]
        if (typeValue === 4) {
          return this.selectValue === 'Y' ? 1 : 2;
        }
      },

      handleChange() {
        this.$emit('input', this.getData());
        this.$emit('change', this.getData())
      },
    }
  }
</script>

<style scoped>

</style>
