import React, { useState, useEffect } from 'react';
import { Form, Table, Pagination, Button } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from './style.less';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import moment from 'moment';
import BuildSelect from '../../../components/SelectButton/BuildSelect'

import router from 'umi/router';
import Prompt from 'umi/prompt';

function header(props) {
  /**
   * @param {*} props
   * @returns
   */
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([{}])
  const [tableData, setTableDataData] = useState([{}])
  const [dataConsultant, setDataonsultant] = useState({})
  const [intentionData, setIntentionData] = useState([])
  const [buildingIdValue, setBuildingIdData] = useState()

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getById()
    toLoadIntention()
  }, [])

  function toLoadIntention() {
    const arr = []
    // 意向值
    for (let i = 0; i < intentionData.length; i++) {
      const a = [].concat(
        intentionData.concat([{
          key: i,
          name: `Edward King ${i}`,
          age: 32,
          address: `London, Park Lane no. ${i}`,
        }]),
      )
      arr.push(a)
    }
    setIntentionData(arr)
  }

  // 查询
  const { id } = props.location.query;
  function getById(params) {
    if (id === '' || id === undefined) {
      return
    }
    // eslint-disable-next-line max-len
    request({ ...apis.customer.CustomerRecommendGet, urlData: { id }, params: { ...params, pageNumber: 1, pageSize: 10 } }).then(res => {
      setData(res)
      if (res.visitRecords) {
        setTableDataData(res.visitRecords)
      }
      setDataonsultant(res.geoInfo)
      setIntentionData(res.intentions)
    })
  }
  // 分页
  function onChange(number) {
    if (id === '' || id === undefined) {
      return
    }
    // eslint-disable-next-line max-len
    request({ ...apis.customer.CustomerRecommendGet, urlData: { id }, params: { pageNumber: number, pageSize: 10 } }).then(res => {
      setData(res)
      setTableDataData(res.visitRecords)
      setDataonsultant(res.geoInfo)
    })
  }

  function changBuilding(buildingId) {
    setBuildingIdData(buildingId)
    getById({ pageNumber: 1, pageSize: 10, buildingId: buildingId })
  }

  const columns = [
    {
      title: '访问事件',
      dataIndex: 'activity',
      key: 'activity',
      align: 'center',
    },
    {
      title: '访问内容',
      dataIndex: 'activityName',
      key: 'activityName',
      align: 'center',
    },
    {
      title: '访问时间',
      dataIndex: 'visitTime',
      key: 'visitTime',
      align: 'center',
      render: (_, record) => <span> {moment(record.visitTime).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '停留时间',
      dataIndex: 'visitDuration',
      key: 'visitDuration',
      align: 'center',
      render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration}秒</span>,
    },
  ]
  // 意向
  const intention = [
    {
      title: <span styles={{ color: '#222', fontSize: '24px' }}>项目名称</span>,
      dataIndex: 'name',
      width: '64%',
      render: (_, record) => <span>{record.buildingName}</span>,
    },
    {
      title: <span styles={{ color: '#222', fontSize: '24px' }}>意向值</span>,
      dataIndex: 'address',
      render: (_, record) => <span >{record.intention}</span>,
    },
  ];
  return (
    <>
      <div style={{ textAlign: 'right', marginBottom:'16px'}}>
        <Button onClick={() => router.go(-1)}>返回</Button>
      </div>

      <div className={styles.cardBox}>
        <div className={styles.rightBox}>
          <p className={styles.tit}>客户信息</p>
          <div className={styles.flexBox}>
            <img className={styles.touxiang} src={data.picture && data.picture} />
            <div className={styles.right}>
              <p className={styles.rightItem}>用户名称：{data.name}</p>
              <p className={styles.rightItem}>手机号码：{data.phone}</p>
              <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
            </div>
            <div className={styles.Centered}>
              <p>访问时长：{data.duration}秒</p>
              <p>访问次数：{data.visitTimes}次</p>
              <p className={styles.rightItem}>客户描述：{data.describe}</p>
              {/* <p>预约人数：{ data.visiteNum }</p> */}
            </div>
            <div className={styles.rightCentered}>
              <p >需求类型：{data.demandType}</p>
              <p >价格区间：{data.priceRange}</p>
              <p >物业类型：{data.realtyManageType}</p>
              {/* <p>预约人数：{ data.visiteNum }</p> */}
            </div>
            {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
            <div className={styles.rightInfo}>
              <p className={styles.rightItem}>国家：{dataConsultant && dataConsultant.country}</p>
              <p className={styles.rightItem}>省份：{dataConsultant && dataConsultant.provience}</p>
              <p className={styles.rightItem}>城市：{dataConsultant && dataConsultant.city}</p>
              <p className={styles.rightItem}>来源渠道：{data.personFrom ? data.personFrom : "其他"}</p>
              {/* <p className={styles.rightItem}>详细信息：</p> */}
              {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */}
              {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
            </div>
          </div>
        </div>
      </div>
      <br></br>
      <div className={styles.cardBox}>
        <div className={styles.rightBoxCentre}>
          <p className={styles.tit}>置业顾问信息</p>
          <div>
            <img className={styles.touxiangphoto} src={data.consultant && data.consultant.photo} />
            <p >{data.consultant && data.consultant.userName}</p>
          </div>
          <div className={styles.rightphone}>
            {/* <p className={styles.infoItem}>姓名：{ data.consultant && data.consultant.name }</p>
          <p className={styles.infoItem}>部门：{ data.consultant && data.consultant.department }</p> */}
            <p className={styles.infoItem}>号码：{data.consultant && data.consultant.phone} </p>
            <p className={styles.infoItem}>岗位：{data.consultant && data.consultant.position}</p>
          </div>
          <div className={styles.left}>
            <p className={styles.infoItem}>公司：{data.consultant && data.consultant.orgName} </p>
            <p className={styles.infoItem}>
              所属项目：
            {
                data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
              }
            </p>
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div className={styles.leftBoxCentre}>
          {/* <div className={styles.tit}>
                <span>项目名称</span>
                <span style={{ marginLeft: '50%' }}>意向值</span>
          </div> */}
          {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
          {/* <div className={styles.infoItem}> */}
          <Table bordered={false} columnWidth={10} columns={intention} dataSource={intentionData} pagination={false} scroll={intentionData && intentionData.length >= 3 ? { y: 240 } : false} width={500} />
          {/* </div> */}
        </div>

      </div>
      <div className={styles.recordBox}>
        <p className={styles.tableName}>访问记录</p>
        <BuildSelect onChange={changBuilding} value={buildingIdValue} />
        <Table dataSource={tableData.records} columns={columns} style={{ marginTop: '15px' }} pagination={{ pageSize: 10, total: tableData.total, onChange }} />
        {/* <Pagination showQuickJumper defaultCurrent={1} total={data.records} onChange={e => changePageNum(e)} current={data.visitRecords.total}/> */}
      </div>
      <Prompt message={location =>
        location.pathname.startsWith("/customer/customerlist")
          ? true
          : (localStorage.removeItem("priPageParams"), localStorage.removeItem("pubPageParams"), localStorage.removeItem("state"))} />
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
