import {
  MyFormItems,
  MyModalFormProps,
  MyPageContainer,
  rulesHelper,
} from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Form, message, Space } from 'antd';
import { useState } from 'react';
export default function Index({ title = '新增班次' }) {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [dataSource, setDataSource] = useState<
    ApiTypes.Asset.AssetProjects.List[]
  >([]);

  return (
    <MyPageContainer
      title={
        <Space
          style={{ cursor: 'pointer' }}
          onClick={() => {
            navigate(-1);
          }}
        >
          {/* <LeftCircleOutlined size={34} /> */}
          {title}
        </Space>
      }
      enableTabs={false}
      tabKey="attendance-shifts-create"
      tabLabel={title}
    >
      <ProCard>
        <div style={{ width: 900, minHeight: '83vh', margin: '0 auto' }}>
          <BetaSchemaForm<ApiTypes.Attendance.AttendanceShifts.Store>
            {...MyModalFormProps.props}
            title={title}
            // 基础表单
            layoutType="Form"
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            labelAlign="left"
            width="900px"
            form={form}
            onFinish={async (values: any) => {
              // 处理时间格式转换，将HH:mm转换为HH:mm:ss格式，秒数固定为00
              const formattedValues = { ...values };

              // 处理work_start_time和work_end_time数组
              if (formattedValues.periods) {
                formattedValues.periods = formattedValues.periods.map(
                  (period: any) => {
                    return {
                      ...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`;
              }

              Apis.Attendance.AttendanceShifts.Store({
                ...formattedValues,
                // is_enabled: values.is_enabled ? true : false,
                is_enabled: true,
              })
                .then(() => {
                  //提交
                  navigate(-1);
                  message.success('提交成功');
                })
                .catch(() => false);
            }}
            columns={[
              {
                title: '班次名称',
                key: 'name',
                formItemProps: { ...rulesHelper.text },
                fieldProps: {
                  placeholder: '请输入(如：早班、晚班)',
                },
              },
              {
                valueType: 'formList',
                dataIndex: 'periods',
                title: '设置需打卡时段',
                formItemProps: { ...rulesHelper.array },
                fieldProps: {
                  copyIconProps: false,
                  // deleteIconProps: 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 },
                      },
                    ],
                  },
                ],
              },
              { valueType: 'divider' },
              {
                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: 'is_enabled',
              //   valueType: 'switch',
              //   colProps: { span: 24 },
              // },
              // {
              //   colProps: { span: 24 },
              //   title: '选择关联项目',
              //   tooltip: '选择后对应项目的人员可排班',
              //   key: 'asset_projects_id',
              //   formItemProps: { ...rulesHelper.text },
              //   renderFormItem: () => {
              //     return (
              //       <ProCard size="small" bordered>
              //         <ProTable
              //           {...MyProTableProps.props}
              //           options={false}
              //           size="small"
              //           search={false}
              //           pagination={false}
              //           dataSource={dataSource || []}
              //           headerTitle={
              //             <MyAssetsProjectSelectList
              //               key="select_project"
              //               item={dataSource}
              //               type="radio"
              //               onChange={(e: any) => {
              //                 let row = e?.[0];
              //                 form.setFieldsValue({
              //                   asset_projects_id:
              //                     row?.asset_projects_id || row?.id,
              //                 });
              //                 setDataSource(e);
              //               }}
              //             />
              //           }
              //           columns={[
              //             MyColumns.ID({
              //               search: false,
              //             }),
              //             {
              //               title: '名称',
              //               dataIndex: 'name',
              //             },
              //             MyColumns.Option({
              //               render: (_, item: any, index) => (
              //                 <Space key={index}>
              //                   <MyButtons.Delete
              //                     onConfirm={() => {
              //                       setDataSource(
              //                         dataSource.filter(
              //                           (res: any) => res?.id !== item?.id,
              //                         ),
              //                       );
              //                     }}
              //                   />
              //                 </Space>
              //               ),
              //             }),
              //           ]}
              //         />
              //       </ProCard>
              //     );
              //   },
              // },

              Selects?.AssetProjects({
                title: '关联项目',
                key: 'asset_projects_id',
                colProps: { span: 24 },
                formItemProps: { ...rulesHelper.text },
              }),
              {
                title: '备注',
                key: 'remark',
                valueType: 'textarea',
                colProps: { span: 24 },
              },
            ]}
          />
        </div>
      </ProCard>
    </MyPageContainer>
  );
}
