/** @format */

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

import Modal from '../../../baseComponents/Modal';
import { desensitization } from '../../../utils';
import RelationWarningChart from './RelationWarningChart';
import { SubModalWrapper } from './styled.subModal';
import TabMode from './TabMode';
import { getHouseItemColorByType } from './utils';

/**
 * @description 房屋列表
 */

interface SubModalProps {
  item: Record<string, any> | null;
  visible: boolean;
  refreshKey: number;
}

const SubModal = (props: SubModalProps) => {
  const { item, refreshKey, ...otherProps } = props;
  const { visible } = props;
  const [tabState, setTabState] = useState('basic-info');
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    return () => setTabState('basic-info');
  }, [visible]);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
      setWidth(node.getBoundingClientRect().width);
    }
  }, []);

  function handleTabChange(value: any) {
    setTabState(value);
  }

  if (!item) {
    return null;
  }

  function getHouseItemByType(type: string) {
    switch (type) {
      case 'not_auth': {
        return '未认证';
      }
      case 'self_use': {
        return '自用';
      }
      case 'rent_out': {
        return '出租';
      }
      case 'idle': {
        return '空置';
      }

      default: {
        return '自用';
      }
    }
  }
  return (
    <Modal {...otherProps} style={{ left: 140 }} key={refreshKey}>
      <TabMode tabState={tabState} handleTabChange={handleTabChange}></TabMode>
      <SubModalWrapper>
        <div className="title-info">
          <div className="title">{`${item.project}${item.building ||
            ''}${item.unit || ''}${item.room}`}</div>
          <div
            className="type-box"
            style={{ background: getHouseItemColorByType(item.type) }}
          >
            {getHouseItemByType(item.type) || '自用'}
          </div>
        </div>
        {tabState === 'basic-info' && (
          <div ref={measuredRef}>
            <div className="center-box">
              <div className="owner-info">
                <div className="sub-title">户主信息</div>
                <div className="owner-top">
                  <div
                    className="img-box"
                    style={{
                      backgroundImage: item.ownerInfo?.portrait
                        ? `url(${item.ownerInfo.portrait})`
                        : `url('https://gt-toolbox.oss-cn-beijing.aliyuncs.com/defaultPic-sViGsr%20.png')`,
                    }}
                  />
                  <div className="top-right">
                    <div className="text">
                      {/* 姓名：{desensitization(item.ownerInfo.name, 1, -1)} */}
                      姓名：{item.ownerInfo?.name || '-'}
                    </div>
                    <div className="text">
                      身份证号：
                      {/* {desensitization(item.ownerInfo.identityCardNum, 6, -4)} */}
                      {item.ownerInfo?.identityCardNum || '-'}
                    </div>
                  </div>
                </div>
                <div className="owner-bottom">
                  <div className="text">
                    关联车牌：
                    {/* {desensitization(item.ownerInfo.licensePlate, 3, -2)} */}
                    {item.ownerInfo?.licensePlate || '-'}
                  </div>
                  <div className="text">
                    {/* 联系方式：{desensitization(item.ownerInfo.phone, 4, -4)} */}
                    手机号码：{item.ownerInfo?.phone}
                  </div>
                  <div className="text">
                    住户类型：
                    {item.ownerInfo?.relation || '-'}
                  </div>
                  <div className="text">
                    入住时间：
                    {item.ownerInfo?.checkInDate || '-'}
                  </div>
                  <div className="text">
                    撤离时间：
                    {item.ownerInfo?.evacuateDate || '-'}
                  </div>
                </div>
              </div>
              <div className="right-box">
                <div className="relation-info">
                  <div className="sub-title">历史关联预警</div>
                  <RelationWarningChart data={item.relationWarningList} />
                </div>
                <div className="visit-info">
                  <div className="sub-title mb2 mt24">访查信息</div>
                  <div className="text">
                    {/* 最近走访日期：{item.investigateInfo.lastVisitDate} */}
                    最近走访日期：
                    {item.investigateInfo?.lastVisitDate || '-'}
                  </div>
                  <div className="text">
                    访查者姓名：
                    {/* {desensitization(item.investigateInfo.name, 1, -1)} */}
                    {item.investigateInfo?.name || '-'}
                  </div>
                  <div className="text">
                    最近一次关联预警：
                    {item.investigateInfo?.warningType
                      ? `${item.investigateInfo.warningType}  / ${
                          item.investigateInfo.staffName
                        } / ${moment(item.investigateInfo.warningDate).format(
                          'YYYY-MM-DD',
                        )}`
                      : '无'}
                  </div>
                </div>
              </div>
            </div>
            <div className="actual-living-info">
              <div className="sub-title">
                实际居住人（{item.actualLivingList.length}）
              </div>
              <table style={{ tableLayout: 'fixed' }}>
                <tbody>
                  <tr>
                    <th>姓名</th>
                    <th>关注类别</th>
                    <th style={{ width: 65 }}>关联车牌</th>
                    <th style={{ width: 87 }}>手机号码</th>
                    <th style={{ width: 146 }}>身份证号</th>
                    <th>住户类型</th>
                    <th style={{ width: 84 }}>入住时间</th>
                    <th style={{ width: 84 }}>撤离时间</th>
                  </tr>
                  {item.actualLivingList &&
                    item.actualLivingList.map(
                      (item: Record<string, any>, index: number) => (
                        <tr key={index}>
                          {/* <td>{desensitization(item.name, 1, -1)}</td> */}
                          <td>{item.name || '-'}</td>
                          <td>{item.type || '-'}</td>
                          {/* <td>{desensitization(item.licensePlate, 3, -2)}</td> */}
                          <td>{item.licensePlate || '-'}</td>
                          {/* <td>{desensitization(item.phone, 4, -4)}</td> */}
                          <td>{item.phone || '-'}</td>
                          <td>{item.identityCardNum || '-'}</td>
                          <td>{item.relation || '-'}</td>
                          <td>{item.checkInDate || '-'}</td>
                          <td>{item.evacuateDate || '-'}</td>
                        </tr>
                      ),
                    )}
                </tbody>
              </table>
            </div>
          </div>
        )}
        {tabState === 'house-pic' && (
          <div style={{ height, width }} className="room-pic">
            {item.houseTypePic ? (
              <img
                src={item.houseTypePic}
                alt="户型图"
                style={{ width: '100%', maxHeight: height - 16 }}
              />
            ) : (
              <div className="empty">
                <img
                  src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/54affb83-26f5-4435-b4a9-35ff583d1ff8.png"
                  alt="empty"
                  width="49px"
                  height="68px"
                />
              </div>
            )}
          </div>
        )}
      </SubModalWrapper>
    </Modal>
  );
};

export default SubModal;