<template>
  <el-row :gutter="10" class="main-box">
    <el-col :span="4">
      <div class="left-box">
        <el-tree
          :data="treeData"
          node-key="id"
          ref="deviceStatusTree"
          :props="defaultProps"
          default-expand-all
          highlight-current
          @node-click="clickDevice"
        >
        </el-tree>
      </div>
    </el-col>
    <el-col :span="20">
      <div class="right-box">
        <span class="title">{{ equipmentName }}</span>
        <ul class="eq-msg">
          <li>设备模式：{{ eqMessage.mode }}</li>
          <li>设备状态：{{ eqMessage.state }}</li>
          <li>设备报警：{{ eqMessage.alarmNum }}</li>
          <li>剩余维护时间：{{ eqMessage.remainMainTime }}秒</li>
        </ul>
        <div class="img-box">
          <img v-if="eqMessage.imgId" :src="deviceImg" alt="设备图片" />
          <img v-else src="./../../assets/empty.png" alt="设备图片" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { getTreeData } from '@/api/app'
import { eqMonitorGet } from '@/api/siteMonitoring'
export default {
  name: 'DeviceStatus',
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      eqMessage: {},
      equipmentId: '',
      deviceImg: '',
      equipmentName: ''
    }
  },
  mounted() {
    this.getTree()
  },
  methods: {
    getTree() {
      getTreeData().then((res) => {
        this.treeData = res.data
        this.equipmentId = this.getId(res.data)
        this.setCurrent()
        this.getMsg()
      })
    },
    getId(val) {
      if (val[0].children) {
        return this.getId(val[0].children)
      } else {
        return val[0].id
      }
    },
    setCurrent() {
      let _this = this
      setTimeout(function () {
        _this.$refs.deviceStatusTree.setCurrentKey(_this.equipmentId)
      }, 500)
    },
    getMsg() {
      eqMonitorGet({ equipmentId: this.equipmentId }).then((res) => {
        console.log(res)
        this.eqMessage = res.data
        this.equipmentName = res.data.equipmentName
        this.deviceImg = process.env.VUE_APP_VIEW_PIC + res.data.imgId
      })
    },
    clickDevice(val) {
      console.log(val)
      if (!val.children) {
        this.equipmentId = val.id
        this.equipmentName = val.name
        this.getMsg()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  padding: 8px 6px 0 16px;
  .left-box,
  .right-box {
    border-radius: 8px;
    background-color: #fff;
    height: calc(100vh - 148px);
  }
  .left-box {
    padding: 16px 0 0;
    overflow: auto;
  }
  .right-box {
    padding: 24px;
    .title {
      display: inline-block;
      font-size: 14px;
      color: #000000;
      margin-bottom: 16px;
    }
    .title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #0b58ff;
      border-radius: 1px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .eq-msg {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      li {
        width: 22%;
        height: 48px;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        line-height: 48px;
        padding-left: 16px;
      }
    }
    .img-box {
      text-align: center;
      img {
        max-width: 100%;
        max-height: calc(100vh - 300px);
      }
    }
  }
}
</style>
