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

const UserBehavior = (props) => {
  const [data, setData] = useState({ records: [] })
  const [buildingId, setBuildingId] = useState('')
  useEffect(() => {
    IntentionUsers({ pageNum: 1, pageSize: 5 })
    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))

  }, [])
  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 })
  }

  // getIntentionUsers({ commit }, payload) {
  //   return new Promise((resolve, reject) => {
  //     request({
  //       ...apis.indexEcharts.intentionUsers,
  //       params: { pageSize: 9999, ...payload }
  //     }).then((data) => {
  //       resolve(data.records)
  //     }).catch((err) => {
  //       reject(err)
  //     })
  //   })
  // },
  // const dataSource = [
  //   {
  //     key: '1',
  //     name: '胡彦斌',
  //     age: 32,
  //     address: '西湖区湖底公园1号',
  //   },
  //   {
  //     key: '2',
  //     name: '胡彦祖',
  //     age: 42,
  //     address: '西湖区湖底公园1号',
  //   },
  // ];
  
  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) {
    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 (
    <>
      <div>
      <p style={{fontSize:'0.12rem',fontWeight:'600'}}>意向客户</p>
        <Row>
          <Col span={22}>
            <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))} value={buildingId}></BuildSelect>
          </Col>
          <Col span={2}>
            <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, onChange: e => onChange(e) }} scroll={{ y: 500 }} />

      </div>

    </>
  )
}

export default UserBehavior;