<template>
  <el-table-column
    :prop="column.prop"
    :label="column.label"
    :align="column.align || 'center'"
    :width="column.width"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :sortable="column.sortable"
    :formatter="column.formatter ? dateFormatter : null"
    show-overflow-tooltip
  >
    <!-- 自定義列模板 針對特殊列通過插槽進行特殊處理 -->
    <template #default="scope" v-if="column.slot">
      <slot name="column-cell" :column="column" :row="scope.row" :index="scope.$index"></slot>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'

const props = defineProps({
  column: {
    type: Object,
    required: true
  }
})
</script>

<CustomizeTableColumns v-for="col in dynamicColumns" :key="col.prop" :column="col">
  <template #column-cell="{ column, row, index }">
    <!-- 自定義列內(nèi)容 -->
    <template v-if="column.prop === 'index'">
      {{ index + (queryParams.pageNo - 1) * queryParams.pageSize + 1 }}
    </template>
    <template v-else-if="column.prop === 'typeName'">
      <span
        style="cursor: pointer; color: #409eff"
        v-if="row.id"
        @click="openForm('preview', row.customerName, row.customerId, row.id)"
      >
        {{ row.typeName }}
      </span>
    </template>
  </template>
</CustomizeTableColumns>

<template>
  <el-dialog
    v-model="showDialog"
    title="表格列配置"
    width="800px"
    append-to-body
    class="column-config-dialog"
  >
    <!-- 對話框內(nèi)容 -->
  </el-dialog>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

const props = defineProps({
  modelValue: Boolean,
  columns: Array,
  defaultColumns: Array
})

const emit = defineEmits(['update:modelValue', 'update:columns'])

// 控制對話框顯示
const showDialog = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 臨時列配置
const tempColumns = ref([])

// 全選控制
const checkAll = computed({
  get: () => tempColumns.value.every(col => col.visible),
  set: (val) => tempColumns.value.forEach(col => col.visible = val)
})

// 保存配置
const saveColumnConfig = () => {
  const newColumns = tempColumns.value.map((col, index) => ({
    ...col,
    order: col.fixed ? col.order : index
  }))
  emit('update:columns', newColumns)
  showDialog.value = false
}
</script>

<template>
  <!-- 表格部分 -->
  <el-table :data="list">
    <CustomizeTableColumns v-for="col in dynamicColumns" :key="col.prop" :column="col">
      <!-- 自定義列模板 -->
    </CustomizeTableColumns>
  </el-table>
  
  <!-- 配置對話框 -->
  <ColumnConfigDialog
    v-model="showColumnConfig"
    :columns="columnOptions"
    :default-columns="defaultColumns"
    @update:columns="handleColumnsUpdate"
  />
</template>

<script setup lang="ts">
// 默認列配置
const defaultColumns = ref([])

// 當前列配置
const columnOptions = ref([
  {
    prop: 'index',
    label: '序號',
    width: 80,
    fixed: 'left',
    align: 'center',
    slot: true,
    visible: true,
    order: 0
  },
  { 
     prop: 'customerName', 
     label: '客戶名稱', 
     width: 150, 
     align: 'center', 
     visible: true, 
     order: 1 
  },
  {
    prop: 'typeName',
    label: '任務名稱',
    align: 'center',
    slot: true,
    visible: true,
    sortable: false,
    showAdvanced: true,
    minWidth: 80,
    order: 2
  },
  {
    prop: 'publishUserName',
    label: '發(fā)布人',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: true,
    order: 3
  },
  {
    prop: 'receiveUserName',
    label: '接收人',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 4
  },
  {
    prop: 'missionStatus',
    label: '狀態(tài)',
    width: 150,
    align: 'center',
    slot: true,
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 5
  },
  {
    prop: 'missionCancelReasonName',
    label: '作廢原因',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 6
  },
  {
    prop: 'missionRejectReasonName',
    label: '拒絕原因',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 7
  },
  {
    prop: 'missionRejectReasonDesc',
    label: '拒絕描述',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 8
  },
  {
    prop: 'publishTime',
    label: '發(fā)布時間',
    minWidth: 180,
    align: 'center',
    sortable: false,
    showAdvanced: false,
    formatter: true,
    visible: true,
    order: 9
  },
  { 
      prop: 'operation', 
      label: '操作', 
      visible: true, 
      minWidth: 140, 
      fixed: 'right', 
      slot: true 
  }
])

// 動態(tài)列（根據(jù)配置生成的可見列）
const dynamicColumns = computed(() => {
  return columnOptions.value
    .filter(col => col.visible)
    .sort((a, b) => a.order - b.order)
})

// 處理列更新
const handleColumnsUpdate = (newColumns) => {
  columnOptions.value = newColumns
}
</script>

const dynamicColumns = computed(() => {
  return columnOptions.value
    .filter(col => col.visible) // 過濾出可見的列
    .sort((a, b) => a.order - b.order) // 按順序排序
})

interface ColumnConfig {
  prop: string // 字段名
  label: string // 顯示名稱
  width?: number // 列寬
  minWidth?: number // 最小寬度
  align?: 'left' | 'center' | 'right' // 對齊方式
  fixed?: 'left' | 'right' // 固定位置
  sortable?: boolean // 是否可排序
  visible: boolean // 是否顯示
  order: number // 排序序號
  slot?: boolean // 是否使用插槽
  formatter?: boolean // 是否需要格式化
  showAdvanced?: boolean // 是否顯示高級設置
}