import React, { useState, useEffect, useRef, useContext } from 'react';
import classNames from 'classnames';
import moment from 'moment';
import Empty from '@wisdom-components/empty';
import LoadBox from '@wisdom-components/loadbox';
import BasicTable from '@wisdom-components/basictable';
import { ConfigProvider, Select, DatePicker, Radio } from 'antd';
import { BasicChart } from '@wisdom-components/basicchart';
import { getStatisticsInfo } from './apis';
import './index.less';

const StatisticalHistoryView = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('ec-statistical-history-view');
  const componentPrefix = getPrefixCls('');

  const [loading, setLoading] = useState(false);
  const [historyRender, setHistoryRender] = useState(true);
  const [historyParams, setHistoryParams] = useState({});
  const [columns, setColumns] = useState([
    {
      title: '时间',
      dataIndex: 'pt',
      align: 'center',
      width: 100,
      fixed: 'left',
    },
  ]);
  const [dataSource, setDataSource] = useState([]);
  const [options, setOptions] = useState({});
  const [dateValue, setDateValue] = useState('today');
  const [picker, setPicker] = useState('day');
  const [time, setTime] = useState({ startTime: '', endTime: '' });
  const [dateTime, setDateTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'));

  // 时间切换筛选
  const onTimeChange = (e) => {
    setDateValue(e.target.value);
  };

  // 自定义时间类型
  const onPickerChange = (value) => {
    setPicker(value);
    const start = moment(dateTime).subtract(2, value).format('YYYY-MM-DD 00:00:00');
    const end = moment(dateTime).format('YYYY-MM-DD 23:59:59');
    setTime({ startDate: start, endDate: end });
  };

  // 自定义时间选择
  const onDateChange = (value, dateString) => {
    setDateTime(dateString);
    const start = moment(value).subtract(2, picker).format('YYYY-MM-DD 00:00:00');
    const end = moment(value).format('YYYY-MM-DD 23:59:59');
    setTime({ startDate: start, endDate: end });
  };

  // 获取历史统计数据
  const getHistoryData = async () => {
    const { deviceCode = '', sensors = '', deviceType = '', statisticType = '' } = historyParams;
    const nameTypeList = [];
    if (!deviceCode || !sensors) return setHistoryRender(false);
    nameTypeList.push({
      name: sensors,
      type: statisticType || 'Sub',
    });
    const params = {
      pageIndex: 1,
      pageSize: 999,
      nameTypeList: nameTypeList,
      accountName: deviceType,
      dateFrom: time.startDate,
      dateTo: time.endDate,
      deviceCode: deviceCode,
      dateType: picker,
    };
    setLoading(true);
    const results = await getStatisticsInfo(params);
    setLoading(false);
    const list = results?.data?.list || [];
    const dataList = list.length ? list[0] : {};
    const dNameDataList = dataList.dNameDataList ? dataList.dNameDataList : [];
    const data = dNameDataList.length ? dNameDataList[0] : null;
    if (!data) return setHistoryRender(false);
    dataMenthod(data);
  };

  const dataMenthod = (data) => {
    const { nameDate } = data;
    let time0 = '',
      time1 = '',
      time2 = '';
    let data0 = [],
      data1 = [],
      data2 = [];
    let timeName = [];
    switch (dateValue) {
      case 'today':
        time0 = moment(time.endDate).subtract(0, 'day').format('YYYY-MM-DD');
        time1 = moment(time.endDate).subtract(1, 'day').format('YYYY-MM-DD');
        time2 = moment(time.endDate).subtract(2, 'day').format('YYYY-MM-DD');
        timeName = [].concat(dayName);
        nameDate.forEach((item) => {
          const times = moment(item.time).format('YYYY-MM-DD');
          const pt = moment(item.time).format('HH时');
          if (times === time0) data0.push({ ...item, pt: pt });
          if (times === time1) data1.push({ ...item, pt: pt });
          if (times === time2) data2.push({ ...item, pt: pt });
        });
        break;
      case 'thisWeek':
        time0 = moment(time.endDate).subtract(0, 'week').format('WW');
        time1 = moment(time.endDate).subtract(1, 'week').format('WW');
        time2 = moment(time.endDate).subtract(2, 'week').format('WW');
        timeName = [].concat(weekName);
        nameDate.forEach((item) => {
          const times = moment(item.time).format('WW');
          const pt = getWeek(item.time);
          if (times === time0) data0.push({ ...item, pt: pt });
          if (times === time1) data1.push({ ...item, pt: pt });
          if (times === time2) data2.push({ ...item, pt: pt });
        });
        break;
      case 'thisMonth':
        time0 = moment(time.endDate).subtract(0, 'month').format('YYYY-MM');
        time1 = moment(time.endDate).subtract(1, 'month').format('YYYY-MM');
        time2 = moment(time.endDate).subtract(2, 'month').format('YYYY-MM');
        timeName = [].concat(monthName);
        nameDate.forEach((item) => {
          const times = moment(item.time).format('YYYY-MM');
          const pt = moment(item.time).format('DD日');
          if (times === time0) data0.push({ ...item, pt: pt });
          if (times === time1) data1.push({ ...item, pt: pt });
          if (times === time2) data2.push({ ...item, pt: pt });
        });
        break;
      case 'customer':
        const style = picker === 'day' ? 'HH时' : picker === 'month' ? 'DD日' : 'MM月';
        const format = picker === 'day' ? 'YYYY-MM-DD' : picker === 'month' ? 'YYYY-MM' : 'YYYY';
        time0 = moment(time.endDate).subtract(0, picker).format(format);
        time1 = moment(time.endDate).subtract(1, picker).format(format);
        time2 = moment(time.endDate).subtract(2, picker).format(format);
        timeName = [].concat([time0, time1, time2]);
        nameDate.forEach((item) => {
          const times = moment(item.time).format(format);
          const pt = moment(item.time).format(style);
          if (times === time0) data0.push({ ...item, pt: pt });
          if (times === time1) data1.push({ ...item, pt: pt });
          if (times === time2) data2.push({ ...item, pt: pt });
        });
        break;
    }
    const dataChart = {
      data: [data0, data1, data2],
      name: timeName,
    };
    const dataTable = data0.map((item, index) => {
      return {
        ...item,
        value1: data1[index]?.value,
        value2: data1[index]?.value,
      };
    });
    renderChart(dataChart, data);
    renderTable(dataTable, timeName);
  };

  const renderChart = (dataInfo, data) => {
    if (!dataInfo) return setOptions(null);
    const { unit, dName } = data;
    const series = [];
    dataInfo.data.forEach((item, index) => {
      const config = dName.indexOf('流量') > -1 ? { areaStyle: {} } : {};
      const list = {
        name: dataInfo.name[index],
        type: 'line',
        ...config,
        data: item.map((arr) => {
          return {
            name: arr.pt,
            value: arr.value,
          };
        }),
      };
      series.push(list);
    });
    const option = {
      title: {
        show: false,
        text: '',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 10,
        bottom: 10
      },
      toolbox: {
        show: false,
      },
      legend: {
        left: 'center',
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: unit,
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
      ],
      series: series,
    };
    setOptions(option);
  };

  const renderTable = (dataInfo, timeName) => {
    const dataIndex = ['value', 'value1', 'value2'];
    const column1 = [
      {
        title: '时间',
        dataIndex: 'pt',
        align: 'center',
        width: 100,
        fixed: 'left',
      },
    ];
    const column2 = timeName.map((item, index) => {
      return {
        title: item,
        dataIndex: dataIndex[index],
        align: 'center',
        // width: 60,
      };
    });
    const column = column1.concat(column2);
    setColumns(column);
    setDataSource(dataInfo);
  };

  const getWeek = (date) => {
    const weekTime = moment(date).day();
    switch (weekTime) {
      case 1:
        return '周一';
        break;
      case 2:
        return '周二';
        break;
      case 3:
        return '周三';
        break;
      case 4:
        return '周四';
        break;
      case 5:
        return '周五';
        break;
      case 6:
        return '周六';
        break;
      case 0:
        return '周日';
        break;
    }
  };

  useEffect(() => {
    setHistoryParams(props.deviceParams || {});
  }, [props.deviceParams]);

  useEffect(() => {
    let start = '',
      end = '';
    switch (dateValue) {
      case 'today':
        start = moment().subtract(2, 'day').format('YYYY-MM-DD 00:00:00');
        end = moment().format('YYYY-MM-DD 23:59:59');
        setPicker('day');
        break;
      case 'thisWeek':
        start = moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD 00:00:00');
        end = moment().endOf('week').format('YYYY-MM-DD 23:59:59');
        setPicker('month');
        break;
      case 'thisMonth':
        start = moment().startOf('month').subtract(2, 'month').format('YYYY-MM-DD 00:00:00');
        end = moment().endOf('month').format('YYYY-MM-DD 23:59:59');
        setPicker('month');
        break;
      case 'customer':
        start = moment().startOf(picker).subtract(2, picker).format('YYYY-MM-DD 00:00:00');
        end = moment().endOf(picker).format('YYYY-MM-DD 23:59:59');
        break;
    }
    setTime({ startDate: start, endDate: end });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dateValue]);

  useEffect(() => {
    getHistoryData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [time, historyParams, picker]);

  return (
    <div className={classNames(prefixCls)}>
      <div className={classNames(`${prefixCls}-box`)}>
        <div className={classNames(`${prefixCls}-header`)}>
          <span>时间选择：</span>
          <Radio.Group value={dateValue} defaultValue={dateList[0].key} onChange={onTimeChange}>
            {dateList.map((item) => (
              <Radio.Button key={item.key} value={item.key}>
                {item.name}
              </Radio.Button>
            ))}
          </Radio.Group>
          {dateValue === 'customer' && (
            <>
              <Select
                defaultValue="day"
                value={picker}
                options={timeList}
                onChange={onPickerChange}
                className={classNames(`${prefixCls}-select`)}
              />
              <DatePicker onChange={onDateChange} value={moment(dateTime)} picker={picker} />
            </>
          )}
        </div>
        <div className={classNames(`${prefixCls}-content`)}>
          {
            <>
              <div className={classNames(`${prefixCls}-chart`)}>
                <BasicChart option={options} notMerge style={{ width: '100%', height: '100%' }} />
              </div>
              <div className={classNames(`${prefixCls}-table`)}>
                <BasicTable
                  dataSource={dataSource}
                  columns={columns}
                  pagination={false}
                  bordered={true}
                  scroll={{ x: '100%', y: 'calc(100% - 40px)' }}
                />
              </div>
            </>
          }
        </div>
      </div>
      {loading && (
        <div className={classNames(`${prefixCls}-load-box`)}>
          <LoadBox spinning={loading} />
        </div>
      )}
    </div>
  );
};

export default StatisticalHistoryView;

const dateList = [
  {
    key: 'today',
    name: '今日',
  },
  {
    key: 'thisWeek',
    name: '本周',
  },
  {
    key: 'thisMonth',
    name: '本月',
  },
  {
    key: 'customer',
    name: '自定义',
  },
];

const timeList = [
  {
    value: 'day',
    label: '日',
  },
  {
    value: 'month',
    label: '月',
  },
  {
    value: 'year',
    label: '年',
  },
];

const dayName = ['今日', '昨日', '前日'];

const weekName = ['本周', '上周', '上上周'];

const monthName = ['本月', '上月', '上上月'];
