import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { PatrolRoutesGenerationMethodEnum } from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Form, message } from 'antd';
import { useEffect, useRef } from 'react';

export default function Update(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  const actionRef = useRef<any>();

  const loadShow = () => {
    Apis.Patrol.PatrolRoutes.Show({ id: props.item?.id ?? 0 }).then((res) => {
      form.setFieldsValue({
        ...res?.data,
        patrol_location: res?.data?.patrol_route_locations?.map(
          (item: any) => ({
            location_id: item.patrol_locations_id,
          }),
        ),
      });
    });
  };

  // 使用useEffect添加样式，确保组件挂载时样式正确应用
  useEffect(() => {
    const styleId = 'custom-checkbox-styles';
    let styleElement = document.getElementById(styleId) as HTMLStyleElement;

    if (!styleElement) {
      styleElement = document.createElement('style');
      styleElement.id = styleId;
      document.head.appendChild(styleElement);
    }

    // 添加checkbox样式，确保每个选项宽度一致且label和checkbox在同一行，一行显示7个
    styleElement.textContent = `
      /* 为checkbox组的容器设置样式 */
      .custom-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
      }
      
      /* 为每个checkbox选项设置固定宽度，使一行能显示7个，并确保在同一行 */
      .custom-checkbox-group .ant-checkbox-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(14.2857% - 4px); /* 一行7个，减去间距 */
        min-width: 60px;
        text-align: center;
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        box-sizing: border-box;
      }
      
      /* 确保label和checkbox在同一行 */
      .custom-checkbox-group .ant-checkbox + span {
        display: inline;
        width: auto;
        margin-left: 4px;
        text-align: center;
        font-size: 14px;
      }
      
      /* 确保整个选项作为一个整体居中 */
      .custom-checkbox-group .ant-checkbox-wrapper-inner {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      /* 调整checkbox本身的大小 */
      .custom-checkbox-group .ant-checkbox {
        transform: scale(0.9);
      }
    `;

    // 清理函数
    return () => {
      if (styleElement && styleElement.parentNode) {
        styleElement.parentNode.removeChild(styleElement);
      }
    };
  }, [props.item?.id]);

  return (
    <BetaSchemaForm<ApiTypes.Patrol.PatrolLocations.Update>
      {...MyModalFormProps.props}
      title={`编辑${props.title}`}
      trigger={<MyButtons.Edit />}
      key={new Date().getTime()}
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      labelAlign="left"
      width="720px"
      form={form}
      onOpenChange={(open: any) => {
        if (open && props.item) {
          props.item?.id ? loadShow() : null;
        }
      }}
      onFinish={async (values: any) =>
        Apis.Patrol.PatrolRoutes.Update({
          ...values,
          patrol_location: values.patrol_location?.map(
            (item: any) => item.location_id,
          ),
          is_enabled: values.is_enabled ? 1 : 0,
          id: props.item?.id ?? 0,
          clock_start_time: values.task_start_time,
          clock_end_time: values.task_end_time,
        })
          .then(() => {
            props.reload?.();
            message.success(props.title + '编辑成功');
            return true;
          })
          .catch(() => false)
      }
      columns={[
        {
          title: '路线名称',
          key: 'name',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        },
        Selects?.AssetProjects({
          title: '选择项目',
          key: 'asset_projects_id',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        }),
        {
          valueType: 'dependency',
          name: ['asset_projects_id'],
          columns: ({ asset_projects_id }) => {
            return asset_projects_id
              ? [
                  {
                    valueType: 'formList',
                    dataIndex: 'patrol_location',
                    title: '选择点位',
                    formItemProps: { ...rulesHelper.array },
                    fieldProps: {
                      actionRef: actionRef,
                      copyIconProps: false,
                      addButtonProps: {
                        children: '添加点位',
                      },
                    },
                    columns: [
                      {
                        valueType: 'group',
                        colProps: { span: 24 },
                        columns: [
                          Selects?.PatrolLocationsSelect({
                            title: '',
                            key: 'location_id',
                            colProps: { span: 24 },
                            tooltip: '点位的巡更顺序未为【自上而下】',
                            formItemProps: { ...rulesHelper.text },
                            params: {
                              asset_projects_id: asset_projects_id,
                            },
                            fieldProps: {
                              mode: 'single',
                              placeholder:
                                '请选择巡逻点位（如空白，请在“点位配置”中添加）',
                            },
                          }),
                        ],
                      },
                    ],
                  },
                ]
              : [];
          },
        },
        {
          key: 'task_start_time',
          title: '任务时段',
          colProps: { span: 12 },
          valueType: 'time',
          required: true,
          formItemProps: {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            ...rulesHelper.text,
          },
          fieldProps: {
            placeholder: '请设置任务开始时间',
            format: 'HH:mm',
            style: { width: '100%' },
          },
        },
        {
          key: 'task_end_time',
          valueType: 'time',
          colProps: { span: 12 },
          formItemProps: {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            ...rulesHelper.text,
          },
          fieldProps: {
            placeholder: '请设置任务结束时间',
            format: 'HH:mm',
            style: { width: '100%' },
          },
        },
        // {
        //   title: '执行时段',
        //   tooltip:
        //     '任务的具体执行中，不能早于可执行开始时间，不能晚于可执行结束时间',
        //   key: 'clock_start_time',
        //   colProps: { span: 12 },
        //   valueType: 'time',
        //   required: true,
        //   formItemProps: {
        //     labelCol: { span: 8 },
        //     wrapperCol: { span: 16 },
        //     ...rulesHelper.text,
        //   },
        //   fieldProps: {
        //     placeholder: '请设置任务可执行开始时间',
        //     format: 'HH:mm',
        //     style: { width: '100%' },
        //   },
        // },
        // {
        //   key: 'clock_end_time',
        //   valueType: 'time',
        //   colProps: { span: 12 },
        //   formItemProps: {
        //     labelCol: { span: 8 },
        //     wrapperCol: { span: 16 },
        //     ...rulesHelper.text,
        //   },
        //   fieldProps: {
        //     placeholder: '请设置任务可执行结束时间',
        //     format: 'HH:mm',
        //     style: { width: '100%' },
        //   },
        // },
        MyFormItems.EnumRadio({
          key: 'generation_method',
          title: '巡更周期',
          tooltip: '每天巡更一次/每周x巡更一次/每月x号巡更一次',
          valueEnum: PatrolRoutesGenerationMethodEnum,
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
          fieldProps: {
            onChange: () => {
              form.setFieldValue('date', undefined);
            },
          },
        }),
        {
          valueType: 'dependency',
          name: ['generation_method'],
          columns: ({ generation_method }) => {
            return generation_method === 'Weekly' ||
              generation_method === 'Monthly'
              ? [
                  {
                    title: '生成时段',
                    key: 'date',
                    valueType: 'checkbox',
                    formItemProps: { ...rulesHelper.array },
                    colProps: { span: 24 },
                    fieldProps: {
                      style: { width: '100%' },
                      // 使用CSS方式设置每个checkbox选项的宽度
                      className: 'custom-checkbox-group',
                    },
                    valueEnum: () => {
                      if (generation_method === 'Weekly') {
                        const weekDays = [
                          { label: '周一', value: 1 },
                          { label: '周二', value: 2 },
                          { label: '周三', value: 3 },
                          { label: '周四', value: 4 },
                          { label: '周五', value: 5 },
                          { label: '周六', value: 6 },
                          { label: '周日', value: 7 },
                        ];
                        return weekDays.reduce((acc: any, day) => {
                          acc[day.value] = { text: day.label };
                          return acc;
                        }, {});
                      }
                      if (generation_method === 'Monthly') {
                        const monthDays = Array.from(
                          { length: 31 },
                          (_, index) => {
                            const day = index + 1;
                            return {
                              label: `${day < 10 ? `0${day}` : day}号`,
                              value: day,
                            };
                          },
                        );

                        return monthDays.reduce((acc: any, day) => {
                          acc[day.value] = { text: day.label };
                          return acc;
                        }, {});
                      }
                    },
                  },
                ]
              : [];
          },
        },

        {
          title: '备注',
          key: 'remark',
          valueType: 'textarea',
          colProps: { span: 24 },
        },
      ]}
    />
  );
}