<script setup lang="tsx">
import { NButton, NPopconfirm } from 'naive-ui';
import {
  fetchAddDelivery,
  fetchDeleteDelivery,
  fetchGetDelivery,
  fetchUpdateDelivery
} from '@/service/api/operation/delivery-admin';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';

const columns: NaiveUI.TableColumn<Api.delivery.devList>[] = [
  {
    key: 'dvyName',
    title: '物流公司名称',
    align: 'center'
  },
  {
    key: 'companyHomeUrl',
    title: '公司主页',
    align: 'center',
    render(row) {
      return (
        <a href={row.companyHomeUrl} target="_blank" class={'underline'}>
          {row.companyHomeUrl}
        </a>
      );
    }
  },
  {
    key: 'queryUrl',
    title: '物流查询接口',
    align: 'center'
  },
  {
    key: 'recTime',
    title: '创建时间',
    align: 'center'
  },
  {
    key: 'modifyTime',
    title: '修改时间',
    align: 'center'
  },
  {
    key: 'dvyNo',
    title: '物流公司编号',
    align: 'center'
  }
];

const [registerTable, { refresh, setTableLoading }] = useTable({
  tableConfig: {
    keyField: 'dvyId',
    title: '物流公司列表',
    showAddButton: true,
    showSearch: false
  }
});

async function handleDelete(row: Api.delivery.devList) {
  setTableLoading(true);
  await fetchDeleteDelivery(Number(row.dvyId));
  refresh();
}
const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValue }] = useModalFrom({
  modalConfig: {
    title: '物流公司',
    width: 700,
    isShowHeaderText: true,
    height: 500
  },
  formConfig: {
    schemas: [
      {
        label: '',
        field: 'dvyId',
        component: 'NInput',
        show: false
      },
      {
        field: 'dvyName',
        label: '物流公司',
        component: 'NInput',
        required: true
      },
      {
        field: 'companyHomeUrl',
        label: '公司主页',
        component: 'NInput'
      },
      {
        field: 'dvyNo',
        label: '公司编号',
        component: 'NInput',
        required: true
      },
      {
        field: 'queryUrl',
        label: '物流查询接口',
        component: 'NInput',
        required: true
      }
    ],
    gridProps: {
      cols: '1'
    },
    labelWidth: 120
  }
});
async function handleSubmit() {
  const form = await getFieldsValue();
  if (form.dvyId) {
    await fetchUpdateDelivery(form);
  } else {
    await fetchAddDelivery(form);
  }
  closeModal();
  refresh();
}

async function edit(row: Api.operation.HotSearch) {
  openModal(row);
  setFieldsValue(row);
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchGetDelivery" @register="registerTable" @add="openModal">
      <template #op="{ row }">
        <NButton size="small" ghost type="primary" @click="edit(row)">编辑</NButton>
        <NPopconfirm @positive-click="handleDelete(row)">
          <template #trigger>
            <NButton size="small" type="error" ghost>删除</NButton>
          </template>
          确定删除吗？
        </NPopconfirm>
      </template>
    </ZTable>
    <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
  </LayoutTable>
</template>

<style scoped></style>
