<template>
  <div>
    <el-card class="no-bottom">
      <el-form ref="form" :model="form" inline>
        <el-form-item label="设备类型:" prop="deviceType">
          <el-select v-model="form.deviceType" @change="onDeviceTypeChange">
            <el-option
              v-for="(deviceType, index) in deviceTypeList"
              :key="index"
              :label="deviceType.name"
              :value="deviceType.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备实例:" prop="deviceInstance">
          <el-select v-model="form.deviceInstance" placeholder="请选择">
            <el-option
              v-for="(deviceInstance, index) in deviceInstanceList"
              :key="index"
              :label="deviceInstance.name"
              :value="deviceInstance.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="margin-top-20">
      <div slot="header" class="clearfix">
        <span>类型信息</span>
      </div>
      <descriptions
        label-position="right"
        label-width="140px"
      >
        <descriptions-item label="设备类型" :value="deviceType.name" />
        <descriptions-item label="数据模型" :value="deviceType.dataModes" />
      </descriptions>
    </el-card>
    <el-card class="margin-top-20">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
      </div>
      <descriptions
        label-position="right"
        label-width="140px"
      >
        <descriptions-item label="型号" value="AKB48" />
        <descriptions-item label="健康状态" value="健康" />
        <descriptions-item label="运行状态" value="运行中" />
        <descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
        <descriptions-item label="运行时长" value="1d 27h 13m 21s" />
        <descriptions-item label="描述" value="非常贵的设备" />
      </descriptions>
    </el-card>
    <el-card class="margin-top-20">
      <el-tabs v-model="secondActiveName">
        <el-tab-pane label="模型一" name="first">
          <descriptions
            label-position="right"
            label-width="140px"
          >
            <descriptions-item label="温度" value="20 摄氏度" />
            <descriptions-item label="湿度" value="70%" />
            <descriptions-item label="压力" value="2500 帕斯卡" />
            <descriptions-item label="转子转速" value="1250 rpm/m" />
          </descriptions>
        </el-tab-pane>
        <el-tab-pane label="模型二" name="second">
          <descriptions
            label-position="right"
            label-width="140px"
          >
            <descriptions-item label="温度" value="20 摄氏度" />
            <descriptions-item label="湿度" value="70%" />
            <descriptions-item label="压力" value="2500 帕斯卡" />
            <descriptions-item label="转子转速" value="1250 rpm/m" />
          </descriptions>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'

export default {
  name: 'DeviceMonitoring',
  data() {
    return {
      form: {
        deviceType: null,
        deviceInstance: null
      },
      activeName: 'first',
      secondActiveName: 'first',
      deviceTypeList: [],
      deviceInstanceList: [],
      dataModelList: [],
      propertyList: [],
      activeProperty: null
    }
  },
  computed: {
    deviceType() {
      let name = null
      let dataModes = null
      if (this.deviceTypeList.length && this.form.deviceType) {
        const deviceType = this.deviceTypeList.find(v => v.id === this.form.deviceType)
        name = deviceType.name
      }
      if (this.dataModelList.length) {
        dataModes = this.dataModelList.map(v => v.name).join(',')
      }
      return {
        name,
        dataModes
      }
    }
  },
  created() {
    getAllDeviceModel()
      .then(res => {
        this.deviceTypeList = res.data
        if (this.deviceTypeList.length) {
          this.form.deviceType = this.deviceTypeList[0].id
        }
        this.getAllInstanceByDeviceTypeId(this.form.deviceType)
        this.getDataModelByDeviceTypeId(this.form.deviceType)
      })
      .catch(_ => {})
  },
  methods: {
    onDeviceTypeChange(val) {
      this.getAllInstanceByDeviceTypeId(val)
      this.getDataModelByDeviceTypeId(val)
    },
    getAllInstanceByDeviceTypeId(val) {
      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
        .then(res => {
          this.deviceInstanceList = res.data
          if (this.deviceInstanceList.length) {
            this.form.deviceInstance = this.deviceInstanceList[0].id
          }
        })
        .catch(_ => {})
    },
    getDataModelByDeviceTypeId(id) {
      getDataModelByDeviceTypeId({ id })
        .then(res => {
          this.dataModelList = res.data
          if (this.dataModelList.length) {
            this.propertyList = this.dataModelList[0].propertyList
            if (this.propertyList.length) {
              this.activeProperty = this.propertyList[0].propertyCode
            }
          }
        })
        .catch(_ => {})
    },
    queryData() {}
  }
}
</script>

<style scoped>

</style>
