<template>
  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
    <a-card :bordered="false" :body-style="{ padding: '16px' }">
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :customRow="customRow"
        tool-class="ele-toolbar-form"
        class="sys-table"
      >
        <template #toolbar>
          <search
            @search="reload"
            :selection="selection"
            @add="openEdit"
            @remove="removeBatch"
          />
          
          <!-- 列设置按钮 -->
          <a-tooltip title="列设置">
            <a-button 
              type="text" 
              @click="showColumnSetting = true"
              :icon="h(SettingOutlined)"
            />
          </a-tooltip>
        </template>
        
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.status === 0" color="green">启用</a-tag>
            <a-tag v-if="record.status === 1" color="red">禁用</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="openEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定要删除此记录吗？"
                @confirm="remove(record)"
              >
                <a class="ele-text-danger">删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </ele-pro-table>
    </a-card>

    <!-- 列设置弹窗 -->
    <a-modal
      v-model:visible="showColumnSetting"
      title="列设置"
      width="400px"
      @ok="applyColumnSettings"
    >
      <div class="column-settings">
        <div class="setting-item" v-for="col in allColumns" :key="col.key">
          <a-checkbox
            v-model:checked="col.visible"
            :disabled="col.required"
          >
            {{ col.title }}
            <a-tag v-if="col.required" size="small" color="blue">必显</a-tag>
          </a-checkbox>
        </div>
      </div>
    </a-modal>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { createVNode, ref, h, computed } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons-vue';
  import type { EleProTable } from 'ele-admin-pro';
  import { toDateString } from 'ele-admin-pro';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';

  // 列设置相关
  const showColumnSetting = ref(false);
  
  // 所有列的配置（包含可见性控制）
  const allColumns = ref([
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 90,
      align: 'center',
      visible: true,
      required: true // 必须显示的列
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      align: 'center',
      ellipsis: true,
      visible: true,
      required: true
    },
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 120,
      align: 'center',
      visible: true,
      required: false
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      align: 'center',
      visible: true,
      required: true
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      width: 80,
      align: 'center',
      visible: true,
      required: false
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      key: 'createBy',
      width: 120,
      align: 'center',
      visible: false, // 默认隐藏
      required: false
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 120,
      align: 'center',
      sorter: true,
      ellipsis: true,
      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd'),
      visible: true,
      required: false
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
      key: 'updateBy',
      width: 120,
      align: 'center',
      visible: false, // 默认隐藏
      required: false
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 120,
      align: 'center',
      sorter: true,
      ellipsis: true,
      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd'),
      visible: false, // 默认隐藏
      required: false
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
      align: 'center',
      ellipsis: true,
      visible: false, // 默认隐藏
      required: false
    },
    {
      title: '操作',
      key: 'action',
      width: 180,
      fixed: 'right',
      align: 'center',
      visible: true,
      required: true
    }
  ]);

  // 根据可见性过滤列
  const columns = computed(() => {
    return allColumns.value
      .filter(col => col.visible)
      .map(col => {
        const { visible, required, ...columnConfig } = col;
        return columnConfig;
      });
  });

  // 应用列设置
  const applyColumnSettings = () => {
    showColumnSetting.value = false;
    message.success('列设置已应用');
  };

  // 其他业务逻辑...
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
  const selection = ref([]);
  
  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
    // 实际的数据源逻辑
    return Promise.resolve({
      list: [],
      total: 0
    });
  };

  const reload = () => {
    tableRef?.value?.reload();
  };

  const openEdit = (record?: any) => {
    // 编辑逻辑
  };

  const remove = (record: any) => {
    // 删除逻辑
  };

  const removeBatch = () => {
    // 批量删除逻辑
  };

  const customRow = (record: any) => {
    return {
      onClick: () => {
        // 行点击事件
      }
    };
  };
</script>

<style lang="less" scoped>
.column-settings {
  .setting-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
