<template>
  <div>
    <el-card class="no-bottom">
      <el-form :model="form" inline>
        <el-form-item label="设备类型:">
          <el-select v-model="form.a" placeholder="请选择">
            <el-option label="类型一" :value="null" />
            <el-option label="类型二" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备实例:">
          <el-select v-model="form.a" placeholder="请选择">
            <el-option label="实例一" :value="null" />
            <el-option label="实例二" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据模型:">
          <el-select v-model="form.a" placeholder="请选择">
            <el-option label="模型一" :value="null" />
            <el-option label="模型二" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间轴:">
          <div style="margin-right: 20px">
            Timestamp
          </div>
        </el-form-item>
        <el-form-item label="刷新时间">
          <el-input-number
            v-model.number="form.refresh"
            :min="1"
            :max="10"
            label="单位秒"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </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">
      <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="20 摄氏度" />
        <descriptions-item label="湿度" value="70%" />
        <descriptions-item label="压力" value="2500 帕斯卡" />
        <descriptions-item label="转子转速" value="1250 rpm/m" />
      </descriptions>
    </el-card>
    <el-card class="margin-top-20">
      <el-tabs v-model="secondActiveName">
        <el-tab-pane label="温度:" name="first">
          <div style="width: 100%;height: 400px;background: #0a76a4;margin-bottom: 20px"></div>
        </el-tab-pane>
        <el-tab-pane label="湿度" name="second">
          <div style="width: 100%;height: 400px;background: #4ab7bd;margin-bottom: 20px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeviceDetail',
  data() {
    return {
      form: {
        a: null,
        c: [],
        refresh: 1
      },
      activeName: 'first',
      secondActiveName: 'first'
    }
  }
}
</script>

<style scoped>

</style>
