import React, { useState, useEffect, useCallback } from 'react';
import styles from './index.less';
import cx from 'classnames';
import { Select } from 'antd';

import type { navigatorItem } from '@/pages/Environment/index';
import { getBuildingList, getFloorList } from '@/services/ant-design-pro/environment';

export type topNavigatorProps = {
  navigatorList?: navigatorItem[];
  type: string;
  navigatorChange?: (item: navigatorItem) => void;
  // action?: React.ReactElement<topNavRightProps>[];
  action?: React.ReactNode;
  changeFloorId?: (data: string) => void;
};
type floorItem = {
  value: string;
  [key: string]: any;
};
type buildItem = {
  value: string;
  [key: string]: any;
};
const TopNavigator: React.FC<topNavigatorProps> = ({
  navigatorList = [],
  type,
  navigatorChange,
  action,
  changeFloorId,
}) => {
  const [buildList, setBuildList] = useState<buildItem[]>([]);
  const [currentBuild, setCurrentBuild] = useState<any>();

  const [floorList, setFloorList] = useState<floorItem[]>([]);
  const [currentFloor, setCurrentFloor] = useState<string>();
  const [selParamObj, setSelParamObj] = useState(navigatorList[0]);

  useEffect(() => {
    //console.log('TopNavigator----getBuildingList');
    //请求建筑的接口
    getBuildingList({
      criteria: {
        projectId: 'Pj1101080259',
      },
    }).then((res) => {
      //debugger;
      var resData = res.content || [];
      setBuildList(
        (resData || []).map((item) => {
          return { label: item.localName, value: item.id };
        }),
      );
      //debugger;
      setCurrentBuild((resData[0] || {}).id); //设置第一个值
    });
  }, []);

  useEffect(() => {
    if (currentBuild) {
      getFloorList({
        criteria: {
          projectId: 'Pj1101080259',
          buildId: currentBuild,
          //buildingId: 'Bd1101080259317347f00d0811ebb06b1d2749356f83',
        },
      }).then((res) => {
        //请求楼层的接口
        //debugger;
        var resData = res.content || [];
        setFloorList(
          (resData || []).map((item) => {
            return { label: item.localName, value: item.id };
          }),
        );
        setCurrentFloor((resData[0] || {}).id); //设置第一个值
        changeFloorId && changeFloorId((resData[0] || {}).id);
      });
    }
  }, [currentBuild]);

  const changBuildHandle = useCallback((val) => {
    //console.log('select-onChange', val);
    //debugger;
    setCurrentBuild(val);
  }, []);
  const changFloorHandle = useCallback((val) => {
    //console.log('select-onChange', val);
    //debugger;
    setCurrentFloor(val);
    console.log('changeFloorId', changeFloorId);
    changeFloorId && changeFloorId(val);
  }, []);

  //当前切换导航条时
  const itemClick = (item: navigatorItem) => {
    setSelParamObj(item);
    console.log('itemclick', item);
    navigatorChange && navigatorChange(item);
  };

  console.log('top渲染');

  return (
    <div className={styles.topnavigator}>
      <div className={styles.floor}>
        <Select
          options={buildList}
          placeholder="楼栋"
          value={currentBuild}
          onChange={changBuildHandle}
          size="large"
          dropdownMatchSelectWidth={true}
          style={{ width: '100%' }}
          bordered={false}
          //   labelInValue={true}
          // fieldNames={{ label: 'name', value: 'id' }}
        />
      </div>
      <div className={styles.floor}>
        <Select
          options={floorList}
          placeholder="楼层"
          value={currentFloor}
          onChange={changFloorHandle}
          size="large"
          dropdownMatchSelectWidth={true}
          style={{ width: '100%' }}
          bordered={false}
        />
      </div>
      <div className={styles.navigator}>
        {navigatorList.map((item, index) => {
          return (
            <div
              className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
              style={{
                borderBottom:
                  item.id === selParamObj.id ? `3px solid  ${item.color}` : '3px solid #ffffff',
              }}
              key={'nav' + index}
              onClick={() => {
                itemClick(item);
              }}
            >
              <img src={item.src} style={{ height: 20 }}></img>
              <div className={styles.text}>{item.name}</div>
            </div>
          );
        })}
      </div>
      {type === 'enviroment' && (
        <div className={styles.right}>
          <div className={styles.firstLine} style={{ color: selParamObj.color }}>
            <span className={styles.value}>{selParamObj.num}</span>{' '}
            <span className={styles.unit}>{selParamObj.unit}</span>
          </div>
          <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
        </div>
      )}
      {type === 'equipment' && action}
      {type === 'runtime' && action}
    </div>
  );
};

export default TopNavigator;
