<template>
  <div class="receive-info">
    <div class="page-action">
      <t-space size="small">
        <t-button
          v-if="perm.BUTTON_Add"
          theme="primary"
          @click="handleEdit(null)"
        >
          <template #icon><svg-icon name="add-circle" color="#fff" /></template>
          新增客户收件地址
        </t-button>
      </t-space>
    </div>
    <SearchForm :fields="fields" :params="params" :search="mixinSearch">
      <template #name>
        <select-url-user
          v-model="params.name"
          valueKey="name"
          labelKey="name"
          url="/api/sys/custom/receiver/list"
          :key="customSelectKey"
        ></select-url-user>
      </template>
    </SearchForm>
    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        v-loading="tableLoading"
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
          current: pagination.pageNumber,
        }"
      >
        <template #type="{ col, row }">
          {{ CUSTOMER_TYPE[row[col.colKey]] }}
        </template>
        <template #operate="{ row }">
          <div class="table-operations" @click.stop>
            <t-link
              v-if="perm.LINK_Update"
              theme="primary"
              hover="color"
              @click="handleEdit(row)"
            >
              修改
            </t-link>

            <t-link
              v-if="perm.LINK_Update"
              theme="primary"
              hover="color"
              @click="handleDelete(row)"
            >
              删除
            </t-link>
          </div>
        </template>
      </t-table>
    </div>

    <AddDialog
      v-model:visible="showAddDialog"
      :curRow="curRow"
      @success="addSuccessHandle"
    ></AddDialog>
  </div>
</template>
<script name="ReceiveInfo" setup>
import { ref, reactive } from 'vue';
import { DialogPlugin } from 'tdesign-vue-next';
import usePermission from '@/hooks/usePermission';
import useFetchTable from '@/hooks/useFetchTable';
import { dictToOptionList } from '@/utils/tool';
import { CUSTOMER_TYPE } from '@/config/constants';
import { getReceiveInfoApi, deleteReceiveInfoApi } from '@/api/system';
import AddDialog from './AddDialog.vue';

const customSelectKey = ref(Date.now() + '');
const curRow = ref();
const showAddDialog = ref(false);
const handleEdit = (row) => {
  curRow.value = row;
  showAddDialog.value = true;
};
const handleDelete = (row) => {
  const confirmDia = DialogPlugin({
    header: '系统通知',
    body: `确定删除该条数据吗？`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    theme: 'warning',
    onConfirm: async () => {
      confirmDia.hide();
      const res = await deleteReceiveInfoApi({ id: row.id }).catch(() => {});
      if (!res) return;
      MessagePlugin.success('删除成功');
      fetchData();
    },
  });
};
const addSuccessHandle = () => {
  fetchData();
  customSelectKey.value = Date.now() + '';
};

const { perm } = usePermission();
const params = reactive({
  type: '',
  name: '',
});
const fields = ref([
  {
    prop: 'type',
    label: '业务类型',
    labelWidth: 70,
    type: 'select',
    options: dictToOptionList(CUSTOMER_TYPE),
  },
  {
    prop: 'name',
    label: '客户',
    labelWidth: 70,
  },
  {
    type: 'buttons',
    colSpan: 2,
    labelWidth: 0,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);

const columns = [
  { colKey: 'type', title: '用户类型', width: 130 },
  { colKey: 'name', title: '客户名称' },
  { colKey: 'unit', title: '具体单位' },
  { colKey: 'consignee', title: '收件人姓名', width: 130 },
  { colKey: 'consigneePhone', title: '收件人电话', width: 130 },
  { colKey: 'consigneeAddress', title: '收件地址' },
  {
    title: '管理',
    colKey: 'operate',
    fixed: 'right',
    width: 160,
  },
];

const {
  pagination,
  tableData,
  fetchData,
  search,
  onChange,
  loading: tableLoading,
} = useFetchTable(getReceiveInfoApi, {
  params: params,
});
</script>
<style lang="less" scoped></style>
