import React, { Component, useState, useEffect } from 'react';
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 'echarts/lib/component/dataZoom';
import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message, Modal, Card } from 'antd';
import BuildSelect from '@/components/SelectButton/BuildSelect';

const { Option } = Select;

const eventcolumns = [
  {
    title: '编号',
    dataIndex: 'recordId',
    key: 'recordId',
    align: 'center',
    width: '16%',
  },
  {
    title: '访问时间',
    dataIndex: 'visitTime',
    key: 'visitTime',
    align: 'center',
    width: '18%',
    render: (x, row) => (
      <>
        <span>{moment(row.visitTime).format('YYYY-MM-DD hh:mm:ss')}</span>
      </>
    ),
  },
  {
    title: '离开时间',
    dataIndex: 'leaveTime',
    key: 'leaveTime',
    align: 'center',
    width: '18%',
    render: (x, row) => (
      <>
        <span>{row.leaveTime && moment(row.leaveTime).format('YYYY-MM-DD hh:mm:ss')}</span>
      </>
    ),
  },
];

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 };
};
const UserBehaviorIndex = props => {
  const {
    startDate = moment()
      .subtract(7,'day')
      .format('YYYY-MM-DD'),
    endDate = moment().format('YYYY-MM-DD'),
  } = props;
  const [data, setData] = useState({ records: [] });
  const [visibleData, setVisibleData] = useState({ visible: false, row: {} });
  const [buildingId, setBuildingId] = useState('');

  // 柱图
  useEffect(() => {
    const date = formatDate(startDate, endDate);
    getUserBehaviorSummary({
      ...date,
      activity: props.activity,
      event: props.event,
      eventType: props.eventType,
      buildingId: props.buildingId,
    });
    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
  }, [startDate, endDate, props.activity, props.event, props.eventType, props.buildingId]);

  const [recordList, setList] = useState([]);
  function getUserBehaviorSummary(params) {
    request({
      ...apis.indexEcharts.userBehavior.tsUserBehavior,
      params,
    }).then(data => {
      setData(data || {});
      // setList((data.data.records || []).filter(e => e.activity !== '客户'))
    });
  }

  const seriesMaker = (data.selectUserBehavior || [])
    .filter(
      e =>
        e.activity !== '客户' &&
        e.activity !== '首页' &&
        e.activity !== 'H5' &&
        e.activity !== '房源' &&
        e.activity !== '其他'&&
        e.activity !== '咨询'&&
        e.activity !== '个人中心',
    )
    .reduce((series, item) => {
      let { date, activityCount, activity } = item;
      date = moment(date).format('YYYY-MM-DD');
      if (!activityCount) activityCount = 0;

      // 使用对象, 可以去重
      series[`${activity}`] = (series[`${activity}`] || []).concat([[date, activityCount]]);

      return series;
    }, {});
  console.log(seriesMaker, 'seriesMaker----');

  const dataZoom = props.dataZoom
    ? [
        {
          type: 'inside',
          start: 0,
          end: 100,
        },
        {
          type: 'slider',
          start: 0,
          end: 100,
        },
      ]
    : undefined;

  const options = {
    title: {},
    icon: 'rect',
    legend: {
      show: true,
      zlevel: 10,
      itemGap: 100,
    },
    color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
    tooltip: {
      trigger: 'axis',
    },
    xAxis: { type: 'category' },
    yAxis: {},
    dataZoom,
    series: Object.keys(seriesMaker).map(x => ({
      type: 'line',
      smooth: true,
      name: x,
      data: seriesMaker[x],
    })),
  };

  return (
    <>
      <Card title="用户行为" headStyle={{ textAlign: 'left' }}>
        <EChart options={options} />
      </Card>
    </>
  );
};

export default UserBehaviorIndex;
