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

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 UserSource = props => {
    const {buildingId,buildingName,params} = props 
  const [data, setData] = useState({  });
  //柱图
//   // 获取图表数据
//  const getTimeBarDate = (startDate, endDate) => {
//     request({ ...apis.stats.timeBarList, params: { startDate: moment(startDate).format('YYYY-MM-DDT00:00:00.000') + 'Z', endDate: moment(endDate).format('YYYY-MM-DDT23:59:59.999') + 'Z', buildingId: this.state.buildingId } }).then((data) => {
//       this.setState({ ...this.state, barData: data })
//     })
//   }
  useEffect(() => {
    getData(params);
  }, [params]);

  function getData(params) {
    request({
        ...apis.stats.timeBarList,
      params: {  ...params,buildingId },
    }).then(data => {
      setData(data);
    });
  }

  const options = {
    // title: {
    //     text: this.props.title,
    // },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['公客数', '私客数', '新增客户数', '访问人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {rotate: 45},
        data: data.timeList || []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '公客数',
            type: 'line',
            data: data.gkList || []
            
        },
        {
            name: '私客数',
            type: 'line',
            data: data.skList || []
        },
        {
            name: '新增客户数',
            type: 'line',
            data: data.khList || []
        },
        {
            name: '访问人数',
            type: 'line',
            data: data.uvList || []
        }
    ]
};




  return (
    <>
      <Card
        title={`趋势图：${buildingName}`}
        headStyle={{ textAlign: 'left' }}

      >

        <EChart options={options}  />
      </Card>
    </>
  );
};

export default UserSource;
