<template>
  <div class="page-container hardwareEquipment-hardwareLog">
    <div class="page-container iotHardwarePage">
      <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="state">
            <el-select v-model="queryParams.state" clearable placeholder="请选择状态" style="width: 200px">
              <el-option label="成功" :value="true"/>
              <el-option label="失败" :value="false"/>
            </el-select>
          </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="logType" width="160"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.logType?'打开':'关闭'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="请求" prop="reqBody" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="clickCopy" @click="clickCopy(scope.row.reqBody)">{{scope.row.reqBody}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态"  prop="state" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.state?'成功':'失败'}}</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-column label="备注" prop="remark" width="200" show-overflow-tooltip/>
        </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 { iotHardwareLogList } from "@/api/iotDevice/index";
  export default {
    name: 'hardwareLog',
    data(){
      return{
        //类型下拉列表数据
        optionList:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:10,
          state:null,
        },
        dataList:[],
        total:0,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      initialize(){
        this.getList();
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'queryParams',{
          page:1,
          pageSize:10,
          state:null,
        });
        this.getList();
      },
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.hardwareId = this.$parent.propsData.id;
        iotHardwareLogList(obj).then(response =>{
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .hardwareEquipment-hardwareLog{
    overflow: hidden;
  }
</style>
