import {
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  MyPageContainer,
  rulesHelper,
} from '@/common';
import MyModalsHouseSelectList from '@/components/ModalsHouseSelectList';
import { Apis } from '@/gen/Apis';
import {
  HouseOccupantsCardTypeEnum,
  RenovationAppliesProcessTypeEnum,
  RenovationAppliesRenovationContentEnum,
  RenovationAppliesTypeEnum,
} from '@/gen/Enums';
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
import { useNavigate, useSearchParams } from '@umijs/max';
import { Form, message, Space } from 'antd';
import { useEffect, useState } from 'react';
export default function Index({ title = '编辑新装修申请' }) {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id') ?? 0;
  const [data, setShow] = useState<any>({});
  const [getSelectHouse, setSelectHouse] = useState<any>({});

  const loadShow = () => {
    Apis.Renovation.RenovationApplies.Show({ id: Number(id) }).then((res) => {
      setShow(res?.data);
      setSelectHouse(res?.data?.asset_house);
      form.setFieldsValue(res?.data); // 编辑赋值
    });
  };

  useEffect(() => {
    loadShow();
  }, [id]);

  const onSave = (formData: any, subType: string) => {
    Apis.Renovation.RenovationApplies.Update({
      ...formData,
      status: subType,
      id: data?.id ?? 0,
      is_deposit: data.is_deposit ? 1 : 0,
    })
      .then(() => {
        if (subType === 'Draft') {
          navigate(-1);
          message.success('暂存成功');
        } else {
          navigate(-1);
          message.success('提交成功');
        }
      })
      .catch(() => false);
  };

  return (
    <MyPageContainer
      title={
        <Space
          style={{ cursor: 'pointer' }}
          onClick={() => {
            navigate(-1);
          }}
        >
          {/* <LeftCircleOutlined size={34} /> */}
          {title}
        </Space>
      }
      enableTabs={false}
      tabKey="charge-standards-create"
      tabLabel={title}
    >
      <ProCard>
        <div style={{ width: 900, minHeight: '83vh', margin: '0 auto' }}>
          <BetaSchemaForm<ApiTypes.Renovation.RenovationApplies.Update>
            {...MyModalFormProps.props}
            title={title}
            // 基础表单
            layoutType="Form"
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            labelAlign="left"
            width="900px"
            form={form}
            submitter={{
              render: (props) => {
                return [
                  <MyButtons.Default
                    key="TemporaryStorage"
                    size="middle"
                    type="default"
                    onClick={() => {
                      onSave(form.getFieldsValue(), 'Draft');
                    }}
                    title="暂存"
                  />,
                  <MyButtons.Default
                    key="Review"
                    size="middle"
                    type="primary"
                    onClick={() => {
                      props.submit();
                    }}
                    title="提交审核"
                  />,
                ];
              },
            }}
            onFinish={async (values: any) => {
              onSave(values, 'Pending');
            }}
            columns={[
              {
                colProps: { span: 24 },
                title: '选择房屋',
                key: 'asset_houses_id',
                formItemProps: { ...rulesHelper.text },
                renderFormItem: () => {
                  return (
                    <ProCard bordered>
                      <Space>
                        <MyModalsHouseSelectList
                          onChange={(e: any) => {
                            setSelectHouse(e);
                            form.setFieldsValue({
                              asset_houses_id: e?.id,
                            });
                          }}
                        />
                        {getSelectHouse?.full_name ? (
                          <div>已选择房屋：{getSelectHouse?.full_name}</div>
                        ) : (
                          ''
                        )}
                      </Space>
                    </ProCard>
                  );
                },
              },
              MyFormItems.EnumRadio({
                key: 'type',
                title: '装修类型',
                valueEnum: RenovationAppliesTypeEnum,
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.text },
              }),
              MyFormItems.EnumRadio({
                key: 'process_type',
                title: '办理类型',
                valueEnum: RenovationAppliesProcessTypeEnum,
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.text },
              }),
              {
                title: '是否有保证金',
                colProps: { span: 6 },
                key: 'is_deposit',
                valueType: 'switch',
              },

              {
                valueType: 'dependency',
                name: ['is_deposit'],
                columns: ({ is_deposit }) => {
                  return is_deposit
                    ? [
                        {
                          title: '保证金金额',
                          colProps: { span: 6 },
                          key: 'deposit_amount',
                          valueType: 'digit',
                          formItemProps: { ...rulesHelper.number },
                          fieldProps: {
                            style: {
                              width: '100%',
                            },
                          },
                        },
                      ]
                    : [];
                },
              },
              {
                valueType: 'divider',
                fieldProps: {
                  orientation: 'left',
                  children: '业主信息',
                },
              },
              {
                title: '业主姓名',
                key: 'owner_name',
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.text },
              },
              {
                title: '业主手机',
                key: 'owner_phone',
                colProps: { span: 6 },
                fieldProps: {
                  maxLength: 11,
                },
                formItemProps: { ...rulesHelper.phone },
              },
              MyFormItems.EnumSelect({
                key: 'card_type',
                title: '证件类型',
                valueEnum: HouseOccupantsCardTypeEnum,
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.text },
              }),
              {
                title: '证件号码',
                key: 'owner_id_card',
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.text },
                fieldProps: {
                  maxLength: 18,
                },
              },
              MyFormItems.UploadImages({
                key: 'id_card_front',
                title: '证件正面',
                max: 1,
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.array },
              }),
              MyFormItems.UploadImages({
                key: 'id_card_back',
                title: '证件反面',
                max: 1,
                colProps: { span: 6 },
                formItemProps: { ...rulesHelper.array },
              }),
              MyFormItems.UploadImages({
                key: 'property_certificate',
                title: '房产证明',
                max: 1,
                colProps: { span: 8 },
                formItemProps: { ...rulesHelper.array },
              }),
              {
                valueType: 'dependency',
                name: ['process_type'],
                columns: ({ process_type }) => {
                  return process_type === 'AgentProcess'
                    ? [
                        {
                          valueType: 'divider',
                          fieldProps: {
                            orientation: 'left',
                            children: '代理人信息',
                          },
                        },
                        {
                          title: '代理人名称',
                          key: 'agent_name',
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                        },
                        {
                          title: '代理人手机',
                          key: 'agent_phone',
                          colProps: { span: 6 },
                          fieldProps: {
                            maxLength: 11,
                          },
                          formItemProps: { ...rulesHelper.phone },
                        },
                        MyFormItems.EnumSelect({
                          key: 'agent_card_type',
                          title: '证件类型',
                          valueEnum: HouseOccupantsCardTypeEnum,
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                        }),
                        {
                          title: '证件号码',
                          key: 'agent_id_card',
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                          fieldProps: {
                            maxLength: 18,
                          },
                        },
                        MyFormItems.UploadImages({
                          key: 'agent_id_card_front',
                          title: '证件正面',
                          max: 1,
                          colProps: { span: 6 },
                        }),
                        MyFormItems.UploadImages({
                          key: 'agent_id_card_back',
                          title: '证件反面',
                          max: 1,
                          colProps: { span: 6 },
                        }),
                        MyFormItems.UploadImages({
                          key: 'power_attorney',
                          title: '代理人授权书',
                          max: 1,
                          colProps: { span: 6 },
                        }),
                      ]
                    : [];
                },
              },
              {
                valueType: 'divider',
                fieldProps: {
                  orientation: 'left',
                  children: '施工信息',
                },
              },
              {
                valueType: 'dependency',
                name: ['type'],
                columns: ({ type }) => {
                  return type === 'RenovationCompany'
                    ? [
                        {
                          title: '施工负责人名称',
                          key: 'construction_principal_name',
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                        },
                        {
                          title: '施工负责人手机',
                          key: 'construction_principal_phone',
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.phone },
                          fieldProps: {
                            maxLength: 11,
                          },
                        },
                        MyFormItems.EnumSelect({
                          key: 'construction_principal_card_type',
                          title: '证件类型',
                          valueEnum: HouseOccupantsCardTypeEnum,
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                        }),
                        {
                          title: '施工负责人证件号',
                          key: 'construction_principal_id_card',
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.text },
                          fieldProps: {
                            maxLength: 18,
                          },
                        },
                        MyFormItems.UploadImages({
                          key: 'construction_principal_id_card_front',
                          title: '施工负责人身份证正面',
                          max: 1,
                          colProps: { span: 6 },
                        }),
                        MyFormItems.UploadImages({
                          key: 'construction_principal_id_card_back',
                          title: '施工负责人身份证反面',
                          max: 1,
                          colProps: { span: 6 },
                        }),
                      ]
                    : [];
                },
              },

              {
                valueType: 'group',
                columns: [
                  {
                    title: '施工开始时间',
                    valueType: 'date',
                    key: 'construction_start_date',
                    formItemProps: { ...rulesHelper.text },
                    colProps: { span: 6 },
                    fieldProps: {
                      format: 'YYYY-MM-DD',
                      onChange: (value: string, dateString: string) => {
                        form.setFieldValue(
                          'construction_start_date',
                          dateString,
                        );
                        console.log('construction_start_date', value);
                      },
                      style: {
                        width: '100%',
                      },
                    },
                  },
                  {
                    title: '施工结束时间',
                    valueType: 'date',
                    key: 'construction_end_date',
                    formItemProps: { ...rulesHelper.text },
                    colProps: { span: 6 },
                    fieldProps: {
                      format: 'YYYY-MM-DD',
                      onChange: (value: string, dateString: string) => {
                        form.setFieldValue('construction_end_date', dateString);
                        console.log('construction_end_date', value);
                      },
                      style: {
                        width: '100%',
                      },
                    },
                  },
                  MyFormItems.EnumRadio({
                    key: 'renovation_content',
                    title: '装修内容',
                    valueEnum: RenovationAppliesRenovationContentEnum,
                    colProps: { span: 12 },
                    formItemProps: { ...rulesHelper.text },
                  }),
                  {
                    valueType: 'dependency',
                    name: ['type'],
                    columns: ({ type }) => {
                      return type === 'RenovationCompany'
                        ? [
                            {
                              valueType: 'divider',
                              fieldProps: {
                                orientation: 'left',
                                children: '装修公司信息',
                              },
                            },
                            {
                              title: '公司名称',
                              key: 'company_name',
                              colProps: { span: 6 },
                              formItemProps: { ...rulesHelper.text },
                            },
                            {
                              title: '营业执照号',
                              key: 'company_business_license_num',
                              colProps: { span: 6 },
                              formItemProps: { ...rulesHelper.text },
                              fieldProps: {
                                maxLength: 18,
                              },
                            },
                            {
                              title: '公司负责人姓名',
                              key: 'company_principal_name',
                              // formItemProps: { ...rulesHelper.text },
                              colProps: { span: 6 },
                            },
                            {
                              title: '公司负责人手机',
                              key: 'company_principal_phone',
                              // formItemProps: { ...rulesHelper.phone },
                              colProps: { span: 6 },
                              fieldProps: {
                                maxLength: 11,
                              },
                            },
                            {
                              valueType: 'dependency',
                              name: ['type'],
                              columns: ({ type }) => {
                                return type === 'RenovationCompany'
                                  ? [
                                      MyFormItems.UploadImages({
                                        key: 'company_business_license',
                                        title: '装修公司营业执照',
                                        max: 1,
                                        colProps: { span: 6 },
                                        formItemProps: { ...rulesHelper.array },
                                      }),
                                      MyFormItems.UploadImages({
                                        key: 'company_asset_certificate',
                                        title: '装修公司资质证明',
                                        max: 1,
                                        colProps: { span: 6 },
                                        formItemProps: { ...rulesHelper.array },
                                      }),
                                      MyFormItems.UploadImages({
                                        key: 'company_power_attorney',
                                        title: '装修公司装修授权书',
                                        max: 1,
                                        colProps: { span: 6 },
                                        formItemProps: { ...rulesHelper.array },
                                      }),
                                    ]
                                  : [];
                              },
                            },
                          ]
                        : [];
                    },
                  },
                ],
              },
              {
                valueType: 'dependency',
                name: ['type'],
                columns: ({ type }) => {
                  return type === 'RenovationCompany'
                    ? [
                        MyFormItems.UploadImages({
                          key: 'company_business_license',
                          title: '装修公司营业执照',
                          max: 1,
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.array },
                        }),
                        MyFormItems.UploadImages({
                          key: 'company_asset_certificate',
                          title: '装修公司资质证明',
                          max: 1,
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.array },
                        }),
                        MyFormItems.UploadImages({
                          key: 'company_power_attorney',
                          title: '装修公司装修授权书',
                          max: 1,
                          colProps: { span: 6 },
                          formItemProps: { ...rulesHelper.array },
                        }),
                      ]
                    : [];
                },
              },
              {
                valueType: 'divider',
                fieldProps: {
                  orientation: 'left',
                  children: '其他附件',
                },
              },
              MyFormItems.UploadImages({
                key: 'construction_draw',
                title: '施工图',
                uploadType: 'file',
                max: 1,
                colProps: { span: 6 },
              }),
              MyFormItems.UploadImages({
                key: 'construction_commitment_letter',
                title: '施工承诺书',
                uploadType: 'file',
                max: 1,
                colProps: { span: 6 },
              }),
              MyFormItems.UploadImages({
                key: 'other_attachments',
                title: '其他补充附件',
                max: 100,
                uploadType: 'file',
                colProps: { span: 6 },
              }),
              {
                valueType: 'divider',
                fieldProps: {
                  orientation: 'left',
                  children: '重大施工项目',
                },
              },
              {
                valueType: 'formList',
                dataIndex: 'major_construction',
                // title: '重大施工项目',
                fieldProps: {
                  copyIconProps: false,
                  // deleteIconProps: false,
                },
                formItemProps: {
                  ...rulesHelper.array,
                  wrapperCol: { span: 24 },
                },
                initialValue: [
                  {
                    sign_party: null,
                    counterparty_type: null,
                    counterparty: null,
                  },
                  {
                    sign_party: null,
                    counterparty_type: null,
                    counterparty: null,
                  },
                ],
                columns: [
                  {
                    valueType: 'group',
                    title: '',
                    colProps: { span: 24 },
                    columns: [
                      {
                        title: '重大施工内容',
                        key: 'name',
                        colProps: { span: 12 },
                        // formItemProps: { ...rulesHelper.text },
                      },
                      MyFormItems.UploadImages({
                        key: 'draw',
                        title: '施工图纸',
                        uploadType: 'file',
                        max: 1,
                        colProps: { span: 6 },
                      }),
                      MyFormItems.UploadImages({
                        key: 'certificate',
                        title: '执业证件',
                        uploadType: 'file',
                        max: 1,
                        colProps: { span: 6 },
                      }),
                    ],
                  },
                ],
              },
              {
                title: '备注',
                key: 'renovation_remark',
                valueType: 'textarea',
                colProps: { span: 24 },
              },
            ]}
          />
        </div>
      </ProCard>
    </MyPageContainer>
  );
}
