<template>
  <div class="page-container iotHardware-hardwareReportedData">
    <div class="page-container hardwareReportedData">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="dataType">
            <el-select v-model="queryParams.dataType" clearable placeholder="请选择状态" style="width: 200px">
              <el-option label="正常数据" :value="1"/>
              <el-option label="风险数据" :value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="dateRange">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="上报时间"
              end-placeholder="上报时间"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border :data="dataList">
          <el-table-column label="名称" prop="deviceName" width="240"  show-overflow-tooltip/>
          <el-table-column label="编号" prop="deviceNo" width="240" show-overflow-tooltip/>
          <el-table-column label="数值" prop="deviceValue" show-overflow-tooltip/>
          <el-table-column label="在线/离线"  prop="online" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.online?'在线':'离线'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态"  prop="dataType" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.dataType == 1 ?'正常数据':'风险数据'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="createTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[10, 20, 30, 40]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { iotDeviceDataList } from "@/api/iotDevice/index";
  export default {
    name: 'hardwareReportedData',
    data(){
      return{
        //类型下拉列表数据
        optionList:[],
        dateRange:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:10,
          dataType:null,
        },
        dataList:[],
        total:0,
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      initialize(){
        this.getList();
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'dateRange',[])
        this.$set(this,'queryParams',{
          page:1,
          pageSize:10,
          dataType:null,
        });
        this.getList();
      },
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(this.dateRange[0]){
          obj.startTime = this.dateRange[0]+'T00:00:00'
          obj.endTime = this.dateRange[1]+'T23:59:59'
        }else{
          obj.startTime = "";
          obj.endTime = "";
        }
        obj.deviceNo = this.$parent.propsData.deviceNo;
        iotDeviceDataList(obj).then(response =>{
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHardware-hardwareReportedData{
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
    }
  }
</style>
