import React, { useContext, useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Checkbox, ConfigProvider, DatePicker, Radio, Select, Spin, Tabs, Tooltip } from 'antd';
import { CloseCircleFilled, PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons';
import moment from 'moment';
import _ from 'lodash';
import TimeRangePicker from '@wisdom-components/timerangepicker';
import PandaEmpty from '@wisdom-components/empty';
import BasicTable from '@wisdom-components/basictable';
import { getHistoryInfo, getDeviceAlarmScheme } from './apis';
import SimgleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';

const { RangePicker } = DatePicker;
const { Option } = Select;

const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59';
const timeFormat = 'YYYY-MM-DD HH:mm:ss';

const timeList = [
  {
    key: 'oneHour',
    name: '近1小时',
  },
  {
    key: 'fourHour',
    name: '近4小时',
  },
  {
    key: 'twelveHours',
    name: '近12小时',
  },
  {
    key: 'roundClock',
    name: '近24小时',
  },
  {
    key: 'yesterday',
    name: '昨天',
  },
];

const CheckboxData = [
  {
    key: 'curveCenter',
    label: '曲线居中',
    checked: false,
    showInCurve: true,
    showInTable: false,
  },
  {
    key: 'chartGrid',
    label: '图表网格',
    checked: false,
    showInCurve: true,
    showInTable: false,
  },
  {
    key: 'ignoreOutliers',
    label: '数据滤波',
    type: 'updateIgnoreOutliers',
    checked: false,
    showInCurve: true,
    showInTable: true,
    tooltip: '数据滤波针对与样本平均值相差2个标准差以上的值进行过滤。',
  },
  {
    key: 'dataThin',
    label: '数据抽稀',
    type: 'updateDataThin',
    checked: true,
    showInCurve: false,
    showInTable: true,
  },
];

const timeIntervalList = [
  {
    key: '5',
    zoom: '5',
    unit: 'min',
    name: '5分钟',
  },
  {
    key: '10',
    zoom: '10',
    unit: 'min',
    name: '10分钟',
  },
  {
    key: '30',
    zoom: '30',
    unit: 'min',
    name: '30分钟',
  },
  {
    key: '1',
    zoom: '1',
    unit: 'h',
    name: '1小时',
  },
  {
    key: '2',
    zoom: '2',
    unit: 'h',
    name: '2小时',
  },
  {
    key: '6',
    zoom: '6',
    unit: 'h',
    name: '6小时',
  },
  {
    key: '12',
    zoom: '12',
    unit: 'h',
    name: '12小时',
  },
];

const updateTime = (key) => {
  let start = '';
  let end = '';

  if (Array.isArray(key)) {
    start = moment(key[0]).format(timeFormat);
    end = moment(key[1]).format(timeFormat);
  } else {
    switch (key) {
      case 'oneHour':
        start = moment().subtract(1, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'fourHour':
        start = moment().subtract(4, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'twelveHours':
        start = moment().subtract(12, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'roundClock':
        start = moment().subtract(24, 'hour').format(timeFormat);
        end = moment().format(timeFormat);
        break;
      case 'yesterday':
        start = moment().subtract(1, 'days').format(startFormat);
        end = moment().subtract(1, 'days').format(endFormat);
        break;
    }
  }
  return [
    {
      dateFrom: start,
      dateTo: end,
    },
  ];
};

const DefaultDatePicker = (value) => [
  {
    key: 1,
    value: moment(),
  },
  {
    key: 2,
    value: moment().subtract(1, value),
  },
];

const handleBatchTime = (arr, cOption) => {
  let newArr = [];
  arr.forEach((child) => {
    if (child.value) {
      newArr.push({
        dateFrom: moment(child.value).startOf(cOption).format(startFormat),
        dateTo: moment(child.value).endOf(cOption).format(endFormat),
      });
    }
  });
  newArr = _.uniqWith(newArr, _.isEqual); // 去掉重复日期时间
  return newArr;
};

const timeColumn = {
  title: '采集时间',
  dataIndex: 'time',
  key: 'time',
  width: 170,
  fixed: 'left',
  ellipsis: true,
  align: 'center',
};

const HistoryView = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('history-view');

  const {
    title,
    grid,
    defaultChecked,
    tableProps,
    deviceParams,
    defaultModel,
    showModels,
    needMarkLine,
  } = props;

  const [loading, setLoading] = useState(false);
  const [activeTabKey, setActiveTabKey] = useState(defaultModel);

  // 时间模式: 自定义模式/同期对比模式
  const [timeValue, setTimeValue] = useState('customer');

  // 自定义模式
  const [customerChecked, setCustomerChecked] = useState(defaultChecked); // 时间快速选择类型值
  const [customerTime, setCustomerTime] = useState(); // 自定义时间选择值

  // 同期对比模式
  const [contrastOption, setContrastOption] = useState('day'); // 对比时间类型: 日/月
  const [datePickerArr, setDatePickerArr] = useState(DefaultDatePicker('day')); // 对比时间段配置值

  const [checkboxData, setCheckboxData] = useState(() => [...CheckboxData]); // 曲线设置项
  const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key); // 曲线抽稀时间设置

  const [columns, setColumns] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [chartDataSource, setChartDataSource] = useState([]);

  // 选择的时间范围值
  const dateRange = useMemo(() => {
    if (timeValue === 'customer') {
      return updateTime(customerChecked || customerTime);
    } else {
      return handleBatchTime(datePickerArr, contrastOption);
    }
  }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue]);

  const configDependence = checkboxData
    .filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
    .map((item) => item.checked)
    .join(',');
  // 数据配置
  const dataConfig = useMemo(() => {
    const initial = {
      ignoreOutliers: false,
      dataThin: false,
      zoom: '', // 数据抽稀时间
      unit: '', // 数据抽稀时间单位
    };
    // 曲线居中，过滤异常值，数据抽稀
    const config = checkboxData.reduce(
      (pre, item) => (item.key !== 'curveCenter' && (pre[item.key] = item.checked), pre),
      initial,
    );
    // 数据抽稀时间单位
    const dataThin = timeIntervalList.find((item) => item.key === dataThinKey);
    config.zoom = activeTabKey === 'curve' ? '' : dataThin?.zoom ?? '';
    config.unit = activeTabKey === 'curve' ? '' : dataThin?.unit ?? '';
    config.dataThin = activeTabKey === 'curve' ? true : config.dataThin; // 曲线强制抽稀

    return config;
  }, [configDependence, dataThinKey, activeTabKey]);

  // 图表居中
  const [curveCenter, chartGrid] = useMemo(() => {
    const curveCenter = checkboxData.find((item) => item.key === 'curveCenter')?.checked;
    const chartGrid = checkboxData.find((item) => item.key === 'chartGrid')?.checked;
    return [curveCenter, chartGrid];
  }, [checkboxData]);

  // 自定义模式: 快速选择
  const onCustomerTimeChange = (key) => {
    setCustomerChecked(key);
    !!customerTime && setCustomerTime(null);
  };

  // 自定义模式: 自定义时间选择
  const onCustomerRangeChange = (value) => {
    if (!value) {
      // 时间清空，回到默认时间选择
      setCustomerChecked(defaultChecked);
      setCustomerTime(value);
    } else {
      setCustomerChecked(null);
      setCustomerTime(value);
    }
  };

  // 同期对比模式: 选择（日/月）
  const onContrastChange = (value) => {
    setContrastOption(value);
    setDatePickerArr([...DefaultDatePicker(value)]);
  };

  // 同期对比模式: 时间段选择
  const onContrastPickerChange = (date, dateString, item) => {
    const arr = [...datePickerArr];
    arr.forEach((child) => {
      if (child.key === item.key) {
        child.value = date;
      }
    });
    setDatePickerArr(arr);
  };

  // 同期对比模式: 新增日期选择组件
  const handleAddDatePicker = () => {
    setDatePickerArr([
      ...datePickerArr,
      {
        key: datePickerArr[datePickerArr.length - 1].key + 1,
        value: '',
      },
    ]);
  };

  // 同期对比模式: 删除日期选择组件
  const handleDeleteDatePicker = (index) => {
    const arr = [...datePickerArr];
    arr.splice(index, 1);
    setDatePickerArr(arr);
  };

  // 时间设置切换（自定义/同期对比）
  const onTimeSetChange = (e) => {
    setTimeValue(e.target.value);
    if (e.target.value === 'contrast') {
      // 同期对比
      onContrastChange(contrastOption);
    } else {
      // 自定义
      // 不需要处理
    }
  };

  const renderTimeOption = () => {
    return (
      <div className={classNames(`${prefixCls}-date`)}>
        <div className={classNames(`${prefixCls}-label`)}>时间选择</div>
        <Radio.Group value={timeValue} onChange={onTimeSetChange}>
          <Radio.Button value="customer">自定义</Radio.Button>
          <Radio.Button value="contrast">同期对比</Radio.Button>
        </Radio.Group>
        {timeValue === 'customer' && ( // 自定义
          <>
            <TimeRangePicker
              onChange={onCustomerTimeChange}
              value={customerChecked}
              dataSource={timeList}
            />
            <RangePicker
              className={classNames(`${prefixCls}-custime-customer`)}
              onChange={onCustomerRangeChange}
              value={customerTime}
              showTime
            />
          </>
        )}
        {timeValue === 'contrast' && ( // 同期对比
          <>
            <Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
              <Option value="day">日</Option>
              <Option value="month">月</Option>
            </Select>
            {datePickerArr.map((child, index) => (
              <div key={child.key} className={classNames(`${prefixCls}-contrast-list`)}>
                <div className={classNames(`${prefixCls}-contrast-wrap`)}>
                  <DatePicker
                    picker={contrastOption}
                    value={child.value}
                    onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
                  />
                  {datePickerArr.length > 2 && (
                    <div
                      className={classNames(`${prefixCls}-contrast-delete`)}
                      onClick={() => handleDeleteDatePicker(index)}
                    >
                      <CloseCircleFilled />
                    </div>
                  )}
                </div>
                {index < datePickerArr.length - 1 && (
                  <div className={classNames(`${prefixCls}-contrast-connect`)}>与</div>
                )}
              </div>
            ))}
            {datePickerArr.length < 5 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
          </>
        )}
      </div>
    );
  };

  // 曲线设置项选择/取消
  const onCheckboxChange = (e, key) => {
    let data = [...checkboxData];
    data.forEach((item) => {
      if (item.key === key) {
        item.checked = e.target.checked;
      }
    });
    setCheckboxData(data);
  };

  // 数据抽稀时间间隔
  const onTimeIntervalChange = (value) => {
    setDataThinKey(value);
  };

  const renderCheckbox = (child) => {
    const curveAccess = activeTabKey === 'curve' && child.showInCurve;
    const tableAccess = activeTabKey === 'table' && child.showInTable;
    const gridOptions = ['curveCenter'];

    if (grid && curveAccess && gridOptions.indexOf(child.key) === -1) return null;
    return (
      (curveAccess || tableAccess) && (
        <>
          <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
            {child.label}
          </Checkbox>
          {child.tooltip && (
            <Tooltip title={child.tooltip}>
              <QuestionCircleFilled className={`${prefixCls}-question`} />
            </Tooltip>
          )}
        </>
      )
    );
  };

  const renderCurveOption = () => {
    return (
      <div className={classNames(`${prefixCls}-cover`)}>
        <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
        {checkboxData.map((child) => {
          const box = renderCheckbox(child);
          if (!box) return null;
          return (
            <div key={child.key} className={`${prefixCls}-cover-item`}>
              {box}
            </div>
          );
        })}
        {activeTabKey === 'table' && (
          <Select
            value={dataThinKey}
            style={{ width: 90 }}
            onChange={onTimeIntervalChange}
            disabled={!dataConfig.dataThin}
          >
            {timeIntervalList.map((child) => (
              <Option key={child.key} unit={child.unit} value={child.key}>
                {child.name}
              </Option>
            ))}
          </Select>
        )}
      </div>
    );
  };

  const exportExcelBtn = () => {};

  const handleTableData = (data) => {
    const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
    const dataIndexAccess = (dataItem, index) => {
      const { stationCode, sensorName } = dataItem;
      return `${stationCode}-${sensorName}-${index}`;
    };

    let format = timeFormat;
    if (timeValue === 'contrast') {
      format = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
    }

    // 处理表头数据
    const columnsData = data.map((item, index) => {
      const { stationCode, equipmentName, sensorName, unit, dataModel } = item;
      const dataIndex = dataIndexAccess(item, index);
      let col = {
        title: `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`,
        dataIndex: dataIndex,
        key: dataIndex,
        ellipsis: true,
        align: 'center',
      };
      // 同期对比
      if (timeValue === 'contrast' && dataModel[0]) {
        const time = item.dataModel[0].pt
          .slice(0, contrastOption === 'day' ? 10 : 7)
          .replace(/-/g, '');
        col.title = `${equipmentName}-${sensorName}-${time}`;
      }
      return col;
    });

    // 格式化时间对齐数据, 生成行数
    const timeData = {};

    const buildDefaultData = (time) => {
      const obj = { key: time, time: time };
      data.forEach((item, index) => {
        const dataIndex = dataIndexAccess(item, index);
        obj[dataIndex] = '';
      });
      return obj;
    };
    data.forEach((item, index) => {
      const { stationCode, sensorName, dataModel } = item;
      dataModel.forEach((data) => {
        const formatTime = moment(data.pt).format(format);

        let time = formatTime;
        if (timeValue === 'contrast') {
          time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
        }

        timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
      });
    });

    // 处理表格数据
    data.forEach((child, index) => {
      const { dataModel } = child;
      const dataIndex = dataIndexAccess(child, index);
      dataModel.forEach((value, j) => {
        const formatTime = moment(value.pt).format(format);
        const dataRow = timeData[formatTime];
        if (dataRow) {
          dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
        }
      });
    });
    const timeSort = (a, b) => {
      let aa = a,
        bb = b;
      if (timeValue === 'contrast') {
        aa = a.slice(contrastOption === 'day' ? 11 : 8, 16);
        bb = b.slice(contrastOption === 'day' ? 11 : 8, 16);
      }
      return aa.localeCompare(bb);
    };
    const times = Object.keys(timeData).sort(timeSort);
    const tableData = times.map((time) => timeData[time]);
    setColumns([timeColumn, ...columnsData]);
    setTableData(tableData);
  };

  const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState([]);
  const beforChangeParams = (value = {}) => {
    if (!needMarkLine) return Promise.resolve();
    return getDeviceAlarmScheme({
      data: deviceParams.map((item) => ({
        deviceType: item.deviceType,
        deviceCode: item.deviceCode,
        pointAddressID: item.pointAddressID,
        sensorName: item.sensors,
      })),
    })
      .then((res) => {
        if (res.code === 0) setDeviceAlarmSchemes(res.data || []);
        else setDeviceAlarmSchemes([]);
        return Promise.resolve();
      })
      .catch((err) => {
        setDeviceAlarmSchemes([]);
        return Promise.resolve();
      });
  };

  // 处理接口服务参数的变化
  const onChangeParams = (value = {}) => {
    const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
    const requestArr = [];
    const acrossTables = deviceParams.map((item) => _.omit(item, ['pointAddressID']));
    dateRange.forEach((item) => {
      const param = {
        isDilute,
        zoom,
        unit,
        ignoreOutliers,
        isVertical: false, // 是否查询竖表
        dateFrom: item.dateFrom,
        dateTo: item.dateTo,
        acrossTables,
      };
      requestArr.push(getHistoryInfo(param));
    });
    setLoading(true);
    Promise.all(requestArr).then((results) => {
      if (results.length) {
        let data = [];
        results.forEach((res, index) => {
          const { dateFrom, dateTo } = dateRange?.[index] ?? {};
          if (res.code === 0 && res.data.length) {
            res.data.forEach((d) => {
              d.dateFrom = dateFrom;
              d.dateTo = dateTo;
            });
            deviceParams.forEach((p) => {
              // 返回数据按查询指标顺序排序
              const sensors = p.sensors?.split(',') ?? [];
              const list = sensors.map((s) => {
                const dataItem = res.data.find(
                  (d) => d.stationCode === p.deviceCode && d.sensorName === s,
                );
                dataItem.dateFrom = dateFrom;
                dataItem.dateTo = dateTo;
                return dataItem;
              });
              data = data.concat(list);
            });
          }
        });
        setLoading(false);
        handleTableData(data);
        setChartDataSource(data);
      }
    });
  };

  useEffect(() => {
    const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
    beforChangeParams().finally(() => {
      onChangeParams({
        isDilute: dataThin,
        ignoreOutliers,
        zoom,
        unit,
        dateRange,
      });
    });
  }, [dateRange, dataConfig, deviceParams]);

  const renderPanel = (model) => {
    if (model === 'curve') {
      return (
        <>
          <div className={`${prefixCls}-options`}>
            {renderTimeOption()}
            {renderCurveOption()}
          </div>
          <div className={`${prefixCls}-content`}>
            {!chartDataSource.length ? (
              <PandaEmpty />
            ) : grid === true ? (
              <GridChart
                curveCenter={curveCenter}
                prefixCls={prefixCls}
                dataSource={chartDataSource}
                contrast={timeValue === 'contrast'}
                contrastOption={contrastOption}
                deviceAlarmSchemes={deviceAlarmSchemes}
              />
            ) : (
              <SimgleChart
                curveCenter={curveCenter}
                showGridLine={chartGrid}
                prefixCls={prefixCls}
                dataSource={chartDataSource}
                contrast={timeValue === 'contrast'}
                contrastOption={contrastOption}
                deviceAlarmSchemes={deviceAlarmSchemes}
              />
            )}
          </div>
        </>
      );
    }
    if (model === 'table') {
      return (
        <>
          <div className={`${prefixCls}-options`}>
            {renderTimeOption()}
            {renderCurveOption()}
          </div>
          <div className={`${prefixCls}-content`}>
            {chartDataSource.length > 0 ? (
              <BasicTable
                dataSource={tableData}
                columns={columns}
                {...tableProps}
                pagination={false}
                onChange={() => {}}
              />
            ) : (
              <PandaEmpty />
            )}
          </div>
        </>
      );
    }
  };

  return (
    <div className={classNames(prefixCls)}>
      <Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
        {showModels.length === 1 && (
          <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
        )}
        {showModels.length > 1 && (
          <Tabs
            activeKey={activeTabKey}
            onChange={(key) => setActiveTabKey(key)}
            centered
            tabBarExtraContent={{
              left: <h3>{title}</h3>,
              right: (
                <div className={`${prefixCls}-extra-right`}>
                  {/* {activeTabKey === 'table' && (
                    <Button onClick={exportExcelBtn}>
                      <DownloadOutlined />
                      下载
                    </Button>
                  )} */}
                </div>
              ),
            }}
          >
            <Tabs.TabPane key="curve" tab="曲线">
              {renderPanel('curve')}
            </Tabs.TabPane>
            <Tabs.TabPane key="table" tab="表格">
              {renderPanel('table')}
            </Tabs.TabPane>
          </Tabs>
        )}
      </Spin>
    </div>
  );
};

HistoryView.propTypes = {
  grid: PropTypes.bool,
  title: PropTypes.string,
  defaultChecked: PropTypes.oneOf([
    'oneHour',
    'fourHour',
    'twelveHours',
    'roundClock',
    'yesterday',
  ]),
  tableProps: PropTypes.object,
  deviceParams: PropTypes.arrayOf(
    PropTypes.objectOf({
      deviceCode: PropTypes.string,
      sensors: PropTypes.string,
      deviceType: PropTypes.string,
      pointAddressID: PropTypes.number, // 可选，配置了将会查询相关报警方案配置
    }),
  ),
  defaultModel: PropTypes.oneOf(['curve', 'table']),
  showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
};

HistoryView.defaultProps = {
  grid: false,
  title: '指标曲线',
  defaultChecked: 'roundClock',
  tableProps: {},
  defaultModel: 'curve',
  showModels: ['curve', 'table'],
  needMarkLine: true,
};

export default HistoryView;