import React, { useState, useEffect, useCallback } from 'react';
import styles from './index.less';
import cx from 'classnames';
import { Select } from 'antd';
import EquipNavRight from '@/pages/Equipment/components/topNavRight';
import RunNavRight from '@/pages/Runtime/components/topNavRight';

const FloorList = [
  {
    label: 'F1',
    value: 'F1',
  },
  {
    label: 'F2',
    value: 'F2',
  },
  {
    label: 'F3',
    value: 'F3',
  },
  {
    label: 'F4',
    value: 'F4',
  },
];

export default ({ navigatorList = [], type, navigatorChange }) => {
  const [currentFloor, setCurrentFloor] = useState('F2');

  //const [selId, setSelId] = useState('temperature');
  const [selParamObj, setSelParamObj] = useState({});

  useEffect(() => {
    console.log('chartModal-effect');
    setSelParamObj(navigatorList[0]);
  }, []);

  const changHandle = useCallback((val) => {
    console.log('select-onChange', val);
    setCurrentFloor(val);
  }, []);
  //当前切换导航条时
  const itemClick = (item) => {
    //setSelId(item.id);
    setSelParamObj(item);
    console.log('itemclick', item);
    navigatorChange && navigatorChange(item);
  };

  console.log('top渲染');

  return (
    <div className={styles.topnavigator}>
      <div className={styles.floor}>
        <Select
          options={FloorList}
          value={currentFloor}
          onChange={changHandle}
          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}` : null,
              }}
              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' && <EquipNavRight selParamObj={selParamObj}></EquipNavRight>}
      {type === 'runtime' && <RunNavRight></RunNavRight>}
    </div>
  );
};
