import {  Link, useModel } from 'umi';
import { Card, Col, Row, Statistic, Tree, Modal } from 'antd';
import { FormattedMessage, formatMessage, } from 'umi';
import React, { Component } from 'react';
import { PoweroffOutlined } from '@ant-design/icons';
import { Dispatch, Action } from 'redux';
import { connect } from 'dva';
import { StateType } from '../models/model';
import style from './style.less'



// export default function(props) {
//   alert('join')
//   const { id } = useModel('@@qiankunStateFromMaster') || {};
//   alert(id)
//   // const { id } = props;
//   return (
//     <div>
//       <h1>Dashboard 2#</h1>
//       <div>参数传递：</div>
//       <div>{id}</div>
//     </div>
//   );
// }



const { confirm } = Modal;

interface ClassInfoComProps {
  dashboardAndmonitor: StateType;
 
  loading: boolean;
}

interface ClassInfoComState {
    
}

class ClassInfoCom extends Component<ClassInfoComProps,ClassInfoComState> {
 
  
  state:ClassInfoComState = {
   
  }





  componentDidMount() {
   debugger
 
  //  const { dispatch } = this.props;
 
  //  console.log(this.props.id,'ididididdi')
  //   dispatch({
  //     type: 'dashboardAndmonitor/getClassInfo',
  //     payload: {
  //      number: this.props.id
  //    },
  
  //   })
  }

  getStatusDevice(data:any){
    let dom:any = [];
    data.map((item1:any)=>{
      if(item1.key == "Light"){
        dom.push(
          <p className={style.sensingValue}>{`${item1.name}: ${item1.value}${item1.unit}`}</p>
          )
      }

      if(item1.key == "Warning"){
        dom.push(
          <p className={style.sensingValue}>{`${item1.name}: ${item1.value}`}</p>
          )
      }

    
    
    })

    return dom
  }


  getStatusDeviceHum(data:any){
    let dom:any = [];
    data.map((item1:any)=>{
      if(item1.key == "Temperature"){
        dom.push(
          <p className={style.sensingValue}>{`${item1.name}: ${item1.description} ${item1.value}${item1.unit}`}</p>
          )
      }

      if(item1.key == "Humidity"){
        dom.push(
          <p className={style.sensingValue}>{`${item1.name}: ${item1.description} ${item1.value}${item1.unit}`}</p>
          )
      }

      if(item1.key == "Warning"){
        dom.push(
          <p className={style.sensingValue}>{`${item1.name}: ${item1.value}`}</p>
          )
      }
    
    })

    return dom
  }

  //获取传感设备列表
  getSensingList = () => {
      let dom:any = [];
      
      if(this.props.dashboardAndmonitor.classInfo.devices){
        this.props.dashboardAndmonitor.classInfo.devices.map((item:any)=>{
          if(item.product.number == 'fbee:0106:01'){ //光强传感器
                dom.push(
                    <div className={style.sensingItem}>
                        <img src='../images/light.svg' className={style.sensingImg}/>
                        {this.getStatusDevice(item.data)}
                    </div>
                )
          }

          if(item.product.number == 'fbee:0302:01'){ //温湿度传感器
            dom.push(
                <div className={style.sensingItem}>
                   <img src='../images/humiture.svg' className={style.sensingImg}/>
                   {this.getStatusDeviceHum(item.data)}
                </div>
            )
          
          }

          if(item.product.number == 'fbee:0402:0d'){ //人体感应器
            dom.push(
                <div className={style.sensingItem}>
                   <img src='../images/person.svg' className={style.sensingImg}/>
                   <p className={style.sensingValue}>{`${item.data[0].name}:  ${item.data[0].value}`}</p>
                </div>
            )
          
          }
      })
      }

      return dom;
  }


  //开关设备方法
  handleDevices = (data:any) => {
    const { dispatch } = this.props;
    let status = this.getDevicesOn(data.data)
    
    dispatch({
      type: 'dashboardAndmonitor/exec',
      payload: {connectionId: window['connectionId'], number:data.number, method:status == '开' ? '/Switch/Off' : '/Switch/On'}
    });
  }

  //获取设备开关状态
  getDevicesOn = (data:any) => {
      let status = "";

      data.map((item:any)=>{
        if(item.key == 'State'){
          status = item.value
        }
      })

      return status
  }

