import {
  MyFormItems,
  MyModalFormProps,
  MyPageContainer,
  rulesHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { GoodsReleasesPassedTypeEnum } from '@/gen/Enums';
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
import { useNavigate, useSearchParams } from '@umijs/max';
import { Form, Space } from 'antd';
import { useEffect, useState } from 'react';
import Review from '../modals/Review';

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 loadShow = () => {
    Apis.GoodsReleases.GoodsReleases.Show({ id: Number(id) }).then((res) => {
      setShow(res?.data);
      form.setFieldsValue(res?.data); // 编辑赋值
    });
  };

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

  return (
    <MyPageContainer
      title={
        <Space
          style={{ cursor: 'pointer' }}
          onClick={() => {
            navigate(-1);
          }}
        >
          {/* <LeftCircleOutlined size={34} /> */}
          {title}
        </Space>
      }
      enableTabs={false}
      tabKey="goods_releases_review"
      tabLabel={title}
    >
      <ProCard>
        <div style={{ width: 900, minHeight: '83vh', margin: '0 auto' }}>
          <BetaSchemaForm<ApiTypes.GoodsReleases.GoodsReleases.Update>
            {...MyModalFormProps.props}
            title={title}
            // 基础表单
            layoutType="Form"
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            labelAlign="left"
            width="900px"
            form={form}
            submitter={{
              render: () => {
                return [<Review item={data} key="review" />];
              },
            }}
            columns={[
              {
                colProps: { span: 24 },
                title: '选择房屋',
                key: 'asset_houses_id',
                formItemProps: { ...rulesHelper.text },
                renderFormItem: () => {
                  return (
                    <ProCard bordered>
                      <div>已选择房屋：{data?.asset_house?.full_name}</div>
                    </ProCard>
                  );
                },
              },
              {
                title: '申请人',
                key: 'apply_name',
                colProps: { span: 8 },
                formItemProps: { ...rulesHelper.text },
              },
              {
                title: '申请人电话',
                key: 'apply_phone',
                colProps: { span: 8 },
                fieldProps: {
                  maxLength: 11,
                },
                formItemProps: { ...rulesHelper.text },
              },
              MyFormItems.EnumRadio({
                key: 'passed_type',
                title: '装修类型',
                valueEnum: GoodsReleasesPassedTypeEnum,
                colProps: { span: 8 },
                formItemProps: { ...rulesHelper.text },
              }),
              {
                valueType: 'formList',
                dataIndex: 'goods',
                title: '添加放行物品',
                formItemProps: { ...rulesHelper.array },
                fieldProps: {
                  copyIconProps: false,
                  initialValue: [
                    {
                      number: 1,
                    },
                  ],
                  creatorRecord: {
                    number: 1,
                  },
                },
                columns: [
                  {
                    valueType: 'group',
                    colProps: { span: 24 },
                    columns: [
                      {
                        key: 'name',
                        title: '物品名称',
                        colProps: { span: 8 },
                        formItemProps: { ...rulesHelper.text },
                      },
                      {
                        key: 'number',
                        title: '数量',
                        valueType: 'digit',
                        colProps: { span: 3 },
                        formItemProps: { ...rulesHelper.number },
                      },
                      {
                        key: 'remark',
                        title: '物品备注',
                        colProps: { span: 13 },
                      },
                    ],
                  },
                ],
              },
              {
                title: '放行日期',
                key: 'passed_time',
                valueType: 'date',
                colProps: { span: 24 },
                formItemProps: { ...rulesHelper.text },
              },
              {
                title: '其他备注',
                key: 'remark',
                valueType: 'textarea',
                colProps: { span: 24 },
              },
            ]}
          />
        </div>
      </ProCard>
    </MyPageContainer>
  );
}
