import { queryConditionSnapshot } from '@/services/SmartOps';
import { history, useParams, useRequest } from '@umijs/max';
import { Button, Col, Row } from 'antd';
import { useState } from 'react';
import CircleScore from './components/CircleScore';
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: {},
  });

  console.log(data)

  return (
    <div>
      <div className={styles.score}>
        <CircleScore>
          {data?.score}
          <div style={{ fontSize: 18 }}>{data?.grade}</div>
        </CircleScore>
        <div className={styles.scoreRight}>
          {/* <h3>新水岛当前运行良好，可继续优化</h3> */}
          <h3>当前运行{data?.grade}，可继续优化</h3>
          <div className={styles.time}>{data?.clac_time}</div>
          {data?.score && (
            <Button
              style={{ marginRight: 20 }}
              type="primary"
              onClick={() =>
                history.push(
                  `/smart/optimization-tasks/${projectId}?score=${data.score}`,
                )
              }
            >
              优化任务
            </Button>
          )}

          <Button
            style={{ marginRight: 20 }}
            type="primary"
            onClick={() =>
              history.push('/smart/condition-detection/' + projectId)
            }
          >
            工况检测
          </Button>
          {/* <Button
            type="primary"
            onClick={() =>
              history.push(`/smart/params/${projectId}`)
            }
          >
            工况模拟
          </Button> */}
        </div>
      </div>
      <Row gutter={16}>
        <Col span={12}>
          <div className={styles.card}>
            <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>
              {/* 与产水数据对其 */}
              <li style={{ visibility: 'hidden' }}>
                <i></i>
              </li>
            </ul>
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.card}>
            <h3>产水数据</h3>
            <ul>
              <li>
                <i></i>外供水流量：{data?.dwa}
              </li>
              <li>
                <i></i>外供水pH：{data?.dph}
              </li>
              <li>
                <i></i>外供水电导率：{data?.dtds}
              </li>
              <li>
                <i></i>外供水浊度：{data?.dtur}
              </li>
              <li>
                <i></i>外供水余氯：{data?.dsan}
              </li>
            </ul>
          </div>
        </Col>
        <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>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <div className={styles.card2}>
            <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}>
            <h3>
              成本数据
              <div
                onClick={() => setOpen(!open)}
                className={`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>
      </Row>
    </div>
  );
};

export default Work;