/** @format */

import React, { useEffect, useState } from 'react';

import Modal from '../../../baseComponents/Modal';
import useEdataListener from '../../../hooks/useEdataListener';
import { DispatchIOCEvent } from '../../../utils';
import { Container, Name, SubTitle, Text, Title } from './styled';
import SubModal from './SubModal';
import { getPersonLabelByType } from './utils';

/**
 * @description 人员管理
 *
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/95cc7e1b-4a91-48c7-b471-903b1f737273.png
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/9950dc57-af0d-46a9-a31d-ade914b85a26.png
 */

interface BizPersonManagementProps {
  /**
   * 容器大小
   */
  size?: { width: number; height: number };
  /**
   * 类型
   */
  type: 'control' | 'assist';
  /**
   * 显隐状态
   */
  visible: boolean;
  /**
   * 子标题
   */
  subTitle: string;
  /**
   * 数据源，统一为数组格式
   */
  data?: Record<string, any>[];
}

const BizPersonManagement = (props: BizPersonManagementProps) => {
  const { data, visible = false, type, subTitle } = props;
  const [modalVisible, setModalVisible] = useState(visible);
  const [subModalVisible, setSubModalVisible] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [modalType, setModalType] = useState(type);
  const [refreshKey, setRefreshKey] = useState(-1);

  const currentRecord = (data && data[currentIndex]) || null;

  useEdataListener('biz-person-management-show', (e: Record<string, any>) => {
    if (e && e.detail && e.detail.type === modalType) {
      setModalVisible(true);
      setRefreshKey(Math.random());
    }
  });

  useEdataListener('biz-person-management-hide', () => {
    setModalVisible(false);
    setSubModalVisible(false);
  });

  useEffect(() => {
    if (modalType) {
      DispatchIOCEvent('event-biz-person-management-visible-change', {
        visible: modalVisible,
        type: modalType,
      });
    }
  }, [modalVisible, modalType]);

  useEffect(() => {
    setModalVisible(visible);
  }, [visible]);

  useEffect(() => {
    setModalType(type);
  }, [type]);

  const modalProps = {
    title: modalType === 'control' ? '查看管控信息' : '查看帮扶信息',
    visible: modalVisible,
    width: 450,
    onCancel: () => setModalVisible(false),
  };

  const subModalProps = {
    refreshKey,
    title: '查看历史预警',
    visible: subModalVisible,
    width: 404,
    item: currentRecord,
    onCancel: () => setSubModalVisible(false),
  };

  return (
    <>
      <Modal {...modalProps} key={refreshKey}>
        <Container>
          <div className="custom-modal-content">
            <Title>
              <span>{subTitle}</span>
              <span className="ml16">
                {modalType === 'control' ? '管控' : '帮扶'}共{data?.length || 0}
                人
              </span>
            </Title>
            {currentRecord ? (
              <>
                <div className="person-list">
                  {data?.length
                    ? data.map((item, index) => (
                        <div
                          key={index}
                          className={`person-item ${
                            currentIndex === index ? 'active' : ''
                          }`}
                          onClick={() => setCurrentIndex(index)}
                        >
                          <div
                            className="img-box"
                            style={{
                              backgroundImage:
                                item.portrait !== null
                                  ? `url(${item.portrait})`
                                  : `url('https://gt-toolbox.oss-cn-beijing.aliyuncs.com/defaultPic-sViGsr%20.png')`,
                            }}
                          />
                          {/* <Name>{desensitization(item.name, 1, -1)}</Name> */}
                          <Name>{item.name || '-'}</Name>
                        </div>
                      ))
                    : null}
                </div>
                <SubTitle>人员基础信息</SubTitle>
                <div className="person-info">
                  <div
                    className="img-box"
                    style={{
                      backgroundImage:
                        currentRecord.portrait !== null
                          ? `url(${currentRecord.portrait})`
                          : `url('https://gt-toolbox.oss-cn-beijing.aliyuncs.com/defaultPic-sViGsr%20.png')`,
                    }}
                  />
                  <div className="right-box">
                    <Text>
                      {/* 姓名：{desensitization(currentRecord.name, 1, -1)} */}
                      姓名：{currentRecord.name || '-'}
                      <span
                        className={`label ${getPersonLabelByType(
                          currentRecord.type,
                        )}`}
                      >
                        {currentRecord.type || '-'}
                      </span>
                    </Text>
                    <Text>
                      {/* 身份证号：
                  {desensitization(currentRecord.identityCardNum, 6, -4)} */}
                      身份证号：{currentRecord.identityCardNum || '-'}
                    </Text>
                    <Text>
                      {/* 联系方式：{desensitization(currentRecord.phone, 4, -4)} */}
                      手机号码：{currentRecord.phone || '-'}
                    </Text>
                    <Text>
                      {/* 关联车辆：{desensitization(currentRecord.licensePlate, 3, -2)} */}
                      关联车牌：{currentRecord.licensePlate || '-'}
                    </Text>
                    <Text>关联房屋：{currentRecord.relationHouse || '-'}</Text>
                  </div>
                </div>
                <SubTitle>关联预警</SubTitle>
                <Text>
                  <Text className="lh28">
                    <span>最近一次关联预警：</span>
                    {currentRecord.warning ? (
                      <>
                        <span className="ml8 bold">
                          {currentRecord.warningType || '-'}
                        </span>
                        <span className="ml8">
                          {currentRecord.warningDate || '-'}
                        </span>
                        <span
                          className="ml8 pointer blue bold underline"
                          onClick={() => setSubModalVisible(true)}
                        >
                          查看历史预警
                        </span>
                      </>
                    ) : (
                      '无'
                    )}
                  </Text>
                </Text>
                <SubTitle>关注信息</SubTitle>
                <Text className="lh28">
                  风险等级：
                  <span
                    className={`level-block level-${currentRecord.attentionInfo
                      ?.level || '-'}`}
                  ></span>
                </Text>
                <Text className="lh28">
                  责任网格：
                  {currentRecord.attentionInfo?.responsibleGrid || '-'}
                </Text>
                <Text className="lh28">
                  {/* 责任领导：
              {desensitization(
                currentRecord.attentionInfo.responsibleLeader,
                1,
                -1,
              )} */}
                  责任领导：
                  {currentRecord.attentionInfo?.responsibleLeader || '-'}
                </Text>
                <Text className="lh28">
                  联系方式：
                  {/* {desensitization(currentRecord.attentionInfo.phone, 4, -4)} */}
                  {currentRecord.attentionInfo?.phone || '-'}
                </Text>
                <SubTitle>访查记录</SubTitle>
                <Text className="lh28">
                  最近访查时间：
                  {currentRecord.investigateInfo?.lastVisitDate || '-'}
                </Text>
                <Text className="lh28">
                  访查人姓名：
                  {/* {desensitization(currentRecord.investigateInfo.name, 1, -1)} */}
                  {currentRecord.investigateInfo?.name || '-'}
                </Text>
              </>
            ) : (
              <div className="no-data-tip">
                <div className="tip-content"></div>
              </div>
            )}
          </div>
        </Container>
      </Modal>
      <SubModal {...subModalProps} />
    </>
  );
};

export default BizPersonManagement;