import React, { useEffect, useMemo, useState } from 'react';
import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import DpToolComponent from '../../../../layouts/mui/DpToolComponent'
import DpResultComponent from '../../../../layouts/mui/DpResultComponent';
import { normalizeSearchTmRange } from '../../../../utils/tools';
import { drpSearch } from '../../../../models/_/search';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment'
import drpOption from './drpOption';
import DpAlert from '../../../../layouts/mui/DpAlert';

function DrpSearch({ record }) {
  const [stm, handleDateChange1] = useState(() => moment().add(-1, 'd'));
  const [etm, handleDateChange2] = useState(() => moment());
  const [data, setData] = useState([]);

  const searchTm = useMemo(() => {
    if (stm.isAfter(etm)) {
      return { error: '开始时间应小于结束时间' };
    }
    if (etm.diff(stm, 'd') > 30) {
      return { error: '查询跨度时间不得超过30天' };
    }
    return { tm: normalizeSearchTmRange([stm, etm], 'h') };
  }, [stm, etm]);

  useEffect(() => {
    if (searchTm.tm) {
      drpSearch(record.type, record.stcd, 'h', searchTm.tm).then((data) => {
        setData(data);
      })
    }
  }, [searchTm]);

  const option = useMemo(() => {
    const title = searchTm.tm[0]?.substr(5, 8) + '至' + searchTm.tm[1]?.substr(5, 8) + '降雨';
    return drpOption({ data, title });
  }, [data]);

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <DpToolComponent>
          <DateTimePicker
            label="开始时间"
            value={stm}
            onChange={handleDateChange1}
            cancelLabel="取消"
            okLabel="确定"
          />
          <span style={{ margin: '0 1rem' }}>-</span>
          <DateTimePicker
            label="结束时间"
            value={etm}
            onChange={handleDateChange2}
            cancelLabel="取消"
            okLabel="确定"
          />
        </DpToolComponent>

        {searchTm?.error ? (
          <DpToolComponent>
            <DpAlert style={{ width: '100%' }} severity="error">{searchTm.error}</DpAlert>
          </DpToolComponent>
        ) : (
          <DpResultComponent>
            <ReactEcharts
              option={option}
              style={{ height: '100%' }}
            />
          </DpResultComponent>
        )}
      </div>
    </MuiPickersUtilsProvider>
  )
}

export default DrpSearch