<template>
  <PageWrapper dense>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          @click="
            downloadExcel(areaExport, '行政区域信息;数据', getForm().getFieldsValue())
          "
          v-auth="'system:area:export'"
          >导出</a-button
        >
        <a-button
          type="primary"
          danger
          @click="multipleRemove(areaRemove)"
          :disabled="!selected"
          v-auth="'system:area:remove'"
          >删除</a-button
        >
        <a-button type="primary" @click="handleAdd" v-auth="'system:area:add'"
          >新增</a-button
        >
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '修改',
                icon: IconEnum.EDIT,
                type: 'primary',
                ghost: true,
                auth: 'system:area:edit',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                icon: IconEnum.DELETE,
                type: 'primary',
                danger: true,
                ghost: true,
                auth: 'system:area:remove',
                popConfirm: {
                  placement: 'left',
                  title: '是否删除行政区域信息;[' + record.id + ']?',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <AreaModal @register="registerModal" @reload="reload" />
  </PageWrapper>
</template>

<script setup lang="ts">
import { PageWrapper } from "@/components/Page";
import { BasicTable, useTable, TableAction } from "@/components/Table";
import { areaList, areaExport, areaRemove } from "@/api/basicInfo/areaCode";
import { downloadExcel } from "@/utils/file/download";
import { useModal } from "@/components/Modal";
import AreaModal from "./AreaModal.vue";
import { formSchemas, columns } from "./area.data";
import { IconEnum } from "@/enums/appEnum";

defineOptions({ name: "Area" });

const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({
  rowSelection: {
    type: "checkbox",
  },
  title: "行政区域信息;列表",
  api: areaList,
  showIndexColumn: false,
  rowKey: "id",
  useSearchForm: true,
  formConfig: {
    schemas: formSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 6,
    },
  },
  columns: columns,
  actionColumn: {
    width: 200,
    title: "操作",
    key: "action",
    fixed: "right",
  },
});

const [registerModal, { openModal }] = useModal();

function handleEdit(record: Recordable) {
  openModal(true, { record, update: true });
}

function handleAdd() {
  openModal(true, { update: false });
}

async function handleDelete(record: Recordable) {
  await areaRemove([record.id]);
  await reload();
}
</script>

<style scoped></style>
