<!--选择设备-->
<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :fullscreen="false" append-to-body>
    <el-scrollbar class="dialog-scroll">
      <el-tree
        v-loading="dataLoading"
        class="filter-tree"
        :data="deviceList"
        :props="defaultProps"
        node-key="deviceNo"
        :highlight-current="true"
        icon-class="el-icon-video-camera"
        :current-node-key="currentDevice.deviceNo"
        default-expand-all
        @node-click="handleNodeClick"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i class="el-icon-video-camera"></i>
        <span style="margin-left: 5px;">{{ data.deviceNo }} ( {{data.deviceName}} )</span>
      </span>
      </el-tree>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="currentDevice==null" type="primary" @click="saveData">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeviceList } from '@/api/environment/device'

export default {
  name: 'ChooseDevice',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      currentDevice:null, // 当前选中设备,
      deviceList:[], // 设备列表
      dialogTitle: '选择设备', // 表头显示标题
      dataLoading: false, // 加载框
      defaultProps: {
        children: 'children',
        label: 'deviceNo'
      } // 树形设置
    }
  },
  methods: {
    /**
     * 初始化对话框
     */
    initDialog: function(currentDevice) {
      this.dialogFormVisible = true
      this.currentDevice = currentDevice
      this.fetchData()
    },
    // 查询所有设备列表
    fetchData(){
      this.dataLoading = true
      getDeviceList().then(res=>{
        this.deviceList = res.data
        // this.deviceList= [
        //   {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        //   {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        //   {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        //   {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        //   {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        //   {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
        // ]
        this.dataLoading = false
      })
    },
    // 点击设备
    handleNodeClick(data){
      this.currentDevice = data
      console.log(data)
    },
    // 确定选择
    saveData(){
      this.$emit('click', this.currentDevice)
      this.dialogFormVisible = false
    },
    cancel: function() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dialog-scroll{
    height:400px;
  }
</style>