<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { watch } from 'vue';

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { reconciliateBillsApi } from '#/api/posting';

const props = defineProps({
  paymentId: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['completeCheck']);

interface RowType {
  id: string;
  source: string;
  orderSn: string;
  tel: string;
  fee: string;
  type: string;
  orderTime: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        options: [
          {
            label: '金额',
            value: '0',
          },
        ],
        placeholder: '请选择',
      },
      defaultValue: '0',
      fieldName: 'type',
      label: '匹配方式',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const formatSource = (type: number) => {
  switch (type) {
    case 0: {
      return '一路健康';
    }
    case 1: {
      return '吴门医述';
    }
    default: {
      return type;
    }
  }
};

const formatType = (type: number) => {
  switch (type) {
    case 0: {
      return '充值';
    }
    case 1: {
      return 'vip';
    }
    case 2: {
      return '课';
    }
    case 3: {
      return '实物';
    }
    case 4: {
      return '培训班';
    }
    default: {
      return type;
    }
  }
};

const gridOptions: VxeTableGridOptions<RowType> = {
  columns: [
    {
      field: 'source',
      title: '来源',
      formatter: ({ cellValue }) => {
        return formatSource(cellValue);
      },
    },
    {
      field: 'orderSn',
      title: '订单号',
    },
    {
      field: 'tel',
      title: '电话',
    },
    {
      field: 'fee',
      title: '金额',
    },
    {
      field: 'type',
      title: '订单类型',
      formatter: ({ cellValue }) => {
        return formatType(cellValue);
      },
    },
    {
      field: 'orderTime',
      title: '订单时间',
      formatter: 'formatDateTime',
    },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 120,
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  rowConfig: {
    isHover: true,
  },
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    response: {
      result: 'records',
      list: 'records',
      total: 'total',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await reconciliateBillsApi.getOrderList({
          page: page.currentPage,
          limit: page.pageSize,
          paymentId: props.paymentId.toString(),
          ...formValues,
        });
      },
    },
  },
};

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

async function onConfirm(row: RowType) {
  await reconciliateBillsApi.manualCheckOrder({
    paymentId: props.paymentId,
    orderId: row.id,
  });
  emit('completeCheck');
}

// 监听paymentId变化，重新加载数据
watch(
  () => props.paymentId,
  (newPaymentId, oldPaymentId) => {
    if (newPaymentId && newPaymentId !== oldPaymentId) {
      // 重新加载数据
      gridApi?.reload();
    }
  },
  { immediate: false },
);
</script>

<template>
  <div class="orders-container h-full">
    <Grid>
      <template #action="{ row }">
        <Button type="primary" size="small" @click="onConfirm(row)">确认对账</Button>
      </template>
    </Grid>
  </div>
</template>

<style lang="scss" scoped>
.orders-container {
  :deep(.vxe-table) {
    height: 100% !important;
  }
}
</style>
