import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { EnergyBillApi } from '#/api/energy/bill';

import { useActionColumn } from '#/utils/table';

export const COOPERATION_TYPE_OPTIONS = [
  { label: '预充值', value: 1, color: 'blue' },
  { label: '月结算', value: 2, color: 'pink' },
];

export const BILL_STATUS_OPTIONS = [
  { label: '草稿', value: 0, color: 'orange' },
  { label: '已确认', value: 1, color: 'green' },
];

export const BILL_AUDIT_STATUS_OPTIONS = [
  { label: '待审核', value: 0, color: 'orange' },
  { label: '已通过', value: 1, color: 'green' },
  { label: '已驳回', value: 2, color: 'red' },
];

export const PAYMENT_STATUS_OPTIONS = [
  { label: '未支付', value: 0, color: 'default' },
  { label: '部分支付', value: 1, color: 'orange' },
  { label: '已支付', value: 2, color: 'green' },
];

/** 搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'customerName',
      label: '客户名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户名称',
        allowClear: true,
      },
    },
    {
      fieldName: 'stationName',
      label: '加氢站',
      component: 'Input',
      componentProps: {
        placeholder: '请输入加氢站',
        allowClear: true,
      },
    },
    {
      fieldName: 'billPeriod',
      label: '账单周期',
      component: 'DatePicker',
      componentProps: {
        picker: 'month',
        format: 'YYYY-MM',
        valueFormat: 'YYYY-MM',
        placeholder: '选择月份',
        allowClear: true,
        class: 'w-full',
      },
    },
    {
      fieldName: 'cooperationType',
      label: '合作模式',
      component: 'Select',
      componentProps: {
        options: COOPERATION_TYPE_OPTIONS,
        placeholder: '请选择合作模式',
        allowClear: true,
      },
    },
    {
      fieldName: 'status',
      label: '账单状态',
      component: 'Select',
      componentProps: {
        options: BILL_STATUS_OPTIONS,
        placeholder: '请选择账单状态',
        allowClear: true,
      },
    },
    {
      fieldName: 'auditStatus',
      label: '审核状态',
      component: 'Select',
      componentProps: {
        options: BILL_AUDIT_STATUS_OPTIONS,
        placeholder: '请选择审核状态',
        allowClear: true,
      },
    },
    {
      fieldName: 'paymentStatus',
      label: '付款状态',
      component: 'Select',
      componentProps: {
        options: PAYMENT_STATUS_OPTIONS,
        placeholder: '请选择付款状态',
        allowClear: true,
      },
    },
  ];
}

/** 表格列配置 */
export function useGridColumns(): VxeTableGridOptions<EnergyBillApi.Bill>['columns'] {
  return [
    {
      field: 'billCode',
      title: '账单编号',
      minWidth: 180,
      fixed: 'left',
      slots: { default: 'billCode' },
    },
    {
      field: 'customerName',
      title: '客户名称',
      minWidth: 150,
    },
    {
      field: 'stationName',
      title: '加氢站',
      minWidth: 150,
    },
    {
      field: 'cooperationType',
      title: '合作模式',
      minWidth: 100,
      align: 'center',
      slots: { default: 'cooperationType' },
    },
    {
      field: 'billPeriodStart',
      title: '账单周期',
      minWidth: 100,
      align: 'center',
      formatter: ({ row }: { row: EnergyBillApi.Bill }) => {
        if (row.billPeriodStart) {
          return row.billPeriodStart.substring(0, 7);
        }
        return '—';
      },
    },
    {
      field: 'receivableAmount',
      title: '应收金额',
      minWidth: 100,
      align: 'right',
    },
    {
      field: 'adjustmentAmount',
      title: '调整金额',
      minWidth: 100,
      align: 'right',
      slots: { default: 'adjustmentAmount' },
    },
    {
      field: 'actualAmount',
      title: '实收金额',
      minWidth: 100,
      align: 'right',
      slots: { default: 'actualAmount' },
    },
    {
      field: 'status',
      title: '账单状态',
      minWidth: 100,
      align: 'center',
      slots: { default: 'status' },
    },
    {
      field: 'auditStatus',
      title: '审核状态',
      minWidth: 100,
      align: 'center',
      slots: { default: 'auditStatus' },
    },
    {
      field: 'paymentStatus',
      title: '付款状态',
      minWidth: 100,
      align: 'center',
      slots: { default: 'paymentStatus' },
    },
    useActionColumn(3),
  ];
}
