<template>
  <div class="xd-table-status" v-if="uiStatus !== null">
    <el-button
      v-if="isClick"
      style="opacity: .8"
      :type="uiStatus?'primary': 'danger'"
      size="mini"
      @click="handleClick"
      plain
    >{{uiMessage}}</el-button>
    <el-tag
      v-else
      style="opacity: .8"
      :type="uiStatus?'success': 'danger'"
      :size="size"
    >{{uiMessage}}</el-tag>
  </div>
</template>

<script>
  export default {
    name: "XdTableStatus",
    props: {
      message: {
        type: Array,
        default(){
          return ['正常', '禁用']
        }
      },
      status: {
        type: Boolean | Number | String,
        default: '',
      },
      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },
      isClick: {
        type: Boolean,
        default: false,
      }
    },
    data(){
      return {
        uiStatus: null , // true, false
        uiMessage: '',
      }
    },
    created() {
      if(this.$xdHelper.checkVarType(this.status) === 'boolean') {
        this.uiStatus = this.status
      }

      if (this.$xdHelper.checkVarType(this.status) === 'number') {
        let status = '';
        if(this.status === 1) status = true;
        if (this.status === 0 || this.status === 2) status = false;
        this.uiStatus = status
      }

      if (this.$xdHelper.checkVarType(this.status) === 'string') {
        let status = '';
        if (this.status === 'Y') status = true;
        if (this.status === 'N') status = false;
        this.uiStatus = status;
      }

      if(this.uiStatus) this.uiMessage = this.message[0];
      else this.uiMessage = this.message[1];
    },
    methods:{
      handleClick(){
        this.$emit('click',this.status)
      }
    }
  }
</script>

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

</style>
