import React, { useEffect, useState } from 'react';
import { Col, Form, Input, InputNumber, Modal, Row, Select, message } from 'antd';
import UploadCommon from '@/components/UploadImage';
import { createReportHome, editReportHome } from '@/services/reportHome';
import { queryCommunity } from '@/services/reporting/community';

interface userEditPros {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

const { TextArea } = Input;

/**
 * 报备编辑页面
 * @param props
 * @constructor
 */
const Edit: React.FC<userEditPros> = (props) => {
  const { visible, editCallback, params } = props;
  const [form] = Form.useForm();
  const [filesList, setFilesList] = useState([]);
  const [communityList, setCommunityList] = useState([]);

  //  小区列表
  const getCommunityList = () => {
    queryCommunity({ q: 'list' }).then((res) => {
      setCommunityList(res.data.list || []);
    });
  };

  useEffect(() => {
    getCommunityList();
  }, []);

  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = { ...values };
        if (values.success_probability_analysis) {
          data.success_probability_analysis = values.success_probability_analysis;
        }
        if (values.files && values.files.length) {
          data.files = filesList;
        }
        if (params) {
          data.record_id = params.record_id;
          editReportHome(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error('编辑失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        } else {
          createReportHome(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('新增成功');
                editCallback();
              } else {
                message.error('新增失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        }
      }
    });
  };

  // 上传图片回调
  const onUploadChange = (files: any) => {
    if (files && files.length) {
      const arr: any = [];
      files.forEach((el: any) => {
        arr.push({ url: el?.response?.data?.url || '' });
      });
      setFilesList(arr);
    }
  };

  const onCancel = () => {
    editCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 15,
    },
  };

  const formItemLayoutTwo = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 19,
    },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="community_id"
              label="小区名称"
              rules={[{ required: true, message: '请输入小区名称' }]}
              initialValue={params?.community_id || undefined}
            >
              <Select
                placeholder="请选择小区名称"
                options={communityList}
                fieldNames={{ label: 'name', value: 'record_id' }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="building"
              label="楼栋号"
              rules={[{ required: true, message: '请输入楼栋号' }]}
              initialValue={params?.building || ''}
            >
              <Input placeholder="请输入楼栋号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="unit"
              label="单元"
              rules={[{ required: true, message: '请输入单元' }]}
              initialValue={params?.unit || ''}
            >
              <Input placeholder="请输入单元" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="doorplate"
              label="门牌号"
              rules={[{ required: true, message: '请输入门牌号' }]}
              initialValue={params?.doorplate || ''}
            >
              <Input placeholder="请输入门牌号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="address"
              label="详细地址"
              rules={[{ required: true, message: '请输入详细地址' }]}
              initialValue={params?.address || ''}
            >
              <Input placeholder="请输入详细地址" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="air_conditioner_type"
              label="空调类型"
              rules={[{ required: true, message: '请选择空调类型' }]}
              initialValue={params?.air_conditioner_type || undefined}
            >
              <Select
                placeholder="请选择空调类型"
                options={[
                  {
                    value: '五恒一体机',
                    label: '五恒一体机',
                  },
                  {
                    value: '家用分风系统',
                    label: '家用分风系统',
                  },
                  {
                    value: '商用分风系统',
                    label: '商用分风系统',
                  },
                  {
                    value: '分体式五恒',
                    label: '分体式五恒',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="proprietor_name"
              label="业主姓名"
              rules={[{ required: true, message: '请输入业主姓名' }]}
              initialValue={params?.proprietor_name || ''}
            >
              <Input placeholder="请输入业主姓名" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="phone"
              label="联系方式"
              rules={[{ required: true, message: '请输入联系方式' }]}
              initialValue={params?.phone || ''}
            >
              <Input placeholder="请输入联系方式" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="customer_type"
              label="客户分类"
              rules={[{ required: true, message: '请选择客户分类' }]}
              initialValue={params?.customer_type || undefined}
            >
              <Select
                placeholder="请选择客户分类"
                options={[
                  {
                    value: 'A',
                    label: 'A',
                  },
                  {
                    value: 'B',
                    label: 'B',
                  },
                  {
                    value: 'C',
                    label: 'C',
                  },
                  {
                    value: 'D',
                    label: 'D',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="success_probability"
              label="成功几率"
              rules={[{ required: true, message: '请输入成功几率' }]}
              initialValue={params?.success_probability || 0}
            >
              <InputNumber
                min={0}
                max={100}
                placeholder="请输入成功几率"
                addonAfter="%"
                style={{ width: '235px' }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayoutTwo}
              name="success_probability_analysis"
              label="成功几率分析"
              initialValue={params?.success_probability_analysis || ''}
            >
              <TextArea rows={4} placeholder="请输入成功几率分析" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="follow_people"
              label="跟进人"
              rules={[{ required: true, message: '请输入跟进人' }]}
              initialValue={params?.follow_people || ''}
            >
              <Input placeholder="请输入跟进人" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayoutTwo}
              name="files"
              label="上传图片"
              initialValue={params?.files || []}
            >
              <UploadCommon
                value={params?.files ? params?.files : []}
                onChange={onUploadChange}
                maxCount={9}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
