import type {FormSchemaGetter} from '#/adapter/form';
import type {VxeGridProps} from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
import {renderDict} from "#/utils/render";
import {costItemSettingList} from "#/api/property/costManagement/costItemSetting";
import { h } from 'vue';


export const querySchema: FormSchemaGetter = () => [
  {
    component: 'ApiSelect',
    componentProps: {
      api:async ()=>{
       return  (await costItemSettingList({pageSize: 1000, pageNum: 1}))?.rows
      },
      afterFetch: (data: { chargeItem: string; id: string }[]) => {
        return data.map((item: any) => ({
          label: item.chargeItem,
          value: item.id,
        }));
      },
    },
    fieldName: 'costItemsId',
    label: '收费项目',
  },
  {
    component: 'Select',
    fieldName: 'state',
    label: '状态',
    componentProps: {
      options: getDictOptions('wy_fysfzt')
    },
  },
];
export const columns: VxeGridProps['columns'] = [
  {type: 'checkbox', width: 60},
  {
    title: '房屋',
    field: 'roomId',
    minWidth: 150,
  },
  {
    title: '收费项目',
    field: 'costItemsId',
    width: 150,
  },
  {
    title: '应收金额',
    field: 'amountReceivable',
    width: 150,
  },
  {
    title: '计费开始时间',
    field: 'startTime',
    width: 150,
  },
  {
    title: '计费结束时间',
    field: 'endTime',
    width: 150,
  },
  {
    title: '状态',
    field: 'state',
    width: 150,
    slots: {
      default: ({row}) => {
        return renderDict(row.state, 'wy_fysfzt')
      }
    }
  },
  {
    title: '说明',
    field: 'remark',
    width: 150,
  },
  {
    field: 'action',
    fixed: 'right',
    slots: {default: 'action'},
    title: '操作',
    width: 180,
  },
];

export const modalSchema: FormSchemaGetter = () => [
  {
    label: '主键',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '房屋',
    fieldName: 'roomId',
    component: 'TreeSelect',
    componentProps: {
    },
    rules: 'selectRequired',
  },
  {
    label: '费用类型',
    fieldName: 'costType',
    component: 'Select',
    componentProps: {
    },
    rules: 'selectRequired',
  },
  {
    label: '收费项目',
    fieldName: 'costItemsId',
    component: 'ApiSelect',
    componentProps: {},
    rules: 'selectRequired',
  },
  {
    label: '应收金额',
    fieldName: 'amountReceivable',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '计费时间',
    fieldName: 'chargeTime',
    component: 'RangePicker',
    componentProps: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
    rules: 'selectRequired',
  },
  {
    label: '说明',
    fieldName: 'remark',
    component: 'Textarea',
    formItemClass: 'col-span-2',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
];

export const modalSchemaUpdate: FormSchemaGetter = () => [
  {
    label: '主键',
    fieldName: 'id',
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    label: '支付方式',
    fieldName: 'payType',
    component: 'Select',
    componentProps: {
     options:getDictOptions('wy_zffs')
    },
    rules: 'selectRequired',
  },
  {
    label: '缴费周期',
    fieldName: 'chargeCycle',
    component: 'InputNumber',
    componentProps: {
      min:1,
      precision:0,
      placeholder:'请输入缴费周期（月）'
    },
    suffix: () => h('span', { style: {fontSize: '0.875rem',fontWeight:500,} }, '月'),
    rules: 'selectRequired',
  },
]