import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Table, Button } from 'antd';
// import IndexEcharts from './components/indexEcharts';
import router from 'umi/router';
import moment from 'moment';
import request from '@/utils/request';
import apis from '@/services/apis';
import AuthButton from '@/components/AuthButton';

const detailData = props => {
  const {params, buildingId }= props;

  const [data, setData] = useState({});
  useEffect(() => {
    getTableData(params);
  }, [params]);

  //获取表格数据
  const getTableData = params => {
    request({ ...apis.stats.timeTableList, params: { ...params, buildingId: buildingId } }).then(
      res => {
        setData(res);
        // this.setState({ ...this.state, tableData: data.records, total: data.total });
      },
    );
  };

  const handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
    // { startDate: moment(startDate).format('YYYY-MM-DDT00:00:00.000') + 'Z', endDate: moment(endDate).format('YYYY-MM-DDT23:59:59.999') + 'Z', buildingId, pageNum, pageSize, sortField, sortOrder }
    getTableData({
      pageNum: pagination.current,
      sortField: sorter.columnKey,
      sortOrder: sorter.order,
      ...params,
    });
  };

  const exportBuildingStats = () => {
    request({ ...apis.stats.buildingTimeExport, params: { ...params, buildingId: 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();
      })
      .catch(() => {});
  };

  const columns = [
    {
      title: '日期',
      dataIndex: 'createDate',
      key: 'createDate',
    },
    {
      title: '新增客户',
      dataIndex: 'khNum',
      key: 'kh_num',
      sorter: true,
    },
    {
      title: '公客',
      dataIndex: 'gkNum',
      key: 'gk_num',
      sorter: true,
    },
    {
      title: '私客',
      dataIndex: 'skNum',
      key: 'sk_num',
      sorter: true,
    },
    {
      title: '访问人数',
      dataIndex: 'uvNum',
      key: 'uv_num',
      sorter: true,
    },
  ];

  return (
    <Card
      title={'详细数据'}
      headStyle={{ textAlign: 'left' }}

    >
      {/* <div style={{ marginBottom: '20px', textAlign: 'right' }}>
        <AuthButton name="admin.statistical.building.export" noRight={null}>
          <Button type="primary" onClick={exportBuildingStats}>
            导出
          </Button>
        </AuthButton>
      </div> */}
      <Table
        dataSource={data?.records || []}
        columns={columns}
        pagination={{ total: data?.total }}
        key={'createDate'}
        onChange={handleTableChange}
      ></Table>
    </Card>
  );
};
export default detailData;
