import React, { useState, useEffect } from 'react';
import { Form, Table, Pagination, Button } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import publicStyle from './publicStyle.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() {
    if (intentionData) {
      return
    }
    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
    }

    request({ ...apis.customer.cecommendPublic, urlData: { id }, params: { ...params } }).then(res => {
      setTableDataData(res.visitRecords)
      setData(res)
      setDataonsultant(res.geoInfo)
      setIntentionData(res.intentions)
    })
  }
  // 分页
  // 分页
  function onChange(number) {
    if (id === '' || id === undefined) {
      return
    }
    request({ ...apis.customer.cecommendPublic, 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: 'Name',
      dataIndex: 'name',
      width: 200,
      render: (_, record) => <span>{record.buildingName}</span>,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      render: (_, record) => <span style={{ marginLeft: '50%' }}>{record.intention}</span>,
    },
  ];

  return (
    <>
      <div style={{ textAlign: 'right', marginBottom: '16px' }}>
        <Button onClick={() => router.go(-1)}>返回</Button>
      </div>
      <div className={publicStyle.cardBox}>
        {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
        <div className={publicStyle.rightBox}>
          <p className={publicStyle.tit}>客户信息</p>
          <img className={publicStyle.touxiang} src={data.avatarurl && data.avatarurl} />
          <div className={publicStyle.right}>
            <p className={publicStyle.rightItem}>用户名称：{data.name === null ? data.nickname : data.name}</p>
            <p className={publicStyle.rightItem}>手机号码：{data.phone}</p>
            <p className={publicStyle.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
          </div>
          <div className={publicStyle.Centered}>
            <p>访问时长：{data.duration}秒</p>
            <p>访问次数：{data.visitTimes}次</p>
            <p className={publicStyle.rightItem}>来源渠道：{data.personFrom ? data.personFrom : '其他'}</p>
            {/* <p>预约人数：{ data.visiteNum }</p> */}
          </div>
          {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
          <div className={publicStyle.rightInfo}>
            <p className={publicStyle.rightItem}>国家：{data && data.country}</p>
            <p className={publicStyle.rightItem}>省份：{data && data.province}</p>
            <p className={publicStyle.rightItem}>城市：{data && data.city}</p>
            {/* <p className={styles.rightItem}>详细信息：</p> */}
            {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */}
            {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
          </div>
        </div>
        {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
        <div className={publicStyle.leftBoxCentre}>
          <div className={publicStyle.tit}>
            <span>项目名称</span>
            <span style={{ float: 'right' }}>意向值</span>
          </div>
          {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
          <div className={publicStyle.infoItem}>
            <Table columnWidth={10} showHeader={false} columns={intention} dataSource={intentionData} pagination={false} scroll={intentionData.length >= 3 ? { y: 240 } : false} />
          </div>
        </div>
      </div>
      <div className={publicStyle.recordBox}>
        <p className={publicStyle.tableName}>访问记录</p>
        <BuildSelect onChange={changBuilding} value={buildingIdValue} />
        <Table dataSource={tableData.records} columns={columns} style={{ marginTop: '15px' }} pagination={{ pageSize: 10, total: tableData.total, onChange }} />
      </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
