<template>
  <span class="table_row_status">
    <span :class="statusNumToName(useStatus)?.themeClass"></span>
    {{ statusNumToName(useStatus)?.title }}
  </span>
</template>

<script>

/*
interface statusMsgItm {
  statusFlag:Number | String,
  title:String,
  themeClass: 'not_included_icon' | 'no_release_icon' 
              | 'normal_icon' | 'abnormal_icon' | 'audit_icon' 
              | 'yes_release_icon' | 'right_icon' | 'ready_close_icon' | 'need_summary_icon'
}
*/

export default {
  name: 'TableRowStatus',
  props: {
    useStatus: {
      type: [String, Number],
      required: true,
      default: null
    },
    statusMsg: {
      type: Array, //类型为  statusMsgItm[]
      required: true,
      // 引用类型 default 必须是函数
      default: () => [] 
    }
  },
  methods: {
    /**
     * 根据状态值查找对应的配置项
     * @param {String|Number} useStatus 
     * @returns {Object}
     */
    statusNumToName(useStatus) {
      if (!this.statusMsg || !this.statusMsg.length) return {};
      const result = this.statusMsg.find(item => item.statusFlag == useStatus);
      if (result) {
        return result;
      }
      // 未找到时返回默认空对象，防止模板渲染报错
      return {
        title: '',
        themeClass: ''
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.table_row_status {
  display: inline-flex;
  align-items: center;
  
  span:first-child {
    display: inline-block;
    margin-right: 4px;
    // 这里可以定义图标的基础样式，例如宽高
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
</style>