import React, { Component, useState, useEffect } from 'react';
import { Card, Table, Button } from 'antd';
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';
import Navigate from '@/components/Navigate';
import AuthButton from '@/components/AuthButton';
const ContentTable = props => {
  const { params } = props;
  const [data, setData] = useState({ records: [] });
  const formatDate = (start, end) => {
    const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z';
    const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z';
    return { startDate, endDate };
  };

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

  function getTableList(params) {
    request({
      ...apis.activityDataStatis.activityDetailTableData,
      params: {
        ...params,
      },
    })
      .then(data => {
        console.log(data);
        setData(data);
        // this.setState({ tableData: data.records, total: data.total });
      })
      .catch();
  }

  const toSharePersonNum = rowData => () => {
    // const startDate = moment().subtract(dateType, 'day').toDate()
    // const endDate = new Date()

    if (rowData) {
      router.push({
        pathname: '/statistics/activity/sharePersonNum',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          activityId: rowData.activityId,
          activityType: rowData.activityType,
          activityName: rowData.activityName,
        },
      });
      return;
    }
  };

  const toShareNum = rowData => () => {
    // const startDate = moment().subtract(dateType, 'day').toDate()
    // const endDate = new Date()
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/shareNum',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          activityId: rowData.activityId,
          activityType: rowData.activityType,
          activityName: rowData.activityName,
        },
      });
      return;
    }
  };

  const toAddRegistNum = rowData => () => {
    // const startDate = moment().subtract(dateType, 'day').toDate()
    // const endDate = new Date()
    // console.log(rowData, 'rowData')
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/addRegistNum',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          activityId: rowData.activityId,
          activityType: rowData.activityType,
          activityName: rowData.activityName,
        },
      });
      return;
    }
  };

  const toAddVisitPersonNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/visitPersonNum',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          activityId: rowData.activityId,
          activityType: rowData.activityType,
          activityName: rowData.activityName,
        },
      });
      return;
    }
  };

  const toAddVisitNum = rowData => () => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/visitNum',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          activityId: rowData.activityId,
          activityType: rowData.activityType,
          activityName: rowData.activityName,
        },
      });
      return;
    }
  };

  const toDetail = rowData => {
    if (rowData) {
      router.push({
        pathname: '/statistics/activity/detail',
        query: {
          startDate: params.startDate,
          endDate: params.endDate,
          targetId: rowData.activityId,
          targetType: rowData.activityType,
          targetName: rowData.activityName,
          buildingId: '',
        },
      });
  
      return
    }
  }

  let columns = [
    {
      title: '活动类型',
      dataIndex: 'activityType',
      key: 'activityType',
      render: (text, records) => {
        if (records.activityType === 'live') {
          return '直播活动';
        }
        if (records.activityType === 'look') {
          return '一键带看';
        }
        if (records.activityType === 'house') {
          return '团房活动';
        }
        if (records.activityType === 'dymic') {
          return '报名活动';
        }
      },
    },
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
    },
    {
      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>
        // <a style={{ color: '#66B3FF' }} onClick={toAddVisitNum(record)}><span>{record.visitNum}</span></a>
      ),
    },
    {
      title: '新增注册用户',
      dataIndex: 'addRegistNum',
      key: 'addRegistNum',
      sorter: true,
      render: (text, record) => (
        <Navigate onClick={toAddRegistNum(record)}>{record.addRegistNum}</Navigate>
        // <a style={{ color: '#66B3FF' }} onClick={toAddRegistNum(record)}><span>{record.addRegistNum}</span></a>
      ),
    },
    {
      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: '详情',
      align: 'center',
      render: (text, record) => (
        <a style={{ color: '#FF4A4A' }} onClick={() => toDetail(record)}>
          查看
        </a>
      ),
    },
  ];

  // const toAddVisitNum = record => {
  //   router.push({
  //     pathname: '/activity/SignupActivity/registrationRecord',
  //     query: {
  //       dynamicId: record.dynamicId,
  //     },
  //   });
  // };

  //排序
  const handleTableChange = (pagination, filters, sorter) => {

    getTableList({
      ...params,
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      sort: sorter.order,
      colKey: sorter.columnKey
    });
  };

  const exportActivityStats = () => {
    request({ ...apis.activityDataStatis.activityDetailTableDataExport, 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();
  };
  return (
    <Card>
      <div style={{ textAlign: 'right' }}>
        <AuthButton name="admin.staisttics.activity.export" noRight={null}>
          <Button
            type="primary"
            style={{ float: 'right', margin: '20px 0', zIndex: 1 }}
            onClick={exportActivityStats}
          >
            导出
          </Button>
        </AuthButton>
      </div>

      <Table
        columns={columns}
        dataSource={data?.records}
        key="dynamicId"
        pagination={{ current: data?.current, pageSize: 10, total: data?.total }}
        onChange={handleTableChange}
      ></Table>
    </Card>
  );
};

export default ContentTable;