<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { label: '年齡', prop: 'age', unit: '歲' },
        { label: '郵箱', prop: 'email' }
      ]"
    />
  </el-table>
</template>

<template>
  <el-table :data="tableData">
    <TableColumnGroup label="基本信息">
      <TableColumnGroup 
        :columns="[
          { label: '姓名', prop: 'name' },
          { label: '年齡', prop: 'age', unit: '歲' }
        ]"
      />
    </TableColumnGroup>
    <TableColumnGroup label="聯(lián)系方式">
      <TableColumnGroup 
        :nestedGroups="[
          {
            label: '電話',
            columns: [
              { label: '手機(jī)', prop: 'phone' },
              { label: '座機(jī)', prop: 'landline' }
            ]
          },
          {
            label: '網(wǎng)絡(luò)',
            columns: [
              { label: '郵箱', prop: 'email' },
              { label: '網(wǎng)址', prop: 'website' }
            ]
          }
        ]"
      />
    </TableColumnGroup>
  </el-table>
</template>

<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { 
          label: '狀態(tài)', 
          prop: 'status',
          customRender: StatusTag,
          customRenderProps: { colors: { active: 'green', inactive: 'gray' } }
        }
      ]"
    />
  </el-table>
</template>
<script setup>
import StatusTag from './StatusTag.vue'
</script>

<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { 
          label: '業(yè)績(jī)', 
          prop: 'performance',
          unit: '元',
          conditionalRender: (row) => row.performance > 0
        }
      ]"
    />
  </el-table>
</template>

<!-- TableColumnGroup.vue -->
<template>
  <el-table-column align="center" :label="label" :type="type" :class-name="className" :fixed="groupFixed"
    :width="groupWidth" :prop="groupProp">
    <!-- 支持嵌套列組 -->
    <template v-if="hasNestedGroups">
      <TableColumnGroup v-for="(nestedGroup, nestedIndex) in nestedGroups" :key="nestedIndex" v-bind="nestedGroup" />
    </template>
    <!-- 普通列 -->
    <template v-else>
      <el-table-column v-for="col in columns" :key="col.prop" :align="col.align || 'center'" :label="col.label"
        :prop="col.prop" :width="col.width" :class-name="col.className || className" :fixed="col.fixed">
        <template #default="scope">
          <span>
            <!-- 支持自定義渲染 -->
            <template v-if="col.customRender">
              <component :is="col.customRender" :row="scope.row" :value="scope.row[col.prop]"
                v-bind="col.customRenderProps" />
            </template>
            <template v-else-if="col.conditionalRender">
              <!-- 條件渲染 -->
              <span v-if="col.conditionalRender(scope.row)">
                {{ formatNumberWithUnit(scope.row[col.prop], col.unit) }}
              </span>
              <span v-else class="hidden-column">-</span>
            </template>
            <template v-else>
              <!-- 數(shù)字類型格式化：千分制+兩位小數(shù) -->
              {{ formatNumberWithUnit(scope.row[col.prop], col.unit) }}
            </template>
          </span>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>
<script setup>
import { computed } from 'vue'
import { formatNumberWithUnit } from '@/utils/validate'
const props = defineProps({
  label: String,
  type: {
    type: String,
    default: '',
  },
  className: String,
  // 普通列配置
  columns: {
    type: Array,
    default: () => [],
  },
  // 嵌套列組配置
  nestedGroups: {
    type: Array,
    default: () => [],
  },
  groupFixed: {
    type: [String, Boolean],
    default: null,
  },
  groupWidth: [String, Number],
  groupProp: String,
  // 樹形表格配置
  treeProps: {
    type: Object,
    default: null,
  },
  rowKey: String,
})
// 判斷是否有嵌套列組
const hasNestedGroups = computed(() => {
  return props.nestedGroups && props.nestedGroups.length > 0
})
</script>
<style lang="scss">
.el-table__row.level-1 {
  background-color: #ffffff !important;
}
.el-table__row.level-2 {
  background-color: #f8f3c3 !important;
}
.el-table__row.level-3 {
  background-color: #fcd787 !important;
}
.el-table__row:hover>td {
  background-color: #e9e9e9 !important;
}
.hidden-column {
  color: #ccc;
  font-style: italic;
}
</style>

  <el-table v-loading="loading" :data="oaBusinessMetricList" border max-height="660" row-key="id"
        scrollbar-always-on :fit="true" resizable @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" fixed="left" />
        <!-- 使用 TableColumnGroup 組件渲染列組 -->
        <TableColumnGroup v-for="group in columnGroups" :key="group.key" v-bind="group" />
        <!-- 操作列 -->
        <el-table-column align="center" class-name="small-padding fixed-width blueInfoHeader" fixed="right" label="操作"
          width="120">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button v-hasPerm="['oa:oaBusinessMetric:edit']" icon="Edit" link type="primary"
                @click="handleUpdate(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

const {
  getColumns,
  getColumnGroups,
} = useOaBusinessMetric();
// 獲取列組配置并生成列組數(shù)據(jù)
const columnGroups = computed(() =>
  getColumnGroups.value.map(group => ({
    ...group,
    columns: getColumns(group.columnKey)
  }))
);