// 设备管理 导航条的右侧
import React, { useState, useEffect } from 'react';
import { Dropdown, Menu, Modal } from 'antd';
import Icon from '@/tenants-ui/Icon';
import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import styles from './index.less';
//import { equipImageMap } from '@/config/image.js';
import type { navigatorItem } from '@/pages/Environment/index';

export type topNavRightProps = {
  selNavObj: navigatorItem;
  navigatorList: navigatorItem[];
};

const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) => {
  // const { equip_air, equip_lamp, equip_water } = equipImageMap;
  const [modalvisible, setModalvisible] = useState<boolean>(false);
  const [allList, setAllList] = useState<navigatorItem[]>([]);
  useEffect(() => {
    setAllList(navigatorList.slice(1));
  }, []);
  const menuClick = (key) => {
    console.log('key', key);
  };
  const showModal = () => {
    console.log('showModal');
    // setModalvisible(true);
    Modal.confirm({
      title: '',
      icon: <ExclamationCircleOutlined />,
      content: '确认全部关闭吗？',
      okText: '确认',
      cancelText: '取消',
    });
  };

  const hideModal = () => {
    console.log('hideModal');
    //setModalvisible(false);
  };
  return (
    <>
      {/* 全部设备 */}
      {selNavObj.id === 'all' && (
        <div className={styles.right}>
          <div className={styles.title}>运行中的设备</div>
          <div className={styles.allList}>
            {allList.map(function (litem, index) {
              return (
                <div className={styles.item} key={'run' + index}>
                  <img src={litem.src} style={{ height: 20 }}></img>
                  <div className={styles.num}>{litem.num}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}
      {/* 设备 */}
      {selNavObj.id !== 'all' && (
        <div className={styles.right}>
          <div className={styles.title}>运行中的设备</div>
          <div className={styles.onlyNum}>{selNavObj.num}</div>
          <div className={styles.closeButton} onClick={showModal}>
            {/* <Button type="primary"  size={'large'}  icon={<Icon type="closeall"  style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
              全部关闭
            </Button> */}
            <Icon className="" type="closeall" style={{ fontSize: 20 }} />
            <span className={styles.text}>全部关闭</span>
          </div>
          <div className={styles.moreWrap}>
            {/* ...下拉菜单 */}
            <Dropdown
              trigger="click"
              placement="bottomLeft"
              overlay={
                <Menu style={{ width: 160 }} onClick={({ key }) => menuClick(key)}>
                  <Menu.Item key="open">全部开启</Menu.Item>
                </Menu>
              }
            >
              <span className={styles.trigger}>
                <EllipsisOutlined style={{ fontSize: 20 }} />
              </span>
            </Dropdown>
          </div>
        </div>
      )}

      {/* <Modal
        title="确认"
        visible={modalvisible}
        onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
      >
        <p>确定全部开启吗</p>
      </Modal> */}
    </>
  );
};

export default TopNavRight;