<template>
  <div>
    <!-- 表格区域 -->
    <BasicTable 
      @register="registerTable" 
      :rowSelection="rowSelection"
      :title="tableTitle"
    >
      <!-- 表格标题插槽 -->
      <template #tableTitle>
        <div class="table-title-actions">
          <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">
            添加步骤
          </a-button>
          
          <!-- 批量操作下拉菜单 -->
          <a-dropdown v-if="hasSelectedRows" class="batch-actions-dropdown">
            <template #overlay>
              <a-menu>
                <a-menu-item key="delete" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined" />
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>
              批量操作
              <Icon icon="mdi:chevron-down" />
            </a-button>
          </a-dropdown>
        </div>
      </template>
      
      <!-- 操作栏插槽 -->
      <template #action="{ record }">
        <TableAction 
          :actions="getTableAction(record)" 
          :dropDownActions="getDropDownAction(record)" 
        />
      </template>
    </BasicTable>
    
    <!-- 表单模态框 -->
    <BcsHandleMethodModal ref="modalRef" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from './BcsHandleMethod.data';
import { list, deleteOne, batchDelete } from './BcsHandleMethod.api';
import BcsHandleMethodModal from './components/BcsHandleMethodModal.vue';

// Props 定义
interface Props {
  eventId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  eventId: '',
});

// 响应式数据
const queryParam = ref<Recordable>({});
const modalRef = ref<InstanceType<typeof BcsHandleMethodModal>>();

// 计算属性
const hasSelectedRows = computed(() => selectedRowKeys.value.length > 0);
const tableTitle = computed(() => '处置方案步骤');

// 表格配置
const { tableContext } = useListPage({
  tableProps: {
    title: tableTitle.value,
    api: list,
    columns,
    canResize: false,
    useSearchForm: false,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
    immediate: true,
    beforeFetch: (params) => {
      if (props.eventId) {
        queryParam.value.eventId = props.eventId;
      }
      return Object.assign(params, queryParam.value);
    },
  },
});

const [
  registerTable, 
  { reload }, 
  { rowSelection, selectedRowKeys }
] = tableContext;

/**
 * 新增处置步骤
 */
function handleAdd() {
  if (!modalRef.value) return;
  
  modalRef.value.disableSubmit = false;
  modalRef.value.add(props.eventId);
}

/**
 * 编辑处置步骤
 */
function handleEdit(record: Recordable) {
  if (!modalRef.value) return;
  
  modalRef.value.disableSubmit = false;
  modalRef.value.edit(record);
}

/**
 * 查看处置步骤详情
 */
function handleDetail(record: Recordable) {
  if (!modalRef.value) return;
  
  modalRef.value.disableSubmit = true;
  modalRef.value.edit(record);
}

/**
 * 删除处置步骤
 */
async function handleDelete(record: Recordable) {
  await deleteOne({ id: record.id }, handleSuccess);
}

/**
 * 批量删除处置步骤
 */
async function batchHandleDelete() {
  if (!hasSelectedRows.value) return;
  await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}

/**
 * 操作成功回调
 */
function handleSuccess() {
  selectedRowKeys.value = [];
  reload();
}

/**
 * 获取表格操作项
 */
function getTableAction(record: Recordable) {
  return [
    {
      label: '编辑',
      onClick: () => handleEdit(record),
    },
  ];
}

/**
 * 获取下拉操作项
 */
function getDropDownAction(record: Recordable) {
  return [
    {
      label: '详情',
      onClick: () => handleDetail(record),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除？',
        confirm: () => handleDelete(record),
      },
    },
  ];
}

/**
 * 重置查询
 */
function searchReset(eid: string) {
  queryParam.value = {};
  selectedRowKeys.value = [];
  queryParam.value.eventId = eid;
  reload();
}

// 暴露方法给父组件
defineExpose({
  reload,
  searchReset,
  handleAdd,
});
</script>

<style lang="less" scoped>
.table-title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .batch-actions-dropdown {
    margin-left: auto;
  }
}

// 响应式适配
@media (max-width: 768px) {
  .table-title-actions {
    flex-direction: column;
    align-items: flex-start;
    
    .batch-actions-dropdown {
      margin-left: 0;
      margin-top: 8px;
    }
  }
}
</style>