//单兵直达事件详情
import EventLeftInfo from '../EventLeftInfo';
import services from '@/services';
import { ensureLength, imageOptions } from '@/utils/comm';
import { Flex, Image, Popover, Progress, Space } from 'antd';
import classNames from 'classnames';
import { CSSProperties, useEffect, useState } from 'react';
import styles from './index.less';
interface LabelNumProps {
  preLabel?: string;
  number: string | undefined;
  color?: string; //颜色
  afterLabel?: string;
}

//封装的LabelNum
const LabelNum: React.FC<LabelNumProps> = ({
  preLabel,
  number,
  color = '#3D4566',
}) => {
  return (
    <p className={styles.labelNumWrap}>
      {preLabel}
      <b style={{ '--color': color } as CSSProperties}>{number}</b>
    </p>
  );
};
interface DirectEventDetailProps {
  eventId: string; //事件id
  eventDetail: API.EventDetailDto; //基本信息
}
const DirectEventDetail: React.FC<DirectEventDetailProps> = ({
  eventId,
  eventDetail,
}) => {
  const [stautusInfo, setStautusInfo] =
    useState<DealAPI.DisposalStatusInfoDto>(); //事件状态
  const [supervisionPerson, setSupervisionPerson] =
    useState<DealAPI.SupervisionUserDto>(); //处置人员
  useEffect(() => {
    queryDisposalStatus();
    getSupervisionInfoApi();
  }, [eventId]);

  //获取指令直达单兵监督信息处置信息状态
  const queryDisposalStatus = (caseId: string = eventId) => {
    services.DealQuery.getDisposalStatusInfo(caseId).then((res) => {
      if (res.code === 200) {
        setStautusInfo(res.data);
      }
    });
  };

  //获取指令直达单兵监督信息处置信息
  const getSupervisionInfoApi = (caseId: string = eventId) => {
    services.DealQuery.getSupervisionInfo(caseId).then((res) => {
      if (res.code === 200) {
        setSupervisionPerson(res.data);
      }
    });
  };
  // 是否签收
  let signTimeText = supervisionPerson?.directSingleSupervision.signTimeText;

  //状态显示
  const directStatus = (stauts: any) => {
    let config: Record<any, { text: string; icon: string; color: string }> = {
      3: {
        text: '严重超期',
        icon: 'warn',
        color: '#FF6085',
      },
      2: {
        text: '轻微超期',
        icon: 'timer',
        color: '#FFB762',
      },
      1: {
        text: '临近超期',
        icon: 'timer',
        color: '#FFB762',
      },
      60: {
        text: '处置中',
        icon: 'deal',
        color: '#01BE85',
      },
    };
    return (
      config[stauts] ?? {
        icon: 'deal',
        color: '#01BE85',
      }
    );
  };
  return (
    <div className={styles.wrap}>
      <Space className={styles.node} size="middle">
        <img
          src={require('@/assets/images/event/nodeIcon.png')}
          className={styles.icon}
        />
        <b className={styles.nodeTitle}>事件已调度至“诚管24”提级办理</b>
      </Space>
      <Flex gap={15} className={styles.infoWrap}>
        <div className={styles.info}>
          <EventLeftInfo eventInfo={eventDetail} imgHeight={402} />
        </div>
        <div className={styles.right}>
          <Flex
            className={styles.statusWrap}
            align="center"
            justify="space-between"
          >
            <div className={styles.total}>
              <img
                src={require(`@/assets/images/event/${
                  directStatus(stautusInfo?.caseStatus)?.icon
                }.png`)}
                className={styles.icon}
              />
              <span
                className={styles.stauts}
                style={{ color: directStatus(stautusInfo?.caseStatus)?.color }}
              >
                {stautusInfo?.caseStatusDes}
              </span>
              <Flex wrap gap={46}>
                <LabelNum
                  number={stautusInfo?.doTimeText}
                  preLabel="处置时间"
                />
                {/* <LabelNum
                  number={stautusInfo?.remainingTimeText}
                  preLabel="剩余"
                /> */}
              </Flex>
            </div>
            {/* <Progress
              percent={Number(stautusInfo?.timeProgress)}
              status="active"
              strokeColor="linear-gradient(90deg, #01BE85 0%, #39DEAC 100%)"
              trailColor="#BCCDE7"
              style={{ width: '300px' }}
              percentPosition={{ align: 'center', type: 'inner' }}
              size={[300, 18]}
              showInfo={false}
            /> */}
          </Flex>

          <Flex justify="space-between">
            <div className={styles.userWrap}>
              <span className={styles.circulation}>处置指令直达</span>
              {ensureLength(
                supervisionPerson?.directSingleSupervisions || ([] as any),
                6,
              )?.map((it, index) => (
                <div
                  key={index}
                  className={classNames(
                    styles.item,
                    !it?.personName && styles.empty,
                  )}
                >
                  {it?.personName && (
                    <>
                      <span className={styles.tag}>
                        {it.supervisionLevelText}
                      </span>
                      <Flex gap={10}>
                        <Image
                          {...imageOptions}
                          src={
                            it.avatar ??
                            require('@/assets/images/event/userPic.png')
                          }
                          style={{ objectFit: 'cover' }}
                          className={styles.userPic}
                        />
                        <div>
                          <Popover content={it.personName}>
                            <b
                              className={classNames(
                                styles.name,
                                'textellipsis',
                              )}
                            >
                              {it.personName}
                            </b>
                          </Popover>
                          <p className={styles.dept}>{it.deptName}</p>
                        </div>
                      </Flex>
                      <Flex className={styles.time} gap={10} align="center">
                        <img
                          src={require(`@/assets/images/event/${
                            it.supervisionTime ? 'chapter' : 'chapterDisable'
                          }.png`)}
                        />
                        <div>
                          <span className={styles.text}>
                            {it.supervisionStatus}
                          </span>
                          <p className={styles.date}>{it.supervisionTime}</p>
                        </div>
                      </Flex>
                    </>
                  )}
                </div>
              ))}
            </div>
            <Flex
              className={styles.finalUser}
              vertical
              align="center"
              justify="center"
              gap={12}
            >
              <Image
                {...imageOptions}
                src={
                  supervisionPerson?.directSingleSupervision.avatar ??
                  require('@/assets/images/event/userPic2.png')
                }
                style={{ objectFit: 'cover' }}
                className={styles.headPic}
              />
              <p className={styles.name}>
                {supervisionPerson?.directSingleSupervision.personName}
              </p>
              <p className={styles.role}>
                {supervisionPerson?.directSingleSupervision.positionName ??
                  '无'}
              </p>
              <span>{supervisionPerson?.directSingleSupervision.deptName}</span>
              {Number(signTimeText) > 0 ? (
                <span className={styles.readTime}>已读{signTimeText}</span>
              ) : (
                <span className={styles.noReadTime}>未读</span>
              )}
              <Flex className={styles.toolIcon}>
                <img src={require('@/assets/images/event/microphone.png')} />
                <img src={require('@/assets/images/event/video.png')} />
                <img src={require('@/assets/images/event/audio.png')} />
              </Flex>
            </Flex>
          </Flex>
        </div>
      </Flex>
    </div>
  );
};
export default DirectEventDetail;
