<template>
  <el-table 
    ref="tableRef" 
    row-key="id" 
    :data="props.tableData" 
    :border="true"
    @sort-change="sortChange"
  >
    <el-table-column
      v-for="(item, index) in props.tableColumns" 
      :key="index"
      :label="item.title"
      :prop="item.prop"
      :sortable="item.sortable || 'custom'"
      :fixed="item.fixed"
      :width="item.width || props.columnWidth"
      :align="item.align || props.columnAlign"
      :header-align="item.headerAlign || props.columnHeaderAlign"
    >
      <template #default="scope">
        <!-- 时间格式 -->
        <span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
        <!-- 标签格式 -->
        <el-tag
          v-if="item.type == 'tagFilter'"
          :type="formatTableTagFilter('type',scope.row,item)"
        >
          {{ formatTableTagFilter('label',scope.row,item) }}
        </el-tag>
        <!-- 正常文本 -->
        <span v-else> {{ scope.row[item.prop] }} </span>
      </template>
    </el-table-column>
  </el-table>
</template>
  
<script setup>
  defineOptions({ name: 'elTable' })
  import { reactive, ref, onMounted } from 'vue'
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import { formatTimeStrToStr } from "@/utils/formatTime";
  
  const state = reactive({})

  const props = defineProps({
    // table数据
    tableData: {
      type: Object,
      default: []
    },
    // table表头
    tableColumns: {
      type: Object,
      default: []
    },
    // 表头宽度
    columnWidth:{
      type: Number,
      default: null
    },
    // 表头对齐
    columnHeaderAlign:{
      type: String,
      default: 'center'
    },
    // 表内容对齐
    columnAlign:{
      type: String,
      default: 'center'
    },
  })

  // 格式化时间
  function formatTableDate(time) {
    let _time = '-'
    if (time) { _time = formatTimeStrToStr(time) }
    return _time
  }
  
  // 格式化TagFilter
  function formatTableTagFilter(type,row,item){
    let _op = item.options.filter(op=>op.value == row[item.prop])
    if(_op && _op.length > 0){ return _op[0][type] }
  }

  const emits = defineEmits(['sortChange'])
  //排序
  function sortChange(data) {
    emits('sortChange',data)
  }
  
  onMounted(() => {})

</script>
  
<style></style>
  