<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">
        <span>设备信息</span>
      </div>
      <descriptions
        label-position="right"
        label-width="140px"
      >
        <descriptions-item label="设备名称" :value="deviceInstance.name" />
        <descriptions-item label="运行状态" :value="$_dictionaryFormat(deviceInstance.onlineState, 'onlineState')" />
        <descriptions-item label="设备型号" :value="deviceInstance.deviceModel" />
        <descriptions-item label="业务ID" :value="deviceInstance.businessId" />
        <descriptions-item label="描述" :value="deviceInstance.description" />
      </descriptions>
    </el-card>
    <el-card class="margin-top-20">
      <div slot="header">
        <span>数据模型</span>
      </div>
      <el-tabs v-if="dataModelList.length" v-model="activeDataModel" @tab-click="onTabClick">
        <el-tab-pane
          v-for="(dataModel, index) in dataModelList"
          :key="index"
          :label="dataModel.name"
          :name="dataModel.name"
        >
          <descriptions
            label-position="right"
            label-width="140px"
          >
            <descriptions-item
              v-for="(property, index) in propertyList"
              :key="index"
              :label="property.propertyName"
              :value="formatProperty(property)"
            />
          </descriptions>
        </el-tab-pane>
      </el-tabs>
      <div v-else class="el-table__empty-text" style="text-align: center;margin: 0 auto">暂无数据</div>
    </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'
import { getDeviceInstanceDetail, getPropertyDetail } from '@/api/equipment-management/device-instance'
import dictionary from '@/utils/dictionary'

export default {
  name: 'DeviceMonitoring',
  mixins: [
    dictionary
  ],
  data() {
    return {
      form: {
        deviceType: null,
        deviceInstance: null
      },
      activeDataModel: '',
      deviceTypeList: [],
      deviceInstanceList: [],
      dataModelList: [],
      propertyList: [],
      activeProperty: null,
      deviceInstance: {
        businessId: null,
        description: null,
        name: null,
        onlineState: null,
        deviceModel: 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() {
    const { deviceTypeId, deviceInstanceId } = this.$route.query
    // getAllDeviceModel()
    //   .then(res => {
    //     this.deviceTypeList = res.data
    //     this.form.deviceType = deviceTypeId || (this.deviceTypeList.length ? this.deviceTypeList[0].id : null)
    //     this.getAllInstanceByDeviceTypeId(this.form.deviceType, deviceInstanceId)
    //     this.getDataModelByDeviceTypeId(this.form.deviceType)
    //     this.getDeviceInstanceDetail(this.form.deviceType)
    //   })
    //   .catch(_ => {})
    this.init(deviceTypeId, deviceInstanceId)
  },
  methods: {
    async init(deviceTypeId, deviceInstanceId) {
      const deviceTypeList = await getAllDeviceModel()
      this.deviceTypeList = deviceTypeList.data
      this.form.deviceType = deviceTypeId || (this.deviceTypeList.length ? this.deviceTypeList[0].id : null)

      const deviceInstanceList = await getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType })
      this.deviceInstanceList = deviceInstanceList.data
      this.form.deviceInstance = deviceInstanceId || this.deviceInstanceList.length ? this.deviceInstanceList[0].id : null

      const dataModelList = await getDataModelByDeviceTypeId({ id: this.form.deviceType })
      this.dataModelList = dataModelList.data
      this.activeDataModel = this.dataModelList.length ? this.dataModelList[0].name : null
      await this.getDeviceInstanceDetail(this.form.deviceType)
      await this.getPropertyDetail(this.dataModelList[0].id, this.form.deviceInstance)
      return {}
    },
    formatProperty(property) {
      return property.propertyValue ? `${property.propertyValue} ${property.propertyUnit}` : ''
    },
    onTabClick() {
      const dataModel = this.dataModelList.find(v => v.name === this.activeDataModel)
      this.getPropertyDetail(dataModel.id, this.form.deviceInstance)
    },
    getDeviceInstanceDetail(id) {
      getDeviceInstanceDetail({ id })
        .then(res => {
          const { businessId, description, name, onlineState, deviceModel } = res.data.deviceInstance
          this.deviceInstance = {
            businessId,
            description,
            name,
            onlineState,
            deviceModel
          }
        })
        .catch(_ => {})
    },
    onDeviceTypeChange(val) {
      this.getAllInstanceByDeviceTypeId(val)
    },
    getAllInstanceByDeviceTypeId(val, deviceInstanceId) {
      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
        .then(res => {
          this.deviceInstanceList = res.data
          if (this.deviceInstanceList.length) {
            if (deviceInstanceId) {
              this.form.deviceInstance = deviceInstanceId
            } else {
              this.form.deviceInstance = this.deviceInstanceList[0].id
            }
          }
        })
        .catch(_ => {})
    },
    getDataModelByDeviceTypeId(id) {
      getDataModelByDeviceTypeId({ id })
        .then(res => {
          this.dataModelList = res.data
          if (this.dataModelList.length) {
            this.activeDataModel = this.dataModelList[0].name
          }
        })
        .catch(_ => {})
    },
    getPropertyDetail(dataModelId, deviceId) {
      getPropertyDetail({ dataModelId, deviceId })
        .then(res => {
          this.propertyList = res.data.propertyList.length ? res.data.propertyList : []
        })
        .catch(_ => {})
    },
    queryData() {
      this.getDataModelByDeviceTypeId(this.form.deviceType)
      this.getDeviceInstanceDetail(this.form.deviceType)
      this.getPropertyDetail(this.dataModelList[0].id, this.form.deviceInstance)
    }
  }
}
</script>

<style scoped>

</style>
