import { getComparisonData } from '@/services/OperationManagement';
import { queryConditionSnapshot } from '@/services/SmartOps';
import { getToken, UnityAction } from '@/utils/utils';
import { LoadingOutlined } from '@ant-design/icons';
import { connect, useParams, useRequest } from '@umijs/max';
import dayjs from 'dayjs';
import { useEffect } from 'react';
import CircleScore from '../Smart/components/CircleScore';
import styles from './index.less';

const HomePage = (props) => {
  const { projectId } = useParams();

  const { data } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
  });
  return (
    <div className={styles.content}>
      <LeftContent data={data} />
      <CenterContent />
      <RightContent data={data} />
    </div>
  );
};

const LeftContent = (props) => {
  const { data } = props;
  return (
    <div className={styles.left}>
      <SmartWork data={data} />
      <WaterAmt data={data} />
      <WaterQuality data={data} />
    </div>
  );
};
const CenterContent = () => {
  return (
    <div className={styles.centerBox}>
      <Scada />
    </div>
  );
};
const RightContent = (props) => {
  const { data } = props;
  return (
    <div className={styles.right}>
      <SelfInspection />
      <Electric data={data} />
      <Medicine />
    </div>
  );
};

// 水厂工况
const SmartWork = (props) => {
  const { data } = props;
  return (
    <Box
      title="水厂工况"
      onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
    >
      <div className={styles.scoreBox}>
        <CircleScore>
          {data?.score}
          <div className={styles.grade}>{data?.grade}</div>
        </CircleScore>
        <div className={styles.scoreTitle}>
          当前运行{data?.grade}，可继续优化
        </div>
        <div className={styles.time}>
          {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
        </div>
      </div>
    </Box>
  );
};

// 水量监测
const WaterAmt = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="水量监测"
      onClick={() => UnityAction.sendMsg('menuItem', '水量监测')}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.fwa}</div>
          <div className={styles.name}>进水量</div>
        </li>
        <li>
          <div className={styles.value}>{data?.dwa}</div>
          <div className={styles.name}>产水量</div>
        </li>
      </ul>
    </Box>
  );
};

// 水质监测
const WaterQuality = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="水质监测"
      onClick={() => UnityAction.sendMsg('menuItem', '水质监测')}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.dsan}</div>
          <div className={styles.name}>出水余氯</div>
        </li>
        <li>
          <div className={styles.value}>{data?.dtur}</div>
          <div className={styles.name}>出水浊度</div>
        </li>
      </ul>
    </Box>
  );
};

// 系统自检
const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
  autoReport: eqSelfInspection.autoReport,
  loading: loading.models['eqSelfInspection'],
}))((props) => {
  const { autoReport, dispatch, loading } = props;
  const { projectId } = useParams();

  const renderStatus = () => {
    if (loading) return <LoadingOutlined />;
    if (autoReport.Status > 0) {
      return <span style={{ color: '#FE5850' }}>异常</span>;
    }
    return <span style={{ color: '#F5A623' }}>正常</span>;
  };

  useEffect(() => {
    dispatch({
      type: 'eqSelfInspection/getAutoPatrol',
      payload: {
        projectId,
      },
    });
  }, []);

  return (
    <Box
      title="系统自检"
      onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
    >
      <div className={styles.insTag}>自检中</div>

      <div className={styles.insStatus}>{renderStatus()}</div>
      <div className={styles.time} style={{ marginBottom: 30 }}>
        {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')}
      </div>
    </Box>
  );
});

// 能耗监测
const Electric = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="能耗监测"
      onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.elec}</div>
          <div className={styles.name}>用电量</div>
        </li>
      </ul>
    </Box>
  );
};
// 药耗监测
const Medicine = () => {
  const { projectId } = useParams();
  const time = dayjs().format('YYYY-MM');

  const { data } = useRequest(getComparisonData, {
    defaultParams: [
      {
        project_id: projectId,
        start: time,
        end: time,
        type: 1,
        flag: 1,
      },
    ],
    formatResult(res) {
      return res[0];
    },
  });
  return (
    <Box
      title="药耗监测"
      onClick={() => UnityAction.sendMsg('menuItem', '药耗监测')}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.value?.toFixed(2) || '-'}元</div>
          <div className={styles.name}>当月吨水药成本</div>
        </li>
      </ul>
    </Box>
  );
};

// 工艺监控
const Scada = () => {
  const { projectId } = useParams();
  const token = getToken();
  let domain =
    process.env.NODE_ENV === 'production'
      ? 'http://120.55.44.4:8900/'
      : 'http://47.96.12.136:8788/';
  const src = `${domain}smart-water/scada/index.html#/3dview/${projectId}/267?JWT-TOKEN=${token}&hideTitle=true`;
  return (
    <Box
      title="工艺监控"
      onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')}
    >
      <div className={styles.scadaContent}>
        <iframe
          style={{
            width: '100%',
            height: '100%',
            border: 'none',
            pointerEvents: 'none',
          }}
          src={src}
        />
      </div>
    </Box>
  );
};

const Box = ({ title, children, onClick }) => {
  return (
    <div className={styles.box} onClick={onClick}>
      <div className={styles.boxTitle}>{title}</div>
      {children}
    </div>
  );
};

export default HomePage;