import React, { useState, useEffect } from 'react';
import { Form, Table } 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 router from 'umi/router';


function header(props) {
  /**
   * @param {*} props
   * @returns
   */
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([{ visitRecords: [] }])

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

  // 查询
  function getById(params) {
    const { id } = props.location.query;
    if (id === '' || id === undefined) {
      return
    }
    const { url, method } = apis.customer.CustomerRecommendGet
    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(id)

    request({ url: tempUrl, method, params: { ...params } }).then(res => {
      setData(res)
    })
  }

  const columns = [
    {
      title: '访问事件',
      dataIndex: 'activity',
      key: 'activity',
      align: 'center',
    },
    {
      title: '访问时间',
      dataIndex: 'visitTime',
      key: 'visitTime',
      align: 'center',

    },
    {
      title: '停留时间',
      dataIndex: 'visitDuration',
      key: 'visitDuration',
      align: 'center',
      render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration }秒</span>,
    },
  ]
  return (
    <>
      <div className={styles.cardBox}>
        <div className={styles.leftBox}>
          <p className={styles.tit}>置业顾问信息</p>
          <img className={styles.touxiang} src={ data.consultant && data.consultant.picture } />
          <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.post }</p>
          <p className={styles.infoItem}>号码：{ data.consultant && data.consultant.phone } </p>
          <p className={styles.infoItem}>公司：{ data.consultant && data.consultant.company } </p>
          <p className={styles.infoItem}>
            所属项目：
            {
              data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
            }
          </p>
        </div>
        <div className={styles.rightBox}>
          <p className={styles.tit}>客户信息</p>
          <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}>来访渠道：活动分享</p>
          </div>
          <p className={styles.rightItem}>访问时长：{ data.duration }秒</p>
          <p className={styles.rightItem}>访问次数：{ data.visitTimes }</p>
          <p className={styles.rightItem}>预约人数：{ data.visiteNum }</p>
          <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
          <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p>
          <div className={styles.rightInfo}>
            <p className={styles.rightItem}>国家：{ data.country }</p>
            <p className={styles.rightItem}>省份：{ data.province }</p>
            <p className={styles.rightItem}>城市：{data.city }</p>
            <p className={styles.rightItem}>详细信息：</p>
            <p className={styles.rightItem}>意向项目：{data.intention }</p>
            <p className={styles.rightItem}>价格区间：{data.priceRange }</p>
            <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p>
            <p className={styles.rightItem}>客户描述：{ data.describe }</p>
            <p className={styles.rightItem}>需求类型：{ data.demandType }</p>
            <p className={styles.rightItem}>物业类型：{ data.realtyManageType }</p>
          </div>
        </div>
      </div>
      <div className={styles.recordBox}>
        <p className={styles.tableName}>访问记录</p>
        <Table dataSource={data.visitRecords} columns={columns} pagination={false} />
      </div>

    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
