import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less';
import router from 'umi/router';

import Attribution from './components/attribution'
import IntegralRecord from './components/integralRecord'
import ChangeStatus from './components/changeStatus'


const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

/**
 *
 *
 * @param {*} props
 * @returns
 */
function body(props) {
  const { getFieldDecorator } = props.form

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSource, setDataSource] = useState({ records: [] })

  // 默认私客
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [customerType, setCustomerType] = useState('private')

  // 调整归属 ============  start
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [gVisibleData, setGVisibleData] = useState({ visible: false, customerId: '', realtyConsultant: '' })
  // 调整归属 ============= end

  // 积分记录 ============  start
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [recordVisibleData, setRecordVisibleData] = useState({ visible: false, customerId: '' })
  // 积分记录 ============= end

  // 变更状态 ============  start
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [statusVisibleData, setStatusVisibleData] = useState({ visible: false, customerId: '', status: '' })
  // 变更状态 ============= end

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList({ pageNumber: 1, pageSize: 10, customerType })
  }, [])

  function getList(params) {
    // 网路请求
    request({ ...apis.customer.customerRecommend, params: { ...params } }).then(res => {
      setDataSource(res)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={err}
        type="error"
        showIcon
      />
    })
  }

  function displayNone() {
    setRecordVisibleData({ visible: false, customerId: '' })
    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
    setStatusVisibleData({ visible: false, customerId: '', status: '' })
  }

  // 提交事件
  function handleSubmit(e) {
    displayNone()


    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: 1, pageSize: 10, customerType, ...values })
      }
    });
  }

  // Change 事件
  function handleSelectChange(e) {
    // eslint-disable-next-line no-console
    console.log(e)
  }

  // 分页
  function onChange(pageNum) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    getList({ pageNumber: pageNum, pageSize: 10, customerType })
  }

  // 私客/公客切换
  function radioButtonHandleSizeChange(e) {
    displayNone()

    const { value } = e.target
    setCustomerType(value)
    getList({ pageNumber: 1, pageSize: 10, customerType: value })
  }

  // 这里有个 Bug， 就是 Modal 弹框，会联动出现， 比如 我点击 调整归属的Model弹框， 那么 积分记录的Model弹框莫名其妙的也显示了
  // 所有这里临时解决方法是，弹出一个Modal对话框的时候，把其他的对话框给隐藏

  function showGM(record) {
    setGVisibleData({ visible: true, customerId: record.customerId, realtyConsultant: record.realtyConsultant })
    setRecordVisibleData({ visible: false, customerId: '' })
    setStatusVisibleData({ visible: false, customerId: '' })
  }

  function showRecord(record) {
    setRecordVisibleData({ visible: true, customerId: record.customerId })
    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
    setStatusVisibleData({ visible: false, customerId: '' })
  }

  function showStatus(record) {
    setRecordVisibleData({ visible: false, customerId: '' })
    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
    setStatusVisibleData({ visible: true, customerId: record.customerId, status: record.status })
  }
  function toCustomerDateil(record) {
    router.push({
      pathname: '/customer/customerlist/customerDetail',
      query: {
        id: record.customerId,
      },
    });
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'picture',
      key: 'picture',
      render: (_, record) => <Avatar shape="square" src={customerType === 'private' ? record.picture : record.avatarurl} size={64} icon="user" />,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><sapn>{customerType === 'private' ? record.name : record.nickname}</sapn></>,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><sapn>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</sapn></>,
    },
    {
      title: '置业顾问',
      dataIndex: 'consultantName',
      key: 'consultantName',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => (
        <>
          <sapn>{record.consultantName}</sapn>
          <br />
          <sapn>{record.consultTel}</sapn>
        </>
      ),
    },
    {
      title: '客户状态',
      dataIndex: 'reportRecommendStatus',
      key: 'reportRecommendStatus',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><sapn>{record.reportRecommendStatus === 0 ? '为报备' : record.reportRecommendStatus === 1 ? '报备' : record.reportRecommendStatus === 2 ? '推荐' : ''}</sapn></>,
    },
    {
      title: '操作',
      dataIndex: 'customerId',
      key: 'customerId',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => (
        <>
          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showStatus(record)}>变更状态</Button>
          &nbsp;&nbsp;
          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showGM(record)}>调整归属</Button>
          <br />
          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => toCustomerDateil(record)}>查看详情</Button>
          &nbsp;&nbsp;
          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showRecord(record)}>积分记录</Button>
        </>
      ),
    },
  ]

  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <Select style={{ width: '180px' }} placeholder="意向项目" onChange={handleSelectChange}>
              <Option value="male">male</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('reportRecommendStatus')(
            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
              <Option value={0}>未报备</Option>
              <Option value={1}>报备</Option>
              <Option value={2}>推荐</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="姓名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tel')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="电话"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('consultName')(
            <Input placeholder="置业顾问" />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('consultTel')(
            <Input placeholder="置业顾问电话" />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" >
            查询
          </Button>
        </Form.Item>
      </Form>

      <div style={{ marginTop: '20px', marginBottom: '20px' }}>
        <Radio.Group value={customerType} onChange={radioButtonHandleSizeChange} buttonStyle="solid">
          <Radio.Button value="private">私客</Radio.Button>
          <Radio.Button value="public">公客</Radio.Button>
        </Radio.Group>
      </div>
      <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />

      {/* 调整归属 */}
      <Attribution visibleData={gVisibleData} />

      {/* 积分记录 */}
      <IntegralRecord visibleData={recordVisibleData} />

      {/* 变更状态 */}
      <ChangeStatus visibleData={statusVisibleData} />
    </>
  );
}

const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody
