import services from '@/services';
import { useLocation } from '@umijs/max';
import { useInterval } from 'ahooks';
import { Flex, Popover, Space } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { memo, useCallback, useEffect, useState } from 'react';
import styles from './index.less';
require('dayjs/locale/zh-cn');
dayjs.locale('zh-cn');
/** @name Header */
const Header = memo(() => {
  const location = useLocation();
  const isOverviewMode = location.pathname === '/overview';
  // const handleModeChange = (checked: boolean) => {
  //   // true 为统览模式, false 为专题模式
  //   navigate(checked ? '/overview' : '/home/urbanSituation');
  // };

  const [date, setDate] = useState<any>();

  useInterval(() => {
    setDate({
      time: dayjs().format('HH:mm:ss'),
      day: dayjs().format('YYYY-MM-DD'),
      week: dayjs().format('dddd'),
    });
  }, 1000);

  const [personData, setPersonData] = useState<any>([]);
  const getData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-zhzh-zbqk',
      params: {
        zbrq: dayjs().format('YYYY-MM-DD'),
      },
    });
    if (resp.code === 200) {
      setPersonData(resp.data?.data?.records || []);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  const handleJump = useCallback(() => {
    const url = 'https://10.1.174.34:13000';
    window.open(url, '_blank');
  }, []);

  return (
    <div className={styles.container}>
      <img
        src={require('@/assets/images/common/title.png')}
        className={styles.title}
        alt=""
      />
      <Space
        size={30}
        className={classNames(styles.leftSpace, {
          [styles.overviewCard]: isOverviewMode,
        })}
      >
        <div
          className={classNames(styles.leftCard, {
            [styles.overviewCard]: isOverviewMode,
          })}
        >
          <Popover
            placement="bottom"
            title={
              <div
                style={{
                  fontSize: 20,
                  color: '#D6E2FF',
                  fontFamily: 'DingTalk JinBuTi',
                }}
              >
                副指挥长
              </div>
            }
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical style={{ padding: '10px 15px' }}>
                <div
                  style={{
                    fontSize: 24,
                    color: '#fff',
                    fontWeight: 700,
                    margin: '20px 0',
                  }}
                >
                  {/* 单蓉莉 18982293999 */}
                  {
                    personData?.find((item) => item.jsmc === '副指挥长')
                      ?.zbry[0]?.xm
                  }
                  {
                    personData?.find((item) => item.jsmc === '副指挥长')
                      ?.zbry[0]?.zbdh
                  }
                </div>
                {/* <div style={{ fontSize: 18, color: '#9CB3ED' }}>
                  市城管委党组成员副主任
                </div> */}
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>副指挥长</div>
              <div
                style={{
                  color: '#fff',
                  fontWeight: 700,
                  margin: '0 20px 0 15px',
                }}
              >
                {
                  personData?.find((item) => item.jsmc === '副指挥长')?.zbry[0]
                    ?.xm
                }
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
        <div
          className={classNames(styles.leftCard, {
            [styles.overviewCard]: isOverviewMode,
          })}
        >
          <Popover
            placement="bottom"
            title={<></>}
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical style={{ padding: '10px 15px' }}>
                <div
                  style={{
                    fontSize: 20,
                    color: '#D6E2FF',
                    fontFamily: 'DingTalk JinBuTi',
                  }}
                >
                  专职值班长
                </div>
                <div
                  style={{
                    fontSize: 24,
                    lineHeight: 1,
                    color: '#fff',
                    fontWeight: 700,
                    margin: '12px 0',
                  }}
                >
                  {/* 苏杨 15828558989 */}
                  {
                    personData?.find((item) => item.jsmc === '专职值班长')
                      ?.zbry[0]?.xm
                  }
                  {
                    personData?.find((item) => item.jsmc === '专职值班长')
                      ?.zbry[0]?.zbdh
                  }
                </div>
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>专职值班长</div>
              <div
                style={{
                  color: '#fff',
                  fontWeight: 700,
                  margin: '0 20px 0 15px',
                }}
              >
                {
                  personData?.find((item) => item.jsmc === '专职值班长')
                    ?.zbry[0]?.xm
                }
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
        <div
          className={classNames(styles.leftCard, {
            [styles.overviewCard]: isOverviewMode,
          })}
        >
          <Popover
            placement="bottom"
            title={
              <div
                style={{
                  fontSize: 20,
                  color: '#D6E2FF',
                  fontFamily: 'DingTalk JinBuTi',
                }}
              >
                值班员
              </div>
            }
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical>
                {personData
                  ?.find((item) => item.jsmc === '值班员')
                  ?.zbry?.filter(
                    (item) => item.jsmc === '值班员' && item.sdmc === '白班',
                  )
                  ?.map((v) => (
                    <div
                      key={v.zbdh}
                      style={{
                        fontSize: 24,
                        color: '#fff',
                        fontWeight: 700,
                        marginBottom: 12,
                        lineHeight: 1,
                      }}
                    >
                      {v.xm} {v.zbdh}
                    </div>
                  ))}
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>值班员</div>
              <div
                style={{
                  color: '#fff',
                  fontWeight: 700,
                  margin: '0 20px 0 15px',
                }}
              >
                {personData
                  ?.find((item) => item.jsmc === '值班员')
                  ?.zbry?.filter(
                    (item) => item.jsmc === '值班员' && item.sdmc === '白班',
                  )
                  ?.map((v) => v.xm)
                  ?.join('、')}
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
        <Space>
          <div>
            <div className={styles.time}>{date?.time}</div>
            <div className={styles.day}>{date?.day}</div>
          </div>
          <div className={styles.divider}></div>
          <div className={styles.weeks}>{date?.week}</div>
        </Space>
      </Space>
      <Space size={20}>
        {/* <ModeSwitch checked={isOverviewMode} onChange={handleModeChange} /> */}
        <div
          className={classNames(styles.rightCard, {
            [styles.overviewCard]: isOverviewMode,
          })}
          onClick={handleJump}
        >
          指挥调度
        </div>
      </Space>
    </div>
  );
});

export default Header;
