import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Button,
  Icon,
  Select,
  Card,
  Radio,
  DatePicker,
  message,
  Switch,
  InputNumber,
} from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import FileUpload from '@/components/XForm/FileUpload';
import XForm, { FieldTypes, createForm } from '@/components/XForm';
import apis from '@/services/apis';
import BuildSelect2 from '@/components/SelectButton/BuildSelect2';
import LivePlatSelect from '@/components/SelectButton/LivePlatSelect';
import CitySelect3 from '@/components/SelectButton/CitySelect3';
import ImageUpload from '@/components/XForm/ImageUpload';
import request from '@/utils/request';
import Navigate from '@/components/Navigate';
import ConsultantSelect from '@/components/SelectButton/consultantSelect';
import ChannelSelect from '@/components/SelectButton/channelSelect';

const { Option } = Select;
const { TextArea } = Input;

const header = props => {
  console.log(props);

  const { id, buildingId } = props.location.query;

const [loading,setLoading] = useState(false)
  const [data, setData] = useState({});
  const [apartmentTypeList, setApartmentTypeList] = useState([]);

  // 查询详情
  const getData = () => {
    request({ ...apis.customer.getStatusChange, urlData: { id } }).then(res => {
      //   data.videoUrl = [data.videoUrl];
      if (res.channelCustomer) {
        res.channelId = res.channelCustomer.channelId;
      }

      setData({ ...res });
    });
  };

  const getApartmentType = () => {
    const params = { apartmentType: 'apart' };
    request({
      ...apis.building.buildingApartment,
      urlData: { id: buildingId },
      params,
    })
      .then(data => {
        setApartmentTypeList(data || []);
      })
      .catch(err => {
        message.info(err.msg || err.message);
      });
  };
  useEffect(() => {
    getApartmentType();
    if (id) {
      getData(id);
    }
  }, []);

  const cancelPage = () => {
    router.go('-1');
  };

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log(values, 'values');
      if (!err) {
        const { status } = values;
        // values.isNewHouse =  values.isNewHouse?1:0
setLoading(true)
        if (status == 3) {
          //认筹
          const params = {
            customerId: id,
            customerPreparatory: {
              ...values,
              customerId: id,
            },
          };
          request({
            ...apis.customer.preparatory,
            data: params,
          })
            .then(data => {
              message.info('认筹成功');
              setLoading(false)
                cancelPage();
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        } else if (status == 4) {
          const params = {
            customerId: id,
            customerSignatory: {
              ...values,
              customerId: id,
            },
          };
          request({
            ...apis.customer.signatory,
            data: params,
          })
            .then(data => {
              message.info('认筹成功');
              setLoading(false)
                cancelPage();
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        }else if (status == 5) {
            const params = {
              customerId: id,
              customerSignatory: {
                ...values,
                customerId: id,
              },
            };
            request({
              ...apis.customer.commission,
              data: params,
            })
              .then(data => {
                message.info('结佣成功');
                setLoading(false)
                  cancelPage();
              })
              .catch(err => {
                message.info(err.msg || err.message);
              });
          }
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <Card>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="变更状态为">
          {getFieldDecorator('status', {
            // initialValue: data.status,
            rules: [{ required: true, message: ' 请选择变更状态' }],
          })(
            <Select>
              <Option value={3}>认筹</Option>
              <Option value={4}>签约</Option>
              <Option value={5}>结佣</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="客户姓名">
          {getFieldDecorator('name', {
            initialValue: data.name,
          })(<Input placeholder="客户姓名" />)}
        </Form.Item>
        {data.channelId && (
          <Form.Item label="归属渠道">
            {getFieldDecorator('channelId', {
              initialValue: data.channelId,
            })(<ChannelSelect placeholder="归属渠道" disabled />)}
          </Form.Item>
        )}
        <Form.Item label="内场接待">
          {getFieldDecorator('realtyConsultant', {
            initialValue: data.realtyConsultant,
          })(<ConsultantSelect placeholder="内场接待" buildingId={buildingId} />)}
        </Form.Item>

        {props.form.getFieldValue('status') == 3 && (
          <>
            <Form.Item label="认筹日期">
              {getFieldDecorator('preparatoryData')(<DatePicker />)}
            </Form.Item>
            <Form.Item label="备注">
              {getFieldDecorator('remark')(<TextArea placeholder="客户描述" rows={10} />)}
            </Form.Item>
          </>
        )}

        {props.form.getFieldValue('status') == 4 && (
          <>
            <Form.Item label="业绩分成人">
              {getFieldDecorator('dividendsName', {})(<Input placeholder="业绩分成人" />)}
            </Form.Item>
            <Form.Item label="比例">
              {getFieldDecorator('proportion', {})(<Input placeholder="比例" />)}
            </Form.Item>
            <Form.Item label="户型">
              {getFieldDecorator('houseType', {
                // rules: [{ required: true, message: ' 请选择户型' }],
              })(
                <Select>
                  {apartmentTypeList?.map(x => {
                    return <Option key={x.apartmentId} value={x.apartmentId}>{x.apartmentName}</Option>;
                  })}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="房号">
              {getFieldDecorator('houseInfo', {})(<Input placeholder="房号" />)}
            </Form.Item>
            <Form.Item label="签约日期">
              {getFieldDecorator('successDate', {})(<DatePicker />)}
            </Form.Item>
            <Form.Item label="成交金额">
              {getFieldDecorator('price', {})(<Input suffix="万" />)}
            </Form.Item>
            <Form.Item label="备注">
              {getFieldDecorator('remark')(<TextArea placeholder="客户描述" rows={10} />)}
            </Form.Item>
          </>
        )}

{props.form.getFieldValue('status') == 5 && (
          <>
            <Form.Item label="业绩分成人">
              {getFieldDecorator('dividendsName', {})(<Input placeholder="业绩分成人" />)}
            </Form.Item>
            <Form.Item label="比例">
              {getFieldDecorator('proportion', {})(<Input placeholder="比例" />)}
            </Form.Item>
            <Form.Item label="户型">
              {getFieldDecorator('houseType', {
                // rules: [{ required: true, message: ' 请选择户型' }],
              })(
                <Select>
                  {apartmentTypeList?.map(x => {
                    return <Option key={x.apartmentId} value={x.apartmentId}>{x.apartmentName}</Option>;
                  })}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="房号">
              {getFieldDecorator('houseInfo', {})(<Input placeholder="房号" />)}
            </Form.Item>
            <Form.Item label="结佣日期">
              {getFieldDecorator('successDate', {})(<DatePicker />)}
            </Form.Item>
            <Form.Item label="成交金额">
              {getFieldDecorator('price', {})(<Input suffix="万" />)}
            </Form.Item>
            <Form.Item label="备注">
              {getFieldDecorator('remark')(<TextArea placeholder="客户描述" rows={10} />)}
            </Form.Item>
          </>
        )}

        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary" htmlType="submit" loading={loading} style={{ marginRight: '20px' }}>
            确定
          </Button>
          <Button onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

const statusChange = Form.create({ name: 'header' })(header);

export default statusChange;
