import React, { Component, useMemo, useState, useEffect } from 'react';
import {
  Form,
  Icon,
  Input,
  Button,
  DatePicker,
  Select,
  Card,
  Row,
  Col,
  Pagination,
  Alert,
  Table,
  Avatar,
  Radio,
  Modal,
  Descriptions,
} from 'antd';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import { func } from 'prop-types';
import request from '@/utils/request';
import apis from '@/services/apis';
// const { Option } = Select;

const Layout = prop =>
prop.simple ? (
    prop.children
  ) : (
    <Card title="意向客户" headStyle={{ textAlign: 'left' }}>
      {prop.children}
    </Card>
  );

const UserBehavior = props => {
  const { simple = false } = props;
  const [data, setData] = useState({ records: [] });
  const [buildingId, setBuildingId] = useState();

  useEffect(() => {
    IntentionUsers({ buildingId:buildingId,pageNum: 1, pageSize: 5 });
    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
  }, [buildingId]);
  function IntentionUsers(params) {
    request({
      ...apis.indexEcharts.intentionUsers,
      params: { ...params },
    }).then(data => {
      console.log(data, 'datadata');
      setData(data);
    });
  }

  // 分页
  function onChange(pageNum) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    IntentionUsers({ pageNum: pageNum, pageSize: 5, buildingId });
  }

  const columns = [
    {
      title: '用户姓名',
      dataIndex: 'personName',
      key: 'personName',
      width: '25%',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: '25%',
    },
    {
      title: '意向楼盘',
      dataIndex: 'buildingName',
      key: 'buildingName',
      width: '25%',
    },
    {
      title: '意向值',
      dataIndex: 'intention',
      key: 'intention',
      width: '25%',
    },
  ];

  function handleBuildingChange(e) {
    console.log(e, '--eeeeww---');
    // IntentionUsers({ pageNum: 1, pageSize: 5, buildingId: e });
    setBuildingId(e);
  }

  //意向客户导出
  function exportIntentionUsers() {
    request({
      ...apis.indexEcharts.exportIntentionUsers,
      params: { buildingId },
    }).then(data => {
      if (!data) {
        return;
      }
      const url = window.URL.createObjectURL(new Blob([data]));
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '意向客户.xlsx');
      document.body.append(link);
      link.click();
    });
  }

  return (
    <Layout simple={simple}>
      <div>
        <Row>
          <Col span={22}>
            <BuildingSelect
              value={buildingId}
              // slot="action"
              // value={buildingId}
              onChange={e => handleBuildingChange(e)}
            ></BuildingSelect>
          </Col>
          <Col span={2} style={{ textAlign: 'right' }}>
            {/* <Button type="primary" onClick={exportIntentionUsers}>
              导出
            </Button> */}
          </Col>
        </Row>
        <Table
          rowKey="IntentionalCustomers"
          dataSource={data.records}
          columns={columns}
          style={{ marginTop: '15px' }}
          pagination={{
            total: data.total,
            defaultPageSize: 5,
            current: data.current || 1,
            onChange: e => onChange(e),
          }}
          scroll={{ y: 500 }}
        />
      </div>
    </Layout>
  );
};

export default UserBehavior;
