import React, { useEffect, useState } from 'react';
import { Cascader, Col, Form, Input, message, Modal, Row } from 'antd';
import { cityQuery } from '@/services/ReportingManagement';
import { createCommunity, updateCommunity } from '@/services/reporting/community';

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

const { TextArea } = Input;

/**
 * 小区管理 - 编辑页面
 * @param props
 * @constructor
 */
const Edit: React.FC<editProps> = (props) => {
  const { params, visible, editCallback } = props;
  const [form] = Form.useForm();
  const [cityList, setCityList] = useState([]);

  useEffect(() => {
    //  获取城市列表
    cityQuery({ q: 'tree' }).then((res) => {
      if (res?.code === 0) {
        const arr = res?.data?.list;
        setCityList(arr);
      }
    });
  }, []);
  const onOk = () => {
    form.validateFields().then((values) => {
      const data = { ...values };
      if (params) {
        data.record_id = params.record_id;
        const cityInfo = values.city
          .split('')
          .filter((x: { charCodeAt: () => number }) => x.charCodeAt() != 32)
          .join('')
          .split('/');
        data.province = cityInfo[0];
        data.city = cityInfo[1];
        data.district = cityInfo[2];
        updateCommunity(data)
          .then((res) => {
            if (res.code === 0) {
              message.success('新增成功');
              editCallback();
            } else {
              message.error(res?.message);
              editCallback();
            }
          })
          .catch((e) => {
            message.error(e?.message);
            editCallback();
          });
      } else {
        data.province = values.city[0];
        data.city = values.city[1];
        data.district = values.city[2];
        createCommunity(data)
          .then((res) => {
            if (res.code === 0) {
              message.success('编辑成功');
              editCallback();
            } else {
              message.error(res?.message);
              editCallback();
            }
          })
          .catch((e) => {
            message.error(e?.message);
            editCallback();
          });
      }
    });
  };

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

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  const formItemLayout24 = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="name"
              label="小区名称"
              rules={[{ required: true, message: '请输入小区名称' }]}
              initialValue={params?.name}
            >
              <Input placeholder="请输入小区名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="city"
              label="省市区"
              rules={[{ required: true, message: '请选择省市区' }]}
              initialValue={
                params && JSON.stringify(params) !== '{}'
                  ? `${params?.province}` +
                    ' / ' +
                    `${params?.city}` +
                    ' / ' +
                    `${params?.district}`
                  : ''
              }
            >
              <Cascader
                options={cityList}
                fieldNames={{ label: 'name', value: 'name', children: 'children' }}
                placeholder="请选择省市区"
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="address"
              label="详细地址"
              initialValue={params?.address}
              rules={[{ required: true, message: '请输入详细地址' }]}
            >
              <TextArea rows={3} placeholder="请输入详细地址" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
