import { debounce } from 'lodash-es';
import type { TableColumn } from '@/components/core/dynamic-table';
import { formatToDateTime } from '@/utils/dateUtil';
import { updateUser } from '@/api/user';
import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { sexTypeList } from './data';
export type TableListItem = API.UserInfoType;
export type TableColumnItem = TableColumn<TableListItem>;
// 数据项类型
// export type ListItemType = typeof tableData[number];
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
export const baseColumns: TableColumnItem[] = [
  // {
  //   title: '用户名',
  //   align: 'center',
  //   dataIndex: 'username',
  //   // sorter: true,
  //   width: 150,
  //   resizable: true,
  //   formItemProps: {
  //     defaultValue: '',
  //     required: false,
  //   },
  // },
  {
    title: '姓名',
    align: 'center',
    dataIndex: 'realName',
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '手机号码',
    align: 'center',
    dataIndex: 'mobile',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  // {
  //   title: '身份证',
  //   align: 'center',
  //   dataIndex: 'idCard',
  //   width: 150,
  //   formItemProps: {
  //     defaultValue: '',
  //     required: false,
  //   },
  // },

  {
    title: '性别',
    align: 'center',
    dataIndex: 'sex',
    width: 100,
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'Select',
      label: '性别',
      componentProps: {
        mode: 'single',
        request: async () => {
          // const data = await getSexList();
          return sexTypeList;
        },
      },
    },
    customRender: ({ record }) => {
      const text = sexTypeList.find((e) => e.value === record.sex)?.label;
      return <div>{text}</div>;
    },
  },
  {
    title: '帐号状态',
    align: 'center',
    width: 100,
    dataIndex: 'state',
    hideInSearch: true,
    formItemProps: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '启用',
            value: 1,
          },
          {
            label: '禁用',
            value: 0,
          },
        ],
      },
    },
    customRender: ({ record }) => {
      const onChange = (checked: boolean) => {
        console.log('checked: ', checked);
        record.pendingStatus = true;
        const newState = checked ? 1 : 0;
        record.state = newState;
        updateUser(record)
          .then(() => {
            record.state = newState;
          })
          .catch(() => {})
          .finally(() => {
            record.pendingStatus = false;
          });
      };
      // return (
      //   <a-switch
      //     v-model:checked={record.state}
      //     v-model:loading={record.pendingStatus}
      //     onChange={onChange}
      //   ></a-switch>
      // );
      // 渲染函数写法
      return h(Switch, {
        checked: record.state === 1 ? true : false,
        loading: record.pendingStatus,
        onChange,
      });
    },
  },
  {
    title: '创建时间',
    align: 'center',
    width: 200,
    dataIndex: 'createTime',
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'RangePicker',
    },
  },
];