<script setup lang="ts">
import { getResult } from '@/utils'
import { HandleConfigType } from '@/components/ATable/type'

withDefaults(
  defineProps<{
    // 标签文本
    label?: string
    // 宽度
    width?: number | string
    // 最小宽度
    minWidth?: number | string
    // 对齐方式
    align?: 'left' | 'center' | 'right'
    // 表头对齐方式， 若不设置该项，则使用表格的对齐方式
    headerAlign?: 'left' | 'center' | 'right'
    // 列是否固定在左侧或者右侧。 true 表示固定在左侧
    fixed?: boolean | 'left' | 'right'
    // 操作按钮配置
    handleConfig?: HandleConfigType[]
  }>(),
  {
    label: '操作',
    fixed: 'right'
  }
)

// 获取操作按钮显示icon
function getIcon(config: HandleConfigType) {
  if (config.common) {
    switch (config.common) {
      case 'add':
        return 'documentAdd'
      case 'update':
        return 'edit'
      case 'delete':
        return 'delete'
      case 'detail':
        return 'document'
    }
  }
  return config.icon
}

// 获取操作按钮显示文本
function getText(config: HandleConfigType) {
  if (config.common) {
    switch (config.common) {
      case 'add':
        return '新增'
      case 'update':
        return '编辑'
      case 'delete':
        return '删除'
      case 'detail':
        return '详情'
    }
  }
  return config.text
}
</script>

<template>
  <el-table-column
    :align="align"
    :fixed="fixed"
    :header-align="headerAlign"
    :label="label"
    :min-width="minWidth"
    :width="width"
  >
    <template #default="scope">
      <template v-for="(item, index) in handleConfig">
        <el-button
          v-if="getResult(item.if ?? true, scope.row, scope.$index)"
          v-permissions="item.permissions"
          :key="index"
          :disabled="getResult(item.disabled ?? false)"
          link
          type="primary"
          @click="() => item.click?.(scope.row, scope.$index)"
        >
          {{ getText(item) }}
        </el-button>
      </template>
    </template>
  </el-table-column>
</template>
