<template>
  <div class="xd-table-witch">
    <el-switch
      :active-text="activeText"
      :inactive-text="inactiveText"
      v-model="value"
      @change="handleChange"
    >
    </el-switch>
  </div>
</template>

<script>
  export default {
    name: "XdTableWitch",
    props:{
      /**
       * @description
       * 1、boolean true，false
       * 2、number  1，0
       * 3、number  1，2
       * 4、string  'Y'，'N'
       */
      defaultValue: {
        type: Number|String|Boolean, //1=true,2=false
      },

      inactiveText: {
        type: String, //1=true,2=false
        default: ''
      },

      activeText: {
        type: String, //1=true,2=false
        default: ''
      },

      /**
       * @description
       * 1、boolean true，false
       * 2、number  1，0
       * 3、number  1，2
       * 4、string  'Y'，'N'
       */
      isBackType: {
        type: Number,
        default: 1
      }
    },
    data(){
      return {
        valueOld: false, //老值
        value: false, //变化的值
      }
    },
    created(){
      this.mapToValue();
    },
    methods:{
      mapToValue(){
        //boolean 1
        if(this.isBackType === 1) {
          if(this.$xdHelper.checkVarType(this.defaultValue) === 'boolean'){
            this.value = this.defaultValue;
            this.valueOld = this.defaultValue;
          }
        }

        //number 2,3
        if(this.isBackType === 2 || this.isBackType === 3) {
          if(this.$xdHelper.checkVarType(this.defaultValue) === 'number'){
            if(this.isBackType === 2 && (this.defaultValue === 0 || this.defaultValue === 1)) {
              this.value = this.defaultValue === 1;
              this.valueOld = this.defaultValue === 1;
            }
            if (this.isBackType === 3 && (this.defaultValue === 1 || this.defaultValue === 2)) {
              this.value = this.defaultValue === 1;
              this.valueOld = this.defaultValue === 1;
            }
          }
        }

        //string 4
        if (this.isBackType === 4) {
          if (this.$xdHelper.checkVarType(this.defaultValue) === 'string') {
            this.value = this.defaultValue === 'Y';
            this.valueOld = this.defaultValue === 'Y';
          }
        }
      },

      getValueToBack(){
        if (this.isBackType === 1) return this.value;
        if (this.isBackType === 2) return this.value ? 1: 0;
        if (this.isBackType === 3) return this.value ? 1 : 2;
        if (this.isBackType === 4) return this.value ? 'Y' : 'N';
      },

      handleChange(){
        console.log(this.value);
        this.$emit('change', {
          value: this.getValueToBack(),
          cb: (status) => {
            console.log(status); //1:success  2:fail
            if (status === 2) this.value = this.valueOld;
            if (status === 1) this.valueOld = this.value;
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .xd-table-witch {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
