import React, { useEffect, useState } from 'react';
import styles from './NormChart.less';
import { monitorService } from '../api';
import { Checkbox, Row, Input, Tooltip, Tag, Spin } from 'antd';
import ECHistoryInfo from '@wisdom-components/ec_historyinfo';
import HistoryView from '@wisdom-components/ec_historyview';

const { Search } = Input;
const CheckboxGroup = Checkbox.Group;
const NormChart = (props) => {
  const { deviceType, deviceCode, info } = props;
  const [normList, setNormList] = useState([]);
  const [checkedList, setCheckedList] = useState([info.sensorName]);
  const [searchStr, setSearchStr] = useState('');
  const [normListLoading, setNormListLoading] = useState(false);
  const getPumpConfig = () => {
    setNormListLoading(true);
    monitorService
      .GetDeviceQuotaList({
        accountName: deviceType,
      })
      .then((res) => {
        if (res.code === 0) {
          setNormList(res.data);
        } else {
          setNormList([]);
        }
        setNormListLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setNormListLoading(false);
      });
  };
  const onChange = (e) => {
    setCheckedList(e);
  };
  const search = (e) => {
    setSearchStr(e.target.value);
  };
  useEffect(() => {
    getPumpConfig();
  }, []);
  return (
    <div className={styles.normChart}>
      <div className={styles.listWrapper}>
        <div className={styles.normList}>
          <h3 className={styles.listTitle}>泵房指标</h3>
          <Search onChange={search} style={{ marginBottom: 10 }} />
          <CheckboxGroup
            style={{ height: 'calc(100% - 77px)', overflowY: 'scroll' }}
            onChange={onChange}
            value={checkedList}
          >
            <div style={{ display: 'flex', flexDirection: 'column', overflowY: 'scroll' }}>
              {normList
                .filter((item) => item.name.includes(searchStr))
                .map((item) => {
                  return (
                    <Row style={{ width: 'calc(100% - 20px)' }}>
                      <Checkbox value={item.name}>
                        <Tooltip title={item.name}>
                          <div
                            style={{
                              width: '120px',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            {item.name}
                          </div>
                        </Tooltip>
                      </Checkbox>
                    </Row>
                  );
                })}
            </div>
          </CheckboxGroup>
        </div>
      </div>
      <div className={styles.chartWrapper}>
        <Spin className={styles.normSpin} spinning={normListLoading} />
        {checkedList && checkedList.length ? (
          <div className={styles.selectedNorm}>
            <h3 className={styles.listTitle}>已选指标</h3>
            <div className={styles.selectedNormWrapper}>
              {checkedList.map((item) => {
                return (
                  <Tag
                    style={{ marginBottom: 8 }}
                    closable
                    color="#108ee9"
                    onClose={() => {
                      let _checkedList = [...checkedList];
                      _checkedList = _checkedList.filter((checked) => checked !== item);
                      setCheckedList(_checkedList);
                    }}
                  >
                    {item}
                  </Tag>
                );
              })}
            </div>
          </div>
        ) : (
          ''
        )}
        <div className={styles.chart}>
          {checkedList && checkedList.length && (
            <HistoryView
              title={'历史数据'}
              deviceParams={[
                {
                  deviceCode,
                  deviceType,
                  sensors: checkedList.join(','),
                },
              ]}
            />
          )}
        </div>
      </div>
    </div>
  );
};
export default NormChart;
