<template>
  <div>
    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
        <!-- <a-button type="primary" @click="handleAdd">新增</a-button> -->
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'shpPath'">
          <div @click="copyToClipboard(record.shpPath)">{{record.shpPath}}</div>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '查看',
                onClick: () => {
                  handleView(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <a-modal
      class="categories-modal"
      v-model:open="openModal"
      :title="modalData.title"
      :afterClose="clearModal"
    >
      <UseModal
        ref="modalForm"
        :modalData="modalData"
        @closeModal="closeModal"
        @submit="submit"
      />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  // 子组件
  import UseModal from './modal/index.vue';
  import { Modal, message } from 'ant-design-vue';
  // ts
  import { searchFormSchema, achievementColumns } from './index.data';
  // api
  import { loadTableListData } from '@/api/achievement/index';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const modalForm = ref();
  let openModal = ref(false);
  const modalData = reactive({
    title: '',
    data: {},
    type: '',
  });
 
  // 表格
  const searchInfo = reactive<Recordable>({});
  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
    api: loadTableListData,
    columns: achievementColumns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    // 序号列
    showIndexColumn: true,
    striped: false,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
    handleSearchInfoFn(info) {
      return info;
    },
  });
  const closeModal = () => {
    openModal.value = false;
  };
  const clearModal = () => {
    modalForm.value.clearModalData();
  };
  // 新增-打开窗口
  function handleAdd() {
    modalData.title = "新增"
    openModal.value = true;
  }
  // 查看-打开窗口
  function handleView(record) {
    modalData.data = record;
    modalData.title = "详情"
    openModal.value = true;
  }
  // 编辑-打开窗口
  function handleEdit(record) {
    modalData.data = record;
    modalData.title = "编辑";
    openModal.value = true;
  }

  // 新增、编辑、删除-提交后刷新
  function submit() {
    clearSelectedRowKeys();
    reload();
  }
  // 复制到剪贴板
  const copyToClipboard = async (record) => {
    try {
      await navigator.clipboard.writeText(record);
      createMessage.success('文本已复制到剪贴板');
    } catch (err) {
      createMessage.error('无法复制文本');
    }
  };
</script>
<style lang="scss">
.categories-modal {
  .ant-modal-footer > button {
    display: none;
  }
  .ant-modal-footer {
    margin-top: 0px;
    border-top: 0px;
  }
}
</style>
