import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Form, message } from 'antd';

export default function Update(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();

  const loadShow = () => {
    if (!props.item?.id) return;
    Apis.Attendance.AttendanceShifts.Show({ id: Number(props.item.id) }).then(
      (res) => {
        const formData = { ...res?.data };

        if (formData.allow_checkin_start) {
          formData.allow_checkin_start = formData.allow_checkin_start.slice(
            0,
            5,
          );
        }
        if (formData.allow_checkin_end) {
          formData.allow_checkin_end = formData.allow_checkin_end.slice(0, 5);
        }

        if (formData.attendance_shift_periods) {
          formData.periods = formData.attendance_shift_periods.map(
            (period: any) => ({
              ...period,
              work_start_time: period.work_start_time
                ? period.work_start_time.slice(0, 5)
                : '',
              work_end_time: period.work_end_time
                ? period.work_end_time.slice(0, 5)
                : '',
            }),
          );
        }

        form.setFieldsValue({
          ...formData,
          asset_projects_id: res?.data?.asset_project?.id,
        });
      },
    );
  };

  return (
    <BetaSchemaForm<ApiTypes.Attendance.AttendanceShifts.Update>
      {...MyModalFormProps.props}
      title="编辑班次"
      trigger={<MyButtons.Default type="primary" size="small" title="编辑" />}
      key={new Date().getTime()}
      width="800px"
      wrapperCol={{ span: 24 }}
      form={form}
      onOpenChange={(open: any) => {
        if (open && props.item) {
          loadShow();
        }
      }}
      onFinish={async (values: any) => {
        const formattedValues = { ...values };

        if (formattedValues.periods) {
          formattedValues.periods = formattedValues.periods.map(
            (period: any) => ({
              ...period,
              work_start_time: period.work_start_time
                ? `${period.work_start_time}:00`
                : '',
              work_end_time: period.work_end_time
                ? `${period.work_end_time}:00`
                : '',
            }),
          );
        }

        if (formattedValues.allow_checkin_start) {
          formattedValues.allow_checkin_start = `${formattedValues.allow_checkin_start}:00`;
        }
        if (formattedValues.allow_checkin_end) {
          formattedValues.allow_checkin_end = `${formattedValues.allow_checkin_end}:00`;
        }

        return Apis.Attendance.AttendanceShifts.Update({
          ...formattedValues,
          is_enabled: values.is_enabled ? true : false,
          id: props.item?.id ?? 0,
        })
          .then(() => {
            props.reload?.();
            message.success('编辑成功');
            return true;
          })
          .catch(() => false);
      }}
      columns={[
        {
          title: '班次名称',
          key: 'name',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 12 },
        },
        {
          title: '状态',
          key: 'is_enabled',
          valueType: 'switch',
          colProps: { span: 12 },
          fieldProps(form, config) {
            return {
              ...config.fieldProps,
              style: { width: '100%' },
              checkedChildren: '启用',
              unCheckedChildren: '停用',
            };
          },
        },
        {
          valueType: 'formList',
          dataIndex: 'periods',
          title: '设置需打卡时段',
          formItemProps: { ...rulesHelper.array },
          fieldProps: {
            copyIconProps: false,
          },
          columns: [
            {
              valueType: 'group',
              colProps: { span: 24 },
              columns: [
                MyFormItems.EnumSelect({
                  key: 'period_order',
                  valueEnum: {
                    1: '1',
                    2: '2',
                    3: '3',
                    4: '4',
                    5: '5',
                  },
                  required: true,
                  colProps: { span: 4 },
                }),
                {
                  key: 'work_start_time',
                  valueType: 'time',
                  fieldProps: {
                    style: { width: '100%' },
                    placeholder: '请选择班次开始时间',
                    format: 'HH:mm',
                  },
                  colProps: { span: 8 },
                  formItemProps: { ...rulesHelper.text },
                },
                {
                  key: 'work_end_time',
                  valueType: 'time',
                  fieldProps: {
                    style: { width: '100%' },
                    placeholder: '请选择班次结束时间',
                    format: 'HH:mm',
                  },
                  colProps: { span: 8 },
                  formItemProps: { ...rulesHelper.text },
                },
              ],
            },
          ],
        },
        {
          title: '可打卡开始时间',
          key: 'allow_checkin_start',
          valueType: 'time',
          fieldProps: {
            style: { width: '100%' },
            format: 'HH:mm',
          },
          colProps: { span: 12 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          title: '可打卡结束时间',
          key: 'allow_checkin_end',
          fieldProps: {
            style: { width: '100%' },
            format: 'HH:mm',
          },
          valueType: 'time',
          colProps: { span: 12 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          title: '备注',
          key: 'remark',
          valueType: 'textarea',
          colProps: { span: 24 },
        },
      ]}
    />
  );
}