  //获取设备列表
  getEquList = () => {
    let dom:any = [];
    
    if(this.props.dashboardAndmonitor.classInfo.devices){
      this.props.dashboardAndmonitor.classInfo.devices.map((item:any)=>{

        if(item.product.number == 'fbee:0002:01'){ //一路开关
          dom.push(
              <Card className={style.equItem} bordered={true}>
                <div className={style.equItemTop}> 
                {`${item.displayName}`}
                </div>
                <div className={style.equContent}>
                <img src='/images/switch1.svg' className={style.equImgs}/>
                <PoweroffOutlined  style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
                onClick={() =>  this.handleDevices(item)}
                />
                </div>
              </Card>
          )
        
        }
  
        if(item.product.number == 'fbee:0009:01'){ //插座
          dom.push(
              <Card className={style.equItem} bordered={true}>
                <div className={style.equItemTop}> 
                {`${item.displayName}`}
                </div>
                <div className={style.equContent}>
                <img src='/images/socket.svg' className={style.equImgs}/>
                <PoweroffOutlined  style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
                 onClick={() =>  this.handleDevices(item)}
                />
                </div>
              </Card>
          )
        
        }
  
        if(item.product.number == 'fbee:0051:01'){ //智能插座
          dom.push(
              <Card className={style.equItem} bordered={true}>
                <div className={style.equItemTop}> 
                {`${item.displayName}`}
                </div>
                <div className={style.equContent}>
                <img src='/images/socket.svg' className={style.equImgs}/>
                <PoweroffOutlined  style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
                 onClick={() =>  this.handleDevices(item)}
                />
                </div>
              </Card>
          )
        
        }
  
        if(item.product.number == 'fbee:000a:01'){ //门锁
          dom.push(
              <Card className={style.equItem} bordered={true}>
                <div className={style.equItemTop}> 
                {`${item.displayName}`}
                </div>
                <div className={style.equContent}>
                <img src='/images/doors.svg' className={style.equImgs}/>
                <PoweroffOutlined  style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
                 onClick={() =>  this.handleDevices(item)}
                />
                </div>
              </Card>
          )
        
        }
  
      });
    }
 



    return dom;
  }

  //场景操作方法
  handleScenes = (data:any) => {
    const { dispatch } = this.props;
    
    
    dispatch({
      type: 'dashboardAndmonitor/execScene',
      payload: '"' + data.id + '"'
    });
  }

  //获取场景操作列表
  getOperInfoList = () => {
    let dom:any = [];
    if( this.props.dashboardAndmonitor.classInfo.scenes){
      this.props.dashboardAndmonitor.classInfo.scenes.map((item:any)=>{
        dom.push(
          <div className={style.sensingItem} style={{minHeight:'5rem',cursor:'pointer'}} title={item.name}>
                     <img src='../images/button.svg' className={style.sensingImg} onClick={()=>this.handleScenes(item)}/>
                     <p className={style.sensingValue}>{item.name}</p>
           </div>
        )
      })
    }
   

    return dom;
  }

  render() {
    debugger
    alert('join')
    console.log(this.props.dashboardAndmonitor.classInfo)
    return (
        <div style={{width:'100%'}}>   
        <Card bordered={true}>
          <Row className={style.operSpanStyle}>
           传感设备
          </Row>
          <Row className={style.operSensing}>
            {this.getSensingList()}
          </Row>
          </Card>

          <Card bordered={true} style={{marginTop:'1rem'}}>
          <Row className={style.operSpanStyle}>
           场景操作
          </Row>
          <Row className={style.operSensing}>
           {this.getOperInfoList()}
          </Row>
          </Card>

          <Card bordered={true} style={{marginTop:'1rem'}}>
          <Row className={style.operSpanStyle}>
           设备
          </Row>
          </Card>

          <Row className={style.equipmentList}>
          {this.getEquList()}
           </Row>
        </div>
    );
  }
}

export default connect(
  ({
    dashboardAndmonitor,
    loading,
  }: {
    dashboardAndmonitor: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) => ({
    dashboardAndmonitor,
    loading: loading.models.dashboardAndmonitor,
  }),
)(ClassInfoCom);