<script lang="ts" setup>
/**
 * 平台配送仓库列表
 * 新建/编辑含证照与建仓开号；银行卡报备对齐诊所，走独立弹窗
 */
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { deleteDeliveryWarehouse } from './api';
import BankCardReportModal from './components/bank-card-report-modal.vue';
import BankCardStatusModal from './components/bank-card-status-modal.vue';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

const hasTopTableDropDownActions = ref(false);

const reportStatusColorMap: Record<number, string> = {
  0: 'default',
  1: 'orange',
  2: 'green',
  3: 'red',
  4: 'default',
};

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const [BankCardReportModalComponent, bankCardReportModalApi] = useVbenModal({
  connectedComponent: BankCardReportModal,
});

const [BankCardStatusModalComponent, bankCardStatusModalApi] = useVbenModal({
  connectedComponent: BankCardStatusModal,
});

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

/**
 * 未报备/驳回：打开报备弹窗；待审核/有效：打开状态弹窗
 */
function handleBankCardReportClick(row: any) {
  const status = Number(row.bank_card_report_status ?? 0);
  if (status === 1 || status === 2) {
    bankCardStatusModalApi.setData({
      warehouse_id: row.id,
      warehouse_name: row.name,
      values: row,
      gridApi,
    });
    bankCardStatusModalApi.open();
    return;
  }
  bankCardReportModalApi.setData({
    warehouse_id: row.id,
    warehouse_name: row.name,
    values: row,
    gridApi,
  });
  bankCardReportModalApi.open();
}

function openBankCardStatus(row: any) {
  bankCardStatusModalApi.setData({
    warehouse_id: row.id,
    warehouse_name: row.name,
    values: row,
    gridApi,
  });
  bankCardStatusModalApi.open();
}

const deleteApi = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  deleteDeliveryWarehouse({ ids }).then(() => {
    message.success('删除成功!');
    gridApi.query();
  });
};
</script>
<template>
  <Page auto-content-height title="配送仓库管理">
    <FormModal />
    <BankCardReportModalComponent />
    <BankCardStatusModalComponent />
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, false),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #bank_card_report_status="{ row }">
        <Tag
          :color="
            reportStatusColorMap[Number(row.bank_card_report_status ?? 0)] ||
            'default'
          "
          class="cursor-pointer"
          @click="handleBankCardReportClick(row)"
        >
          {{ row.bank_card_report_status_text || '未报备' }}
        </Tag>
      </template>
      <template #status="{ row }">
        <Tag v-if="row.status === 1" color="green">启用</Tag>
        <Tag v-else color="default">禁用</Tag>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              onClick: showModal.bind(null, row, true),
            },
            {
              label:
                Number(row.bank_card_report_status ?? 0) === 1 ||
                Number(row.bank_card_report_status ?? 0) === 2
                  ? '报备状态'
                  : '银行卡报备',
              type: 'link',
              icon: 'ant-design:credit-card-outlined',
              size: 'small',
              onClick: handleBankCardReportClick.bind(null, row),
            },
            {
              label: '删除',
              type: 'link',
              icon: 'ant-design:delete-outlined',
              size: 'small',
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, row.id),
              },
            },
          ]"
          :drop-down-actions="
            Number(row.bank_card_report_status ?? 0) === 1 ||
            Number(row.bank_card_report_status ?? 0) === 2
              ? [
                  {
                    label: '重新报备',
                    icon: 'ant-design:reload-outlined',
                    onClick: () => {
                      bankCardReportModalApi.setData({
                        warehouse_id: row.id,
                        warehouse_name: row.name,
                        values: row,
                        gridApi,
                      });
                      bankCardReportModalApi.open();
                    },
                  },
                ]
              : [
                  {
                    label: '查看报备',
                    icon: 'ant-design:eye-outlined',
                    onClick: openBankCardStatus.bind(null, row),
                  },
                ]
          "
        />
      </template>
    </Grid>
  </Page>
</template>
