import React, { Component, useState, useEffect } from 'react';
import { Card, Table, Button } from 'antd';
import Navigate from '@/components/Navigate';
import EChart from '../../../../components/EchartsTest/EChart';
import request from '../../../../utils/request';
import apis from '../../../../services/apis';
import moment from 'moment';
import router from 'umi/router';

const NewUsers = props => {
  const { params } = props;
  const [data, setData] = useState({ records: [] });

  const toSharePersonNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/sharePersonNum',
        query: {
          queryDate: rowData.date,
          buildingId: params.buildingId || undefined,
          activityType: params.activityType || undefined,
        },
      });
      return;
    }
  };

  const toShareNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/shareNum',
        query: {
          queryDate: rowData.date,
          buildingId: params.buildingId || undefined,
          activityType: params.activityType || undefined,
        },
      });
      return;
    }
  };

  const toAddVisitPersonNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/visitPersonNum',
        query: {
          queryDate: rowData.date,
          buildingId: params.buildingId || undefined,
          activityType: params.activityType || undefined,
        },
      });
      return;
    }
  };

  const toAddVisitNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/visitNum',
        query: {
          queryDate: rowData.date,
          buildingId: params.buildingId || undefined,
          activityType: params.activityType || undefined,
        },
      });
      return;
    }
  };

  const toAddRegistNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/addRegistNum',
        query: {
          queryDate: rowData.date,
          buildingId: params.buildingId || undefined,
          activityType: params.activityType || undefined,
        },
      });
      return;
    }
  };

  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '分享人数',
      dataIndex: 'sharePersonNum',
      key: 'sharePersonNum',
      sorter: true,
      render: (text, record) => (
        <Navigate onClick={toSharePersonNum(record)}>{record.sharePersonNum}</Navigate>
      ),
    },
    {
      title: '分享次数',
      dataIndex: 'shareNum',
      key: 'shareNum',
      sorter: true,
      render: (text, record) => <Navigate onClick={toShareNum(record)}>{record.shareNum}</Navigate>,
    },

    {
      title: '访问人数',
      dataIndex: 'visitPersonNum',
      key: 'visitPersonNum',
      sorter: true,
      render: (text, record) => (
        <Navigate onClick={toAddVisitPersonNum(record)}>{record.visitPersonNum}</Navigate>
      ),
    },
    {
      title: '访问次数',
      dataIndex: 'visitNum',
      key: 'visitNum',
      sorter: true,
      render: (text, record) => (
        <Navigate onClick={toAddVisitNum(record)}>{record.visitNum}</Navigate>
      ),
    },
    {
      title: '新增注册用户',
      dataIndex: 'addRegistNum',
      key: 'addRegistNum',
      sorter: true,
      render: (text, record) => (
        <Navigate onClick={toAddRegistNum(record)}>{record.addRegistNum}</Navigate>
      ),
    },
  ];

  useEffect(() => {
    getTableList();
  }, [params]);

  const getTableList = payload => {
    request({
      ...apis.activityDataStatis.tableData,
      params: { ...params, ...payload },
    })
      .then(res => {
        setData(res);
      })
      .catch();
  };

  const exportActivityStats = () => {
    request({ ...apis.activityDataStatis.tableDataExport, params: params })
      .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 handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
    // Desc  和asc
    const sortType =
      sorter.order == 'ascend' ? 'asc' : sorter.order == 'descend' ? 'Desc' : undefined;
    getTableList({
      ...params,
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      sortType: sortType,
      sortField: sorter.columnKey,
    });
  };

  return (
    <Card title="详细数据" headStyle={{ textAlign: 'left' }}>
      {/* <div style={{ textAlign: 'right' }}>
        <Button type="primary" onClick={exportActivityStats}>
          导出
        </Button>
      </div> */}

      <Table
        key="date"
        dataSource={data?.records}
        columns={columns}
        pagination={{ total: data?.total, current: data?.current, pageSize: data?.size }}
        onChange={handleTableChange}
        scroll={{ y: 500 }}
      ></Table>
    </Card>
  );
};

export default NewUsers;
// pagination={{ total: this.state.total}} onChange={this.handleTableChange}
