import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryMembraneList, queryUFCondition } from '@/services/SmartOps';
import { useLocation, useParams, useRequest } from '@umijs/max';
import { Button, DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './PredictionAnalysis.less';

const { RangePicker } = DatePicker;

const PredictionDetail = () => {
  const { projectId } = useParams();
  const locationSearch = new URLSearchParams(useLocation().search);
  const code = locationSearch.get('code');

  const defaultParams = {
    project_id: projectId,
    device_code: code,
    s_time: dayjs().format('YYYY-MM-DD 00:00:00'),
    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
  };

  const [currentDevice, setCurrentDevice] = useState({});

  useRequest(queryMembraneList, {
    defaultParams: [{ project_id: projectId, type: 'uf' }],
    formatResult: (result) => {
      if (result?.data?.list) {
        console.log(result.data.list.find((item) => item.device_code === code));
        setCurrentDevice(
          result.data.list.find((item) => item.device_code === code),
        );
        return result.data.list;
      }
    },
  });

  const { run } = useRequest(queryUFCondition, {
    defaultParams: [defaultParams],
  });

  const handleRangeChange = ([s_time, e_time]) => {
    run({
      ...filter,
      s_time: dayjs(s_time).format('YYYY-MM-DD 00:00:00'),
      e_time: dayjs(e_time).format('YYYY-MM-DD 23:59:59'),
    });
  };

  return (
    <PageContent closeable={false}>
      <PageTitle returnable>预测分析</PageTitle>
      <div className={styles.detailDeviceName}>
        超滤工艺单元：{currentDevice.device_name}（{currentDevice.device_code}）
      </div>
      <div className={styles.detailDevice}>
        <div className={styles.detailDeviceTitle}>跨膜压差</div>
        <div className="card-box">
          <div
            className={styles.detailDeviceRangeSelect}
            style={{ padding: '0.2rem' }}
          >
            <RangePicker inputReadOnly onChange={handleRangeChange} />
            <Button type="primary" shape="round">
              今日
            </Button>
            <Button type="primary" shape="round">
              本周
            </Button>
            <Button type="primary" shape="round">
              本月
            </Button>
          </div>
          <div className={styles.detailDeviceCharts}></div>
        </div>
      </div>
    </PageContent>
  );
};
export default PredictionDetail;