import React, { useState, useEffect } from 'react';
import {
  Form,
  Icon,
  Input,
  Button,
  DatePicker,
  Select,
  Card,
  Row,
  Col,
  Pagination,
  Alert,
  Table,
  Avatar,
  Radio,
  Upload,
  message,
  notification,
} from 'antd';
import ImageUpload from '@/components/XForm/ImageUpload';
import moment from 'moment';
import AuthButton from '@/components/AuthButton';
import request from '@/utils/request';
import apis from '@/services/apis';
import { router } from 'umi';

import Attribution from './components/attribution';
import BuildingSelect from '@/components/SelectButton/BuildSelect2';
import ConsultantSelect from '@/components/SelectButton/consultantSelect';
import ChannelSelect from '@/components/SelectButton/channelSelect';

const { TextArea } = Input;

const tailFormItemLayout = {
  labelCol: {
    xs: { span: 20 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 16 },
  },
};

const openNotificationWithIcon = (type, message) => {
  notification[type]({
    message,
    description: '',
  });
};

function body(props) {
  const { getFieldDecorator } = props.form;

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visibleData, setVisibleData] = useState({
    visible: false,
    customerId: '',
    realtyConsultant: '',
    buildingId: '',
  });

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({});

  const { id } = props.location.query;

  if (id !== '') {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      getById(id);
    }, []);
  }

  // 获取详情信息
  function getById(currentId) {
    request({ ...apis.customer.getDetail, urlData: { id: currentId } }).then(res => {
      // res.reportDate = moment(res.reportDate)
      if (res) {
        let channelCustomer = {};
        if (res.channelCustomer) {
          channelCustomer.channelId = res.channelCustomer.channelId;
          channelCustomer.remark = res.channelCustomer.remark;
        }
        if (res.customerVisit) {
          channelCustomer.imageUrl = res.customerVisit.imageUrl;
          // channelCustomer.remark=res.channelCustomer.remark
        }
        channelCustomer.name=res.name||res.channelCustomer?.name
        setData(res);
        props.form.setFieldsValue({ ...res, ...channelCustomer });
      }
    });
  }

  function submitDate(data) {
    // props.form.setFieldsValue(res)
    console.log(data, 'data');
    if (data.status == 1) {
      const params = {
        auditResult: data.status,
        channelCustomerId: id,
        realtyConsultant: props.form.getFieldValue('realtyConsultant'),
        name: props.form.getFieldValue('name'),
        customerVisit: {
          imageUrl: props.form.getFieldValue('imageUrl'),
        },
        remark: props.form.getFieldValue('remark'),
      };

      request({ ...apis.customer.auto, urlData: { id: id }, data: { ...params } })
        .then(() => {
          // eslint-disable-next-line no-unused-expressions
          openNotificationWithIcon('success', '操作成功');
          router.go(-1);
        })
        .catch(err => {
          // eslint-disable-next-line no-unused-expressions
        });
    } else {
      const params = {
        id:id,
        type:'report'
      };

      request({ ...apis.customer.invalidCustomer,  data: { ...params } })
      .then(() => {
        // eslint-disable-next-line no-unused-expressions
        openNotificationWithIcon('success', '操作成功');
        router.go(-1);
      })
      .catch(err => {
        // eslint-disable-next-line no-unused-expressions
      });
      ;
    }
  }

  // 提交事件
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        submitDate({ status: '1' });
        // submitDate({ ...values })
      }
    });
  }

  return (
    <Card>
      <Form {...tailFormItemLayout} onSubmit={e => handleSubmit(e)} style={{ maxWidth: '1000px' }}>
        {/* <Form.Item label="客户ID" style={{ display: 'none' }}>
          {getFieldDecorator('channelCustomerId')(
            <Input
              placeholder="客户ID"
            />,
          )}
        </Form.Item>*/}
        <Form.Item label="项目ID" style={{ display: 'none' }}>
          {getFieldDecorator('buildingId')(<Input placeholder="项目ID" />)}
        </Form.Item>
        <Form.Item label="意向项目：">
          {getFieldDecorator('buildingId')(
            <BuildingSelect disabled placeholder="意向项目" style={{ width: '100%' }} />,
          )}
        </Form.Item>
        <Form.Item label="客户姓名">
          {getFieldDecorator('name')(<Input placeholder="客户姓名" />)}
        </Form.Item>
        <Form.Item label="归属渠道">
          {getFieldDecorator('channelId')(<ChannelSelect placeholder="归属渠道" disabled />)}
        </Form.Item>
        <Form.Item label="归属置业顾问">
          {getFieldDecorator('realtyConsultant')(
            <ConsultantSelect
              placeholder="归属置业顾问"
              buildingId={props.form.getFieldValue('buildingId')}
            />,
          )}
        </Form.Item>
        <Form.Item label="到访照片">{getFieldDecorator('imageUrl')(<ImageUpload />)}</Form.Item>
        <Form.Item label="备注">
          {getFieldDecorator('remark')(<TextArea placeholder="客户描述" rows={10} />)}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          {data.status === '1' && (
            <>
              <AuthButton name="customer.channel.report">
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </AuthButton>
              <AuthButton name="customer.channel.report">
                <Button
                  type="danger"
                  ghost
                  style={{ marginLeft: '4em' }}
                  onClick={() => submitDate({ status: '2' })}
                >
                  无效
                </Button>
              </AuthButton>
            </>
          )}
          <Button style={{ marginLeft: '4em' }} onClick={() => router.goBack(-1)}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody;
