import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';
import Icon from '@/tenants-ui/Icon';
import styles from './index.less';
import cx from 'classnames';
import { equipImageMap } from '@/config/image.js';
import { Area } from '@ant-design/plots';

export default ({ onClose }) => {
  const [paramList, setParamList] = useState([
    {
      name: '温湿度',
      id: 'temperature&wet',
      content:
        '温度表示空气的冷热程度,夏季高温高湿会使人烦躁、疲倦,冬季湿度过高时，人体感觉越冷,冬季湿度低易引起呼吸道不舒适,室外温度较高时，宜遮阳关窗',
    },
    {
      name: 'CO₂',
      id: 'co2',
      content:
        'CO₂一种无色无味气体,CO₂的标准为1000ppm,CO₂过高，影响人体呼吸系统,大脑易疲劳，工作效率降低,室内人员增多，新风量不足时,室内CO₂的浓度就会上升,宜开窗通风或增加送风量来降低CO₂浓度',
    },
    {
      name: 'PM2.5',
      id: 'pm25',
      content:
        'PM2.5，直径≤2.5微米的颗粒，PM2.5的平均值在0-35μg/m3，PM2.5浓度过高，影响人体，呼吸系统和心血管系统健康，应开启除尘净化设备',
    },
    {
      name: '甲醛',
      id: 'jiaquan',
      content:
        '甲醛（HCHO）是无色有刺激性有机气体。甲醛的主要危害表现为对皮肤和黏膜的刺激作用。由于家具，胶水中的甲醛挥发是一个长期缓慢的过程，因此甲醛超标常表现为室内甲醛浓度长期处于较高的数值。',
    },
    {
      name: 'TVOC',
      id: 'tvoc',
      content:
        'TVOC，有毒有刺激性气味TVOC的标准为0.60mg/m3，TVOC超标，影响人体视觉，抽烟、涂料、燃烧、清洁剂，等会导致TVOC浓度升高，可通过通风、绿植、活性炭吸，附等方式减轻TVOC污染程度',
    },
  ]);
  //const [paramId, setParamId] = useState('temperature&wet');
  const [paramObj, setParamObj] = useState({});
  var data = [
    { Date: '2010-01', scales: 1998 },
    { Date: '2010-02', scales: 1850 },
    { Date: '2010-03', scales: 1720 },
    { Date: '2010-04', scales: 1818 },
    { Date: '2010-05', scales: 1920 },
    { Date: '2010-06', scales: 1802 },
    { Date: '2010-07', scales: 1945 },
    { Date: '2010-08', scales: 1856 },
    { Date: '2010-09', scales: 2107 },
    { Date: '2010-10', scales: 2140 },
    { Date: '2010-11', scales: 2311 },
    { Date: '2010-12', scales: 1972 },
    { Date: '2011-01', scales: 1760 },
    { Date: '2011-02', scales: 1824 },
    { Date: '2011-03', scales: 1801 },
    { Date: '2011-04', scales: 2001 },
    { Date: '2011-05', scales: 1640 },
    { Date: '2011-06', scales: 1502 },
    { Date: '2011-07', scales: 1621 },
    { Date: '2011-08', scales: 1480 },
    { Date: '2011-09', scales: 1549 },
  ];
  const config = {
    data,
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      //   range: [0, 1],
      tickCount: 5,
      line: {
        style: {
          stroke: '#ECEFF4',
          lineWidth: 1,
        },
      },
      tickLine: null,
    },
    yAxis: {
      grid: {
        line: {
          style: {
            stroke: '#ECEFF4',
            lineWidth: 1,
          },
        },
      },
    },
    areaStyle: () => {
      return {
        fill: 'l(270) 0:#ffffff 1:#3C76E7',
      };
    },
  };

  const itemClick = (item) => {
    //setParamId(item.id);
    setParamObj(item);
  };

  useEffect(() => {
    console.log('chartModal-effect');
    setParamObj(paramList[0]);
  }, []);

  return (
    <>
      <Modal width={550} visible maskClosable={false} closable={false} footer={null}>
        <div className={styles.main}>
          <div className={styles.header}>
            <div className={styles.title}>1#-1312</div>
            <div className={styles.close} onClick={onClose}>
              <Icon type="close" />
            </div>
          </div>
          <div className={styles.content}>
            <div className={styles.navigator}>
              {paramList.map((item, index) => {
                return (
                  <div
                    className={cx(styles.nitem, { [styles.sel]: item.id == paramObj.id })}
                    key={'navc' + item.id}
                    onClick={() => {
                      itemClick(item);
                    }}
                  >
                    {item.name}
                  </div>
                );
              })}
            </div>
            <div className={styles.chart}>
              <Area {...config} />
              {/* <img src={equipImageMap.chartTemp} style={{ width: '100%' }}></img> */}
            </div>
            <div className={styles.foot}>
              <div className={styles.l}>{paramObj.name}</div>
              <div className={styles.r}>{paramObj.content}</div>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};
