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, Spin } 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 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 || loadingOver}
                projectId={projectId}
              />
            ),
          },
        ]}
      />
    </PageContent>
  );
};
const Video = ({ 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 (
    <Spin spinning={loading}>
      <div className="content-tab">
        <div className={styles.sparePart}>
          <div className={styles.titleContent}>
            <div className={styles.titleLeft}>
              <img className={styles.img} src={videoIcon} />
              <div className={styles.textCon}>
                <div className="value-number">{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>
          <div className={styles.listContent}>
            {data?.map((item, idx) => (
              <div
                key={`video_${idx}`}
                className={`card-box ${styles.listItem}`}
              >
                {renderRed(item)}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Spin>
  );
};
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 (
    <Spin spinning={loading}>
      <div className="content-tab">
        <div className={styles.doorPart}>
          <div className={styles.titleContent}>
            <div className={styles.cardLeft}>
              <div className={styles.up}>
                <img className={styles.img} src={doorIcon} />
                <div className={styles.textCon}>
                  <div className="value-number">{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={styles.cardRight}>
              <div className={styles.textContent}>
                <div className={styles.in} />
                <span className={styles.text}>
                  今日进厂次数：{dataOver?.today_in}
                </span>
              </div>
              <div className={styles.textContent}>
                <div className={styles.out} />
                <span className={styles.text}>
                  今日出厂次数：{dataOver?.today_out}
                </span>
              </div>
              <Button className={styles.btn} onClick={handleClick}>
                门禁日志
              </Button>
            </div>
          </div>
          <div className={styles.listContent}>
            {data?.map((item, idx) => (
              <div
                key={`door_${idx}`}
                className={`card-box ${styles.listItem}`}
              >
                {renderRed(item)}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Spin>
  );
};

export default DeviceManager;