import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryConditionSnapshot } from '@/services/SmartOps';
import { history, useParams, useRequest } from '@umijs/max';
import { Button, Col, Row } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';

const Work = (props) => {
  const { projectId } = useParams();
  const [open, setOpen] = useState(false);

  const { data, loading } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
    initialData: {},
  });

  return (
    <PageContent>
      <PageTitle>水厂工况</PageTitle>
      {/* <div className="content-title"> */}
      <div className={styles.score}>
        {/* <CircleScore big> */}
        <div className={styles.circle}>
          {data?.score?.toFixed(2)}
          <div style={{ fontSize: '0.24rem' }}>{data?.grade}</div>
        </div>
        {/* </CircleScore> */}
        <div className={styles.scoreRight}>
          <h3>当前运行{data?.grade}，可继续优化</h3>
          <div className={styles.time}>
            {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
          </div>
          {data?.score && (
            <Button
              style={{ marginRight: '0.2rem' }}
              className={styles.btn}
              type="primary"
              onClick={() =>
                history.push(
                  `/smart/optimization-tasks/${projectId}?score=${data.score}`,
                )
              }
            >
              优化任务
            </Button>
          )}

          <Button
            className={styles.btn}
            type="primary"
            onClick={() =>
              history.push('/smart/condition-detection/' + projectId)
            }
          >
            工况预测
          </Button>
        </div>
      </div>
      <Row gutter={30}>
        <Col span={12}>
          <div className={styles.card}>
            <h3>水厂负荷数据</h3>
            <ul>
              <li>
                <i></i>实际处理水量：{data?.fact_water}
              </li>
              <li>
                <i></i>设计处理水量：{data?.devise_water}
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card}>
            <h3>
              成本数据
              <div
                style={{ marginLeft: 14 }}
                onClick={() => setOpen(!open)}
                className={`password-eye ${open ? 'open' : ''}`}
              ></div>
            </h3>
            <ul>
              <li>
                <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
              </li>
              <li>
                <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card}>
            <h3>能耗数据</h3>
            <ul>
              <li>
                <i></i>吨水电耗：{data?.elec_unit}
              </li>
              <li>
                <i></i>用电量：{data?.elec}
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card2}>
            <h3>药耗数据</h3>
            <ul>
              <li>
                <i></i>吨水药耗：{data?.otc_unit}
              </li>
              <li>
                <i></i>药量：{data?.otc}
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card2} style={{ marginBottom: 0 }}>
            <h3>进水数据</h3>
            <ul>
              <li>
                <i></i>进水量：{data?.fwa}
              </li>
              <li>
                <i></i>进水温度：{data?.ft}
              </li>
              <li>
                <i></i>进水浊度：{data?.ftur}
              </li>
              <li>
                <i></i>进水压力：{data?.fpp}
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card2} style={{ marginBottom: 0 }}>
            <h3>产水数据</h3>
            <ul>
              <li>
                <i></i>外供水流量：{data?.dwa}
              </li>
              <li>
                <i></i>外供水pH：{data?.dph}
              </li>
              <li>
                <i></i>外供水电导率：{data?.dtds}
              </li>
              {/* 与进水数据对齐 */}
              <li style={{ visibility: 'hidden' }}>
                <i></i>
              </li>
            </ul>
          </div>
        </Col>
      </Row>
      {/* </div> */}
    </PageContent>
  );
};

export default Work;