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 CitySelect from '@/components/SelectButton/CitySelect2';
import BuildSelect from '@/components/SelectButton/BuildSelect';
import TimeSelect from '../../compents/TimeSelect';
// import StatsChart from './component/StatsChart';
import AuthButton from '@/components/AuthButton';


const detailData = props => {
  const [buildingId, setBuildingId] = useState('');
  const [time, setTime] = useState();

  const [data, setData] = useState({});
  useEffect(() => {
    if (time) {
      getTableData({
        buildingId: buildingId || undefined,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    }
  }, [buildingId, time]);
  const onTimeChange = e => {
    console.log(e, 'onTimeChange');
    setTime(e);
    // getData({ startDate: e[0], endDate: e[1] });
  };
  //获取表格数据
  const getTableData = params => {
    request({ ...apis.stats.tableList, params: { ...params } }).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({
      buildingId: buildingId || undefined,
      startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
      endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      pageNum: pagination.current,
      sortField: sorter.columnKey,
      sortOrder: sorter.order,
    });
    // {current:pagination.current, sorter.columnKey, sorter.order})
  };

  //导出
 const exportBuildingStats = () => {
    request({
      ...apis.stats.buildingExport,
      params: {
        buildingId: buildingId || undefined,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      },
    })
      .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 toDetailPage = (record) => {
    router.push({
      pathname: '/statistics/building/detail',
      query: {
        buildingId: record.buildingId,
        buildingName: record.buildingName
      },
    });
  }

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'buildingName',
      key: 'buildingName',
    },
    {
      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,
    },

    {
      title: '成交量',
      dataIndex: 'cjNum',
      key: 'cj_num',
      sorter: true,
    },

    {
      title: '详情',
      render: (_, record) => (
        <Button type="link" onClick={() => toDetailPage(record)}>
          查看详情
        </Button>
      ),
    },
  ];

  return (
    <Card
      title={<BuildSelect value={buildingId} onChange={e => setBuildingId(e)} all />}
      headStyle={{ textAlign: 'left' }}
      extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      {/* <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 }}
        onChange={handleTableChange}
        scroll={{ y: 500 }}
      ></Table>
    </Card>
  );
};
export default detailData;
