import { BasicColumn, FormSchema } from '/@/components/Table';
import { requestMagicApi } from '/@/api/magicApi';
import { Switch } from 'ant-design-vue';
import { h } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { postStudentReportRecordSign } from '/@/services/apis/StudentReportRecordController';
import { getDataOption } from '/@/api/system/dic';

export const stateOptions = [
  { label: '草稿', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已结束', value: 2 },
];

export const tableColumns: BasicColumn[] = [
  {
    title: '年级',
    dataIndex: 'gradeName',
    align: 'left',
    width: 100,
  },
  {
    title: '班级',
    dataIndex: 'className',
    align: 'left',
    width: 120,
  },
  {
    title: '班主任',
    dataIndex: 'teacherName',
    align: 'left',
    width: 100,
  },
  {
    title: '学生姓名',
    dataIndex: 'name',
    align: 'left',
    width: 100,
  },
  {
    title: '性别',
    dataIndex: 'gender',
    align: 'left',
    width: 80,
  },
  {
    title: '身份证号',
    dataIndex: 'credentialNumber',
    align: 'left',
    width: 120,
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    align: 'left',
    width: 120,
  },
  {
    title: '家长联系电话',
    dataIndex: 'parentMobile',
    align: 'left',
    width: 120,
  },
  {
    title: '学生来源',
    dataIndex: 'studentTypeCn',
    align: 'left',
  },
  {
    title: '就读方式',
    dataIndex: 'stduyStatusCn',
    align: 'left',
    width: 80,
  },
  {
    title: '学籍状态',
    dataIndex: 'archivesStatusCn',
    align: 'left',
    width: 80,
  },
  {
    title: '报到状态',
    dataIndex: 'isReport',
    slots: 'isReport',
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.isReport === 1,
        // checkedChildren: '报到',
        // unCheckedChildren: '未报到',
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          const newStatus = checked ? 1 : 0;
          const { createMessage } = useMessage();
          postStudentReportRecordSign({ id: record.id })
            .then(() => {
              record.isReport = newStatus;
              record.reportTime = checked ? new Date() : null;
              createMessage.success('已成功修改状态');
            })
            .catch(() => {
              createMessage.error('修改状态失败');
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
    width: 80,
  },
  {
    title: '报到日期',
    dataIndex: 'reportTime',
    align: 'left',
    width: 170,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'className',
    label: '班级',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'name',
    label: '学生姓名',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'credentialNumber',
    label: '身份证号',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'studentType',
    label: '学生来源',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      getPopupContainer: () => document.body,
      api: getDataOption,
      params: { code: 'student_type' },
    },
  },
  {
    field: 'stduyStatus',
    label: '就读方式',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: getDataOption,
      params: { code: 'stduy_status' },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'archivesStatus',
    label: '学籍状态',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: getDataOption,
      params: { code: 'archives_status' },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'isReport',
    label: '报到状态',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      getPopupContainer: () => document.body,
      options: [
        { label: '未报到', value: 0 },
        { label: '已报到', value: 1 },
      ],
    },
  },
  {
    field: '[reportTimeStart,reportTimeEnd]',
    label: '报到日期',
    component: 'RangePicker',
    colProps: { span: 8 },
    componentProps: {
      getPopupContainer: () => document.body,
      placeholder: ['开始时间', '结束时间'],
      format: 'YYYY-MM-DD',
      showTime: false,
    },
  },
  {
    field: 'gradeId',
    label: '年级',
    component: 'ApiSelect',
    componentProps: {
      getPopupContainer: () => document.body,
      api: requestMagicApi,
      params: { url: 'baseData/grade/option' },
    },
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: '计划名称',
    field: 'name',
    component: 'Input',
    required: true,
    colProps: { span: 24 },
  },
  {
    field: 'semesterId',
    label: '学期',
    component: 'ApiSelect',
    componentProps: {
      getPopupContainer: () => document.body,
      api: requestMagicApi,
      params: { url: 'baseData/semester/option' },
    },
    required: true,
    colProps: { span: 24 },
  },
  {
    label: '报到时间',
    field: 'dateTime',
    component: 'RangePicker',
    colProps: { span: 24 },
    required: true,
    componentProps: {
      getPopupContainer: () => document.body,
      placeholder: ['开始时间', '结束时间'],
      format: 'YYYY-MM-DD HH:mm:ss',
      showTime: { format: 'HH:mm:ss' },
    },
  },
  {
    label: '就读修改时间',
    field: 'date',
    component: 'RangePicker',
    colProps: { span: 24 },
    required: true,
    componentProps: {
      getPopupContainer: () => document.body,
      placeholder: ['开始时间', '结束时间'],
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      showTime: false,
    },
  },
  {
    label: '参与班级',
    field: 'classIds',
    component: 'Input',
    required: true,
    colProps: { span: 24 },
    slot: 'classIds',
  },
];