<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
              v-for="(deviceType, index) in deviceTypeList"
              :key="index"
              :label="deviceType.name"
              :value="deviceType.id"
            />
          </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="时间范围:">
          <el-date-picker
            v-model="form.c"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </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">
      <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>
    <el-card class="margin-top-20">
      <div slot="header" class="clearfix">
        <span>详细</span>
        <el-button style="float: right; padding: 3px 0" type="text">导出</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column
          label="温度"
          prop="a"
        />
        <el-table-column
          label="湿度"
          prop="a"
        />
        <el-table-column
          label="压力"
          prop="a"
        />
      </el-table>
      <el-pagination
        class="margin-top-20 text-align-right"
        :current-page="pageForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      />
    </el-card>
  </div>
</template>

<script>
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'

export default {
  name: 'HistoryData',
  data() {
    return {
      form: {
        deviceType: null,
        c: []
      },
      activeName: 'first',
      secondActiveName: 'first',
      tableData: [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
      ],
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      deviceTypeList: []
    }
  },
  created() {
    // 获取所有设备实例
    getAllDeviceModel()
      .then(res => {
        this.deviceTypeList = res.data
        if (this.deviceTypeList.length) {
          this.form.deviceType = this.deviceTypeList[0].value
          // // 获取该设备类型下的设备实例
          // this.getAllInstanceByDeviceTypeId(this.deviceType)
          // // 根据设备类型 ID 获取关联数据模型
          // this.getDataModelByDeviceTypeId(this.deviceType)
        }
      })
      .catch(_ => {})
  },
  methods: {
  }
}
</script>

<style scoped>

</style>
