import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import {
  queryGateList,
  queryGateOverView,
  queryMonitorList,
  queryMonitorOnlineCount,
} from '@/services/safety';
import { UnityAction } from '@/utils/utils';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
const doorIcon = require('@/assets/deviceManager/doorIcon.png');
const videoIcon = require('@/assets/air-conditioner.png');
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
const DeviceManager = () => {
  const { projectId } = useParams();
  const [tab, setTab] = useState(localStorage.safeTab || '1');

  //门禁接口
  const { data, run, loading } = useRequest(
    () => queryGateList({ project_id: projectId }),
    {
      manual: true,
    },
  );
  const {
    data: dataOver,
    run: runOver,
    loading: loadingOver,
  } = useRequest(() => queryGateOverView({ project_id: projectId }), {
    manual: true,
  });

  //视频接口
  const {
    data: dataVList,
    run: runVideo,
    loading: loadingVList,
  } = useRequest(() => queryMonitorList(projectId));
  const {
    data: dataVOnline,
    run: runVOnLine,
    loading: loadingVOnline,
  } = useRequest(() => queryMonitorOnlineCount(projectId));

  useEffect(() => {
    if (data?.list && tab == '2')
      UnityAction.sendMsg('doorData', JSON.stringify(data?.list));
    if (dataVList?.list && tab == '1')
      UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
  }, [data, dataVList]);

  const handleTabChange = (tab) => {
    setTab(tab);
    if (tab == '1') {
      runVideo();
      runVOnLine();
    } else {
      run();
      runOver();
    }
  };
  useEffect(() => {
    localStorage.safeTab = '1'
    if(tab == '2') {
      run();
      runOver();
    }
  },[])
  return (
    <PageContent tabs>
      <TabsContent
        defaultActiveKey={tab}
        onChange={handleTabChange}
        items={[
          {
            label: `视频监控`,
            key: '1',
            children: (
              <Video
                data={dataVList?.list}
                dataOnline={dataVOnline}
                loading={loadingVList}
                projectId={projectId}
              />
            ),
          },
          {
            label: `门禁监控`,
            key: '2',
            children: (
              <Door
                data={data?.list}
                dataOver={dataOver}
                loading={loading}
                projectId={projectId}
              />
            ),
          },
        ]}
      />
    </PageContent>
  );
};
const Video = ({ projectId, data, dataOnline, loading }) => {
  const renderRed = (item) => {
    return (
      <div className={styles.cardItem}>
        <div
          className={item.Online ? styles.onlinePoint : styles.outlinePoint}
        />
        <span className={styles.name}>{item.Name}</span>
      </div>
    );
  };
  return (
    <Space direction="vertical" size={16} className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <div className={styles.titleLeft}>
          <img className={styles.img} src={videoIcon} />
          <div className={styles.textCon}>
            <div className={styles.num}>{dataOnline?.total || 0}</div>
            <div className={styles.text}>在库数量（个）</div>
          </div>
        </div>
        <div>
          <div className={styles.lTextCon1}>
            <div className={styles.onlinePoint} />
            <span className={styles.text}>在线：{dataOnline?.online || 0}</span>
          </div>
          <div className={styles.lTextCon2}>
            <div className={styles.outlinePoint} />
            <span className={styles.text}>
              离线：{dataOnline?.offline || 0}
            </span>
          </div>
        </div>
      </div>

      {data?.map((item, idx) => (
        <div key={`video_${idx}`} className="card-box">
          {renderRed(item)}
        </div>
      ))}
    </Space>
  );
};
const Door = ({ data, dataOver, loading, projectId }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    localStorage.safeTab = '2'
    navigate(`/safety/detail/${projectId}`);
  };

  const renderRed = (item) => {
    return (
      <div className={styles.cardItem}>
        <div
          className={item?.status ? styles.onlinePoint : styles.outlinePoint}
        />
        <span className={styles.name}>{item?.name}</span>
      </div>
    );
  };
  return (
    <Space direction="vertical" size={16} className={styles.doorPart}>
      <div className={styles.titleContent}>
        <div className={`card-box ${styles.cardLeft}`}>
          <div className={styles.up}>
            <img className={styles.img} src={doorIcon} />
            <div className={styles.textCon}>
              <div className={styles.num}>{dataOver?.total}</div>
              <div className={styles.text}>门禁数量（个）</div>
            </div>
          </div>
          <div className={styles.bottom}>
            <div className={styles.lTextCon2}>
              <div className={styles.onlinePoint} />
              <span className={styles.text}>在线：{dataOver?.online}</span>
            </div>
            <div className={styles.lTextCon2}>
              <div className={styles.outlinePoint} />
              <span className={styles.text}>离线：{dataOver?.offline}</span>
            </div>
          </div>
        </div>
        <div className={`card-box ${styles.cardRight}`}>
          <div className={styles.textContent}>
            <div className={styles.in} />
            <span className={styles.text}>今日进厂人数：{2}</span>
          </div>
          <div className={styles.textContent}>
            <div className={styles.out} />
            <span className={styles.text}>今日出厂人数：{2}</span>
          </div>
          <Button className={styles.btn} onClick={handleClick}>
            门禁日志
          </Button>
        </div>
      </div>
      {data?.map((item, idx) => (
        <div key={`door_${idx}`} className="card-box">
          {renderRed(item)}
        </div>
      ))}
    </Space>
  );
};

export default DeviceManager;