<template>
 <el-container>
  <el-main>
  <div class="block">
  <span class="demonstration">请选择设备: </span>
  <el-cascader
  filterable
    :options="rootDevices"
    @change="selectDeviceChange"
    :props="{ checkStrictly: true }"
    clearable></el-cascader>
</div>
<el-divider></el-divider>
  <el-row :gutter="10">
 
  <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">

  <h3>{{selectedCrane.name}} 基础信息</h3>
  <el-card class="box-card" :style="'height:'+fullHeight/2+'px;'">

 <el-form :label-position="left" ref="form" :model="clickedNode" label-width="80px">
 <el-form-item label="设备名称">
  <el-input v-model="clickedNode.name"></el-input>
 </el-form-item>
  <el-form-item label="运行时间">
  <el-input v-model="clickedNode.workTime"></el-input>
 </el-form-item>
  <el-form-item label="创建时间">
  <el-input v-model="clickedNode.createTime"></el-input>
 </el-form-item>
  <el-form-item label="修改时间">
  <el-input v-model="clickedNode.updateTime"></el-input>
 </el-form-item>
  <!-- <el-form-item v-if="clickedNode.father!=null" label="父设备">
  {{clickedNode.father.name}}
 </el-form-item> -->
 <el-form-item label="子设备数量">
  {{clickedNode.childrenCount}}
 </el-form-item>
  </el-form>
  <el-row style="position:absolute;bottom:10px;">
 <el-button size="small" type="primary">修改设备</el-button>
  <el-button size="small" type="success">添加子设备</el-button>
  <el-button size="small" type="info">添加数据源</el-button>
  <el-button size="small" type="danger">删除设备</el-button>

</el-row>
</el-card>


  </el-col>
   <el-col :xs="9" :sm="8" :md="8" :lg="8" :xl="6">
   <div v-for="data in  clickedNode.gatherDataSources" :key="data.id" >
  
   <h4 >数据源:{{data.name}}</h4>
<el-card :style="'height:'+fullHeight/2+'px;'">
 <el-form   :label-position="left" label-width="60px">
   <el-form-item label="名称">
    <el-input v-model="data.name"></el-input>
   </el-form-item>
    <el-form-item label="地址">
    <el-input v-model="data.address"></el-input>
   </el-form-item>
    <el-form-item label="状态">
    <el-switch
  v-model="data.enable"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
   </el-form-item>
   <el-form-item label="主题">
    <el-input v-model="data.publisTopic"></el-input>
   </el-form-item>
   <el-form-item label="阈值">
    <el-input v-model="data.threshold"></el-input>
   </el-form-item>
   <el-alert :closable="false"
    title="数据类型"
    type="info">
    <div>类型:{{data.dataType.name}}</div>
    <div v-if="data.dataType.method==0">采集方法:485</div>
    <div v-if="data.dataType.method==1">采集方法:PLC</div>
    <div v-if="data.dataType.valueType==0">值类型:模拟量</div>
    <div v-if="data.dataType.valueType==1">值类型:开关量</div>


  </el-alert>
   </el-form>
<el-row style="position:absolute;bottom:10px;">
 <el-button size="small" type="primary">修改数据源</el-button>
  <el-button size="small" type="danger">删除数据源</el-button>
</el-row>
</el-card>
   </div>
  </el-col>

</el-row>
  </el-main>
</el-container>
  
</template>
<script>
  export default {
  computed: {
    rootDevices(){
      return this.$store.getters.rootDevices
    },
   
    // authorities() {
    //   return this.$store.getters.allAuthorities
    // }
  },
    data() {
      return {
      fullHeight: document.documentElement.clientHeight,
       selectedCrane:'',
       defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectedNode:{},
        clickedNode:{},
        devices:[],
        
     
    }
    },
    methods: {
      selectChanged(){
        console.log('select changed',this.selectedCrane)
      },
      selectDeviceChange(data){
        console.log('select device change ',data)
        var selectedDeviceID=data[data.length-1]
        console.log('selected deviceID ',data[data.length-1])
        var device=this.findDeviceById(this.rootDevices,selectedDeviceID)
        console.log('selected device ',device)
        this.clickedNode=device
       
      },
      nodeClick(obj,node,self){
        console.log('node click ',obj)
        this.clickedNode=obj
      },
      findDeviceById(devices,id){
        var tmp 
        for(var i in devices){
          console.log('device id '+devices[i].id,id)
          if(devices[i].id===id){
            console.log('finded',devices[i])
            tmp=devices[i]
            return tmp
          }
          else{
            console.log('find children',devices[i])
            tmp= this.findDeviceById(devices[i].children,id)
          }
        }
        return tmp
      
      },
      loadChildren(node, resolve){
        if(node.data!=null){
          console.log('start to load children devices1',node)
          this.$store.dispatch('device/getChildren',node.data).then(res=>{
          resolve(res.data.data)
        })
        }else{
          console.log('load node is null')
        }
      
      },
    },
    created(){
      this.$store.dispatch('device/getRootDevices')
    },
     
  }
  
</script>
<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .demo-cascader .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
    }
</style>