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 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() {
    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.customerInfo, 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: <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>,
    },
  ];

  const {customerInfo={},taRecommendCustomer={},realtyConsultantPerson={},taBuildingList=[],personIntentions=[],personVisitRecords=[]} = data
  const records =buildingIdValue?personVisitRecords?.filter(x=>x.buildingId===buildingIdValue):personVisitRecords
  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}>
        <div >
          <p className={styles.tit}>客户信息</p>
          <div className={styles.flexBox}>
          <div>
              <img className={styles.touxiang} src={data.avatarurl} />
            </div>
            <div className={styles.right}>

              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>用户名称：</span><span>{customerInfo?.name||taRecommendCustomer?.name||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>手机号码：</span><span>{customerInfo?.phone||taRecommendCustomer.phone||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>家庭住址：</span><span>{customerInfo?.homeAddress||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>访问次数：</span><span>{data.visitTimes||'--'}</span></p>

              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>年龄段：</span><span>{customerInfo?.age||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>家庭年收入：</span><span>{customerInfo?.householdIncome||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>已有房产数：</span><span>{customerInfo?.houseNumber||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>预计购房时间：</span><span>{customerInfo?.estimatedPurchaseTime||'--'}</span></p>

        

            </div>
            <div className={styles.Centered}>

                
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>昵称：</span><span>{customerInfo?.nickname||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>性别：</span><span>{customerInfo?.sex||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>工作住址：</span><span>{customerInfo?.firmAddress||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>来源渠道：</span><span>{data.channelName||'--'}</span></p>

              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>职业：</span><span>{customerInfo?.career||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>家庭成员数：</span><span>{customerInfo?.familyNumber||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>已有车辆数：</span><span>{customerInfo?.carNumber||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>购房动机：</span><span>{customerInfo?.motivation||'--'}</span></p>


            </div>
            <div className={styles.rightCentered}>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>客户资讯重点：</span><span>{customerInfo?.consultation||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>客户抗性分析：</span><span>{customerInfo?.resistanceAnalysis||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>对项目认可点：</span><span>{customerInfo?.approval||'--'}</span></p>
              <p className={styles.rightItem}><span style={{width:'20%',minWidth:"100px"}}>备注：</span><span>{customerInfo?.remark||'--'}</span></p>

         
      
            </div>
      
      
           
        </div>
      </div>
        </div>
        {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
        <div className={publicStyle.leftBoxCentre}>
          {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
          <div className={publicStyle.infoItem}>
            <Table
             bordered={false}
             columnWidth={10}
             columns={intention}
            //  dataSource={personIntentions}
             pagination={false}
             key='personId'
            //  scroll={personIntentions?.length >= 3 ? { y: 240 } : false}
    
            />
          </div>
        </div>
      </div>
      <div className={publicStyle.recordBox}>
        <p className={publicStyle.tableName}>访问记录</p>
        <BuildSelect onChange={changBuilding} value={buildingIdValue} />
        <Table
          // dataSource={records}
          columns={columns}
          style={{ marginTop: '15px' }}
          pagination={{ pageSize: 10, total: records?.length, onChange }}
        />
      </div>
    </>
  );
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader;

// <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>
//           </div>
// <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>

//           </div>
