/** @format */

import { Button, Cascader, Input, Spin } from 'antd';
import React, { useEffect, useState } from 'react';

import Modal from '../../../baseComponents/Modal';
import useEdataListener from '../../../hooks/useEdataListener';
import CardItem from './CardItem';
import Footer from './Footer';
import { fetchBuildingDetail, fetchBuildingTree } from './services/index';
import { Box, CustomModalContent } from './styled';
import SubModal from './SubModal';
import { getOptionsFromData } from './utils';

/**
 * @description 房屋列表
 *
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/f2a827de-982a-407e-9fb2-418c756ed72f.png
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/37362485-0e87-4605-be8d-f7bfc49da767.png
 */

interface BizHouseManagementProps {
  /**
   * 容器大小
   */
  size?: { width: number; height: number };
  /**
   * 显隐状态
   */
  visible: boolean;
  data: any;
  /**
   * 项目id
   */
  projectIds: [];
  /* 接口请求环境 */
  apiEnv: string;
}
const defaultParams = ['99999']; // demo数据
const BizHouseManagement = (props: BizHouseManagementProps) => {
  const { visible = false, apiEnv = 'uat', projectIds = defaultParams } = props;
  const [modalVisible, setModalVisible] = useState(visible);
  const [subModalVisible, setSubModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState<Record<
    string,
    any
  > | null>(null);
  const [cascaderFilter, setCascaderFilter] = useState<string[]>([]);
  const [filter, setFilter] = useState({ keyWord: '' });
  const [filteredData, setFilteredData] = useState([]);
  const [refreshKey, setRefreshKey] = useState(-1);
  const [houseTree, setHouseTree] = useState([]);
  const [spinning, setSpinning] = useState(true);
  const [projectId, setProjectId] = useState<string[]>([]);
  const [useStatus, setUseStatus] = useState('');
  const [warning, setWarning] = useState<any>('');
  const [personType, setPersonType] = useState<any>('');

  useEdataListener('biz-house-management-show', e => {
    setModalVisible(true);
    setRefreshKey(Math.random());
    if (e && e.detail) {
      const { projectId, buildingName } = e.detail;
      //  这个地方逻辑要跟IOC确认下
      const params: any = {};
      params.projectId = projectId;
      params.buildingName = buildingName;
      setFilter(params);
      setCascaderFilter([projectId, buildingName]);
    }
  });

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

  // 请求数据
  useEffect(() => {
    if (JSON.stringify(projectIds) === '[]') {
      setProjectId(['99999']);
    } else {
      setProjectId(projectIds);
    }
  }, [projectIds]);
  useEffect(() => {
    if (projectId.length > 0) {
      getHouseTree();
    }
  }, [projectId]);

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

  // 重置请求
  useEffect(() => {
    if (cascaderFilter && cascaderFilter.length < 1 && projectId.length > 0) {
      searchHouse();
    }
  }, [cascaderFilter, projectId]);
  // 底部筛选
  useEffect(() => {
    if (projectId.length > 0) {
      searchHouse();
    }
  }, [useStatus, warning, personType]);

  async function getHouseList(filter: any) {
    let params: any = {
      townId: projectId && projectId[0],
      // regionCode 社区id  projectId 园区id  buildingName 幢  unit  单元
    };
    if (projectId) {
      if (projectId.length > 1) {
        params.regionCode = projectId[1];
      }
      if (projectId.length > 2) {
        params.projectId = projectId[2];
      }
    }

    setSpinning(true);
    params = Object.assign(params, filter);
    const buildingDetail = await fetchBuildingDetail(params, apiEnv);
    setSpinning(false);
    if (buildingDetail && buildingDetail.errorCode === 0) {
      setFilteredData(buildingDetail.data);
    }
  }

  async function getHouseTree() {
    const params2 = {
      townId: projectId && projectId[0],
      sign: 0,
    };

    let level = 1;
    const parent = projectId[projectId.length - 1];
    if (projectId) {
      if (projectId.length > 1) {
        level = 2;
      }
      if (projectId.length > 2) {
        level = 3;
      }
      if (projectId.length > 3) {
        level = 4;
      }
      if (projectId.length > 4) {
        level = 5;
      }
    }

    const houseTree = await fetchBuildingTree(params2, apiEnv);
    if (houseTree && houseTree.errorCode === 0) {
      const result = getOptionsFromData(houseTree.data, level, parent);

      setHouseTree(result);
    }
  }

  const modalProps = {
    title: '查看房屋信息',
    visible: modalVisible,
    width: 714,
    onCancel: () => setModalVisible(false),
  };

  const subModalProps = {
    refreshKey,
    title: '查看房屋信息',
    visible: subModalVisible,
    width: 704,
    item: currentRecord,
    onCancel: () => setSubModalVisible(false),
  };

  function handleItemClick(item: Record<string, any>) {
    setCurrentRecord(item);
    setSubModalVisible(true);
  }

  function handleCascaderChange(value: any, selectOption: any) {
    const params: any = { keyWord: filter.keyWord };
    selectOption &&
      selectOption.length &&
      selectOption.map((item: any) => {
        if (item.level === 1) {
          params.regionCode = item.code;
        }
        if (item.level === 2) {
          params.projectId = item.code;
        }
        if (item.level === 3) {
          params.buildingName = item.name;
        }
        if (item.level === 4) {
          params.unit = item.name;
        }
      });
    setCascaderFilter(value);
    setFilter(params);
  }

  function searchHouse() {
    let params: any = {};
    if (useStatus) {
      params.useStatus = useStatus;
    }
    if (warning) {
      params.warning = warning;
    }
    if (personType) {
      params.personType = personType;
    }
    params = Object.assign(params, filter);
    getHouseList(params);
  }

  function onInputChange(e: any) {
    const params = { ...filter };
    params.keyWord = e.target.value;

    setFilter(params);
  }

  return (
    <>
      <Modal {...modalProps} key={refreshKey}>
        <Box>
          <Spin spinning={spinning}>
            <CustomModalContent>
              <div className="filter">
                <div className="filter-item">
                  <Cascader
                    fieldNames={{
                      label: 'name',
                      value: 'code',
                      children: 'children',
                    }}
                    options={houseTree}
                    allowClear={false}
                    value={cascaderFilter}
                    placeholder={
                      projectIds && projectIds.length > 1
                        ? '请选择小区 / 楼栋 / 单元'
                        : '请选择社区 / 小区 / 楼栋 / 单元'
                    }
                    className="filter-cascader"
                    popupClassName="custom-cascader-popup"
                    getPopupContainer={currentNode =>
                      currentNode.parentElement || document.body
                    }
                    onChange={handleCascaderChange}
                    changeOnSelect
                  />
                </div>
                <div className="filter-item">
                  <Input
                    className="fillter-input"
                    value={filter.keyWord}
                    onChange={onInputChange}
                    placeholder="请输入姓名/ 手机号/ 身份证号"
                  />
                </div>
                <Button className="filter-submit" onClick={searchHouse}>
                  查询
                </Button>
                <Button
                  ghost
                  className="filter-submit"
                  onClick={() => {
                    setCascaderFilter([]);
                    setFilter({ keyWord: '' });
                    setUseStatus('');
                    setWarning('');
                    setPersonType('');
                  }}
                >
                  重置
                </Button>
              </div>
              <div className="house-list">
                {filteredData && filteredData.length ? (
                  filteredData.map((item, index) => (
                    <CardItem
                      key={index}
                      item={item}
                      onClick={handleItemClick}
                    />
                  ))
                ) : (
                  <div className="empty">
                    <img
                      src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/54affb83-26f5-4435-b4a9-35ff583d1ff8.png"
                      alt="empty"
                    />
                  </div>
                )}
              </div>
            </CustomModalContent>
            <Footer
              useStatus={useStatus}
              setUseStatus={setUseStatus}
              setWarning={setWarning}
              warning={warning}
              setPersonType={setPersonType}
              personType={personType}
            />
          </Spin>
        </Box>
      </Modal>
      <SubModal {...subModalProps} />
    </>
  );
};
export default BizHouseManagement;