import { UnityAction } from '@/utils/utils';
import { Collapse, Empty, Spin, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import styles from './VideoAnalysis.less';

const { TabPane } = Tabs;
const { Panel } = Collapse;

function VideoAnalysis(props) {
  const { data, loading } = props;

  const [prevKey, setPrevKey] = useState();
  const [selectedName, setSelectedName] = useState('');

  const handleCollapse = (key) => {
    if (key === prevKey) return;
    setPrevKey(key);
    const device = data.list.find((item) => item.id === key)?.device_name;
    if (device) {
      UnityAction.sendMsg('SynCam', device);
    }
  };

  useEffect(() => {
    UnityAction.on('SynCam', selectedItem);
    return () => UnityAction.off('SynCam', selectedItem);
  }, [data?.list]);

  //滚动到相应位置
  const selectedItem = (e) => {
    setSelectedName(e);
    const dom = document.querySelector(`div[data-name="${e}"]`);
    if (dom) {
      let v = document.getElementById('videoContent');
      v.scrollTop = dom.offsetTop;
    }
  };

  return (
    <Spin spinning={loading}>
      <div
        id="videoContent"
        className={styles.page}
        style={{ height: 'calc(100vh - 422px)', overflow: 'auto' }}
      >
        {data?.list?.length > 0 ? (
          data?.list?.map((item) => (
            <div data-name={item.device_name}>
              <Collapse
                defaultActiveKey={[item.id]}
                key={item.id}
                className={
                  selectedName == item.device_name || prevKey == item.id
                    ? styles.tableSelect
                    : styles.table
                }
                expandIconPosition="right"
                onChange={(e) => {
                  handleCollapse(item.id);
                }}
              >
                <Panel header={item.device_name} key={item.id}>
                  <AnalysisContent item={item} />
                </Panel>
              </Collapse>
            </div>
          ))
        ) : (
          <Empty />
        )}
        {/* {data?.list?.map(item => (
          <Collapse
            defaultActiveKey={[item.id]}
            key={item.id}
            className={
              selectedName == item.device_name || prevKey == item.id
                ? styles.tableSelect
                : styles.table
            }
            expandIconPosition="right"
            onChange={e => {
              handleCollapse(item.id);
            }}
          >
            <Panel header={item.device_name} key={item.id}>
              <AnalysisContent item={item} />
            </Panel>
          </Collapse>
        ))} */}
      </div>
    </Spin>
  );
}

function AnalysisContent({ item }) {
  const handleImgClick = () => {
    localStorage.setItem('preview', JSON.stringify(item.data));
    UnityAction.sendMsg('SensorPic');
  };

  return (
    <div className={styles.box}>
      {/* <div className={styles.item} style={{ width: '48%' }}>
        <div className={styles.label} style={{ lineHeight: '66px' }}>
          温度数据：
        </div>
        <div className={styles.content}>
          <NewNumberBar breakdown={breakdown} exception={exception} current={0.05} scale />
        </div>
      </div>
      <div className={styles.item} style={{ width: '48%' }}>
        <div className={styles.label} style={{ lineHeight: '66px' }}>
          噪音数据：
        </div>
        <div className={styles.content}>
          <NewNumberBar breakdown={breakdown} exception={exception} current={0.05} scale />
        </div>
      </div> */}
      <div className={styles.item}>
        <div className={styles.label}>画面报警：</div>
        <div className={styles.content}>
          {item.event_type}
          <img className={styles.img} src={item.url} onClick={handleImgClick} />
        </div>
      </div>
      {/* <div className={styles.item}>
        <div className={styles.label}>可能原因：</div>
        <div className={styles.content}>
          建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%
        </div>
      </div>
      <div className={styles.item}>
        <div className={styles.label}>解决方案：</div>
        <div className={styles.content}>
          建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%建议调整杀菌周期为27分，下调10.00%
        </div>
      </div> */}
    </div>
  );
}

export default VideoAnalysis;
