<script lang="ts" setup>
/**
 * 提现审核列表：通过/拒绝 + 详情（与代付手续费互通）
 */
import { ref } from 'vue';

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

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import StatisticsReconciliation from '#/views/finance/reconciliation/components/statistics.vue';
import WithdrawalRelationDetail from '#/views/finance/withdrawal/components/withdrawal-relation-detail.vue';

import WithdrawalAudit from './components/WithdrawalAudit.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

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

const statistics = ref();

const [WithdrawalAuditModal, WithdrawalAuditModalApi] = useVbenModal({
  connectedComponent: WithdrawalAudit,
});

const [RelationDetailModal, relationDetailApi] = useVbenModal({
  connectedComponent: WithdrawalRelationDetail,
});

/**
 * 打开审核弹窗
 * @param id 申请 id
 * @param modalType 0=通过 1=拒绝
 */
const infoModal = (id: number, modalType = 0) => {
  WithdrawalAuditModalApi.setData({
    id,
    modalType,
    gridApi,
  });
  WithdrawalAuditModalApi.open();
};

/** 打开提现+代付互通详情 */
const openDetail = (id: number) => {
  relationDetailApi.setData({ id, source: 'apply' });
  relationDetailApi.open();
};
</script>

<template>
  <Page auto-content-height title="提现审核">
    <WithdrawalAuditModal />
    <RelationDetailModal />
    <StatisticsReconciliation v-if="statistics" :statistics="statistics" />
    <Grid>
      <template #toolbar-actions>
        <TableAction :actions="[]" :drop-down-actions="[]">
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #user-info="{ row }">
        <div>
          <Tag color="green">{{ row?.user_type_txt || '平台' }}</Tag>
          <Tag class="mt-3" color="#455cda">{{
            row.store?.name ||
            row.supplier?.name ||
            row.delivery_warehouse?.name ||
            row.deliveryWarehouse?.name ||
            '萧康云医'
          }}</Tag>
        </div>
      </template>
      <template #charge-cash="{ row }">
        <span>{{ row.display_charge_cash ?? row.charge_cash_pay_record?.charge_cash ?? 0 }}</span>
        <div v-if="row.charge_status_txt" class="mt-1">
          <Tag color="processing">{{ row.charge_status_txt }}</Tag>
        </div>
      </template>
      <template #check-id="{ row }">
        <div v-if="row.check_id !== 0">
          <span v-if="row.is_new === 0">{{ row.check_admin?.nickname || '旧后台' }}</span>
          <span v-else-if="row.is_new === 1">{{ row.new_check_admin?.nick_name || '新后台' }}</span>
        </div>
        <div :class="row.check_id !== 0 ? 'mt-3' : ''">
          <Tag v-if="row.check_status === 1" color="purple">待审核</Tag>
          <Tag v-else-if="row.check_status === 2" color="green">审核通过</Tag>
          <Tag v-else-if="row.check_status === 3" color="error">审核拒绝</Tag>
          <Tag v-else-if="row.check_status === 4" color="error">提现失败</Tag>
        </div>
        <div v-if="row.check_result" :class="row.check_id !== 0 ? 'mt-3' : ''">
          备注：{{ row.check_result }}
        </div>
        <div v-if="row.check_time" :class="row.check_id !== 0 ? 'mt-3' : ''">
          {{ row.check_time }}
        </div>
      </template>
      <template #dakuan-status="{ row }">
        <div class="mt-3">
          <Tag v-if="row.dakuan_status === 0" color="purple">未知</Tag>
          <Tag v-else-if="row.dakuan_status === 1" color="green">已到账</Tag>
          <Tag v-else-if="row.dakuan_status === -1" color="error">打款失败</Tag>
        </div>
        <div v-if="row.dakuan_time" class="mt-3">
          {{ row.dakuan_time }}
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'link',
              icon: 'mdi:file-document-outline',
              size: 'small',
              onClick: openDetail.bind(null, row.id),
            },
            {
              label: '审核通过',
              type: 'link',
              icon: 'mdi:success-bold',
              ifShow: row.check_status === 1,
              size: 'small',
              onClick: infoModal.bind(null, row.id, 0),
            },
            {
              label: '拒绝审核',
              type: 'link',
              icon: 'icon-park-solid:error',
              ifShow: row.check_status === 1,
              size: 'small',
              onClick: infoModal.bind(null, row.id, 1),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.custom-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-list-item {
  background-color: rgba(64, 158, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
