import React, { useState, useEffect } from 'react';
import { Modal, Row, Col } from 'antd';
import Icon from '@/tenants-ui/Icon';
import styles from './index.less';
import { equipImageMap } from '@/config/image.js';
import AirEq from './airEq';
import LampEq from './lampEq';
import CurtainEq from './curtainEq';
import { getSpaceAdjustList } from '@/services/ant-design-pro/equipment';

export default ({ onClose }) => {
  const envArr = [
    {
      name: '温度',
      id: 'temperature',
      num: '0',
      describe: '--',
    },
    {
      name: 'CO₂',
      id: 'co2',
      num: '0',
      describe: '--',
    },
    {
      name: 'PM2.5',
      id: 'pm25',
      num: '0',
      describe: '--',
    },
    {
      name: '甲醛',
      id: 'hcho',
      num: '0',
      describe: '--',
    },
    {
      name: '湿度',
      id: 'humidity',
      num: '0',
      unit: '%',
      describe: '--',
    },
  ];
  const checkLevel = (value, name) => {
    if (value || value == 0) {
      let objList = {
        temperature: {
          range: [20, 24],
          text: ['偏冷', '舒适', '偏热'],
        },
        humidity: {
          range: [30, 70],
          text: ['干燥', '适宜', '湿润'],
        },
        co2: {
          range: [800, 1500],
          text: ['适宜', '偏高', '超标'],
        },
        pm25: {
          range: [35, 75],
          text: ['优', '良', '差'],
        },
        hcho: {
          range: [0.08, 0.1],
          text: ['适宜', '偏高', '超标'],
        },
      };
      let sortArr = [value, ...objList[name].range].sort((a, b) => {
        return a - b;
      });

      let level = sortArr.findIndex((item) => item === value);
      let levelTxt = objList[name].text[level];
      return { level, levelTxt };
    } else {
      return { level: '--', levelTxt: '--' };
    }
  };
  const { officeImg } = equipImageMap;
  const [currentType, setCurrentType] = useState('3s');
  const [spaceName, setSpaceName] = useState('王总办公室');
  const [paramList, setParamList] = useState([]);

  useEffect(() => {
    const paramsObj = {
      criteria: {
        spaceId: 'Sp1101080259a0fc148d72f242fe9300566c12e15bf4',
        projectId: 'Pj1101080259',
      },
      pubname: 'sagacareAndtenantslink',
      openid: '9a1ecfbacb6b4f249bf2dd3ec7793ead', // userId
    };
    getSpaceAdjustList(paramsObj).then((res) => {
      res.content &&
        res.content.forEach((item, idx) => {
          envArr.forEach((jtem, jdx) => {
            jtem.describe = checkLevel(item[jtem.id], jtem.id).levelTxt;
            if (jtem.id == 'humidity') {
              jtem.num = item[jtem.id].toFixed(0);
            } else if (jtem.id == 'hcho') {
              jtem.num = item[jtem.id].toFixed(2);
            } else {
              jtem.num = item[jtem.id];
            }
          });
          console.log(paramList, 'paramListparamList');
          setParamList(envArr);
        });
    });
  }, []);

  return (
    <>
      <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
        <div className={styles.main}>
          <div className={styles.header}>
            <div className={styles.show}>
              <div className={styles.tileline}>
                <img src={officeImg} className={styles.titleIcon}></img>
                <span>1#-1312</span>
              </div>
              <div className={styles.timeLine}>
                使用时间:<span>08:00-20:00</span>
              </div>
            </div>
            <div className={styles.close} onClick={onClose}>
              <Icon type="close" />
            </div>
          </div>
          <div className={styles.content}>
            <div className={styles.infoList}>
              {paramList.map((item, index) => {
                return (
                  <div className={styles.item} key={'navc' + item.id}>
                    <div className={styles.title}>{item.name}</div>
                    <div className={styles.num}>
                      {item.num}
                      {item.unit}
                    </div>
                    <div className={styles.describe}>{item.describe}</div>
                  </div>
                );
              })}
            </div>
            <div className={styles.devices}>
              <Row gutter={[12, 18]}>
                <Col span={12}>
                  <AirEq></AirEq>
                </Col>
                <Col span={12}>
                  <LampEq></LampEq>
                </Col>
                <Col span={12}>
                  <CurtainEq></CurtainEq>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};
