import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { DictEnum } from '@vben/constants';

import { useDebounceFn } from '@vueuse/core';

import { getUserList } from '#/api/system/user/user';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';

const userName = ref('');

const fetching = ref(false);

export const queryFormSchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'name',
    label: '名称',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(DictEnum.OIL_LOCATION_TYPE),
    },
    fieldName: 'oilLocationType',
    label: '位置类型',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(DictEnum.OIL_LEVEL),
    },
    fieldName: 'oilLevel',
    label: '油站级别',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(DictEnum.OIL_NETWORK_TYPE),
    },
    fieldName: 'oilNetworkType',
    label: '网络类型',
  },
  // {
  //   component: 'DatePicker',
  //   componentProps: {
  //     type: 'daterange',
  //     format: 'YYYY-MM-DD',
  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
  //     startPlaceholder: '开始日期',
  //     endPlaceholder: '结束日期',
  //   },
  //   fieldName: 'createTime',
  //   label: '创建时间',
  // },
];

export const tableColumns: VxeGridProps['columns'] = [
  {
    field: 'oilId',
    title: '角色',
  },
  {
    field: 'name',
    title: '姓名',
  },
  {
    field: 'level',
    title: '岗位',
    slots: {
      default: ({ row }) => {
        return renderDict(row.level, DictEnum.OIL_LEVEL);
      },
    },
  },
  {
    field: 'locationType',
    title: '油站',
    slots: {
      default: ({ row }) => {
        return renderDict(row.locationType, DictEnum.OIL_LOCATION_TYPE);
      },
    },
  },
  {
    field: 'location',
    title: '证照有效期',
  },
  {
    field: 'createTime',
    title: '创建时间',
  },
  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
  },
];

export const drawerFormSchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    fieldName: 'configId',
    label: '角色',
    componentProps: {
      options: [
        {
          label: '主要负责人',
          value: 1,
        },
        {
          label: '安管',
          value: 2,
        },
      ],
    },
    rules: 'required',
  },
  {
    component: 'ApiSelect',
    // 对应组件的参数
    componentProps: () => {
      return {
        api: async () => {
          const result = await getUserList();
          const options: any = [];
          if (result?.rows.length > 0) {
            result.rows.forEach((item) => {
              options.push({
                label: item.userName,
                value: item.userId,
              });
            });
          }
          return options;
        },
        // 禁止本地过滤
        filterOption: false,
        // 如果正在获取数据，使用插槽显示一个loading
        notFoundContent: fetching.value ? undefined : null,
        // 搜索词变化时记录下来， 使用useDebounceFn防抖。
        onSearch: useDebounceFn((value: string) => {
          userName.value = value;
        }, 300),
        // 远程搜索参数。当搜索词变化时，params也会更新
        params: {
          userName: userName.value || undefined,
          pageNum: 1,
          pageSize: 10,
        },
        showSearch: true,
        filterable: true,
      };
    },
    // 字段名
    fieldName: 'userName',
    // 界面显示的label
    label: '姓名',
    rules: 'required',
    // renderComponentContent: () => {
    //   return {
    //     notFoundContent: fetching.value ? h(Spin) : undefined,
    //   };
    // },
  },
  {
    component: 'Input',
    fieldName: 'configKey',
    label: '岗位',
    componentProps: {
      maxlength: 100,
    },
  },
];
