// 设备管理 导航条的右侧
import React, { useState, useEffect } from 'react';
import { Dropdown, Menu, Modal, message } 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';
import { changeAllAirHttp } from '@/services/ant-design-pro/equipment';
import { useModel } from 'umi';

export type topNavRightProps = {
  selNavObj: navigatorItem;
  navigatorList: navigatorItem[];
  mapList: API.MapInfo[];
};

const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList, mapList }) => {
  //const [modalvisible, setModalvisible] = useState<boolean>(false);
  //去掉全部设备的 设备列表
  const { projectId } = useModel('spaceFunc');
  const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
  useEffect(() => {
    setDeviceList(navigatorList.slice(1));
  }, []);
  const allOpenClick = (key) => {
    //debugger;
    console.log('key', key);
    confirm({
      title: '请确认',
      icon: <ExclamationCircleOutlined />,
      content: `确认要全部开启${selNavObj.name}吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        //如果是空调
        if (selNavObj.id == 'airConditioner') {
          changeAllAir('open');
        }
        if (selNavObj.id == 'light') {
        }
        if (selNavObj.id == 'curtain') {
        }
      },
      onCancel() {
        //console.log('Cancel');
      },
    });
  };
  const { confirm } = Modal;
  const allCloseClick = () => {
    console.log('showModal');
    // setModalvisible(true);
    confirm({
      title: '请确认',
      icon: <ExclamationCircleOutlined />,
      content: `确认要全部关闭${selNavObj.name}吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        //如果是空调
        if (selNavObj.id == 'airConditioner') {
          changeAllAir('close');
        }
        if (selNavObj.id == 'light') {
        }
        if (selNavObj.id == 'curtain') {
        }
      },
      onCancel() {
        //console.log('Cancel');
      },
    });
  };

  const changeAllAir = (type: string) => {
    let paramsArr: any[] = [];
    debugger;
    mapList.forEach((sitem) => {
      const itemId = type === 'close' ? 10 : 12; // 10关闭 12开启
      paramsArr.push({
        projectId: projectId,
        objectId: sitem.id, // 空间id
        valueType: 1, // 固定为1 1
        itemId: itemId,
      });
    });

    changeAllAirHttp(paramsArr).then((res) => {
      debugger;
      if (res.result == 'success') {
        message.success('指令下发成功');
        // sitem.airConditioner = res.isClose ? 0 : 1; //改变某空间空调的状态
        //mapCombineList[index]['airConditioner'] = res.isClose ? 0 : 1;
        // var mapCopy = JSON.parse(JSON.stringify(mapCombineList));
        // mapCopy[index]['airConditioner'] = res.isClose ? 0 : 1;
        // setMapCombineList(mapCopy);
      } else {
        message.error('操作失败，请重试');
      }
    });
  };

  return (
    <>
      {/* 全部设备 */}
      {selNavObj.id === 'all' && (
        <div className={styles.right}>
          <div className={styles.title}>运行中的设备</div>
          <div className={styles.allList}>
            {deviceList.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={allCloseClick}>
            {/* <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 }) => allOpenClick(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;
