<template>
  <div class="detectorTab">
    <el-table v-loading="loading" :data="childrenDataList">
      <el-table-column label="所属设备名称" align="center" prop="beyondDevicename"/>
      <el-table-column label="设备名称" align="center" prop="detectorName"/>
      <el-table-column label="设备编号" align="center" prop="detectorCode"/>
      <el-table-column label="所属企业" align="center" prop="enterpriseName" />
      <el-table-column label="探测介质" align="center" prop="medium">
        <template slot-scope="scope">
          <span v-if="scope.row.medium == 1">甲烷</span>
          <span v-if="scope.row.medium == 2">氨气</span>
          <span v-if="scope.row.medium == 3">一氧化碳</span>
          <span v-if="scope.row.medium == 4">可燃气体</span>
          <span v-if="scope.row.medium == 5">有毒气体</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="detectorStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.detectorStatus == 0" style="color: green">正常</span>
          <span v-if="scope.row.detectorStatus == 1" style="color: red">离线</span>
          <span v-if="scope.row.detectorStatus == 2">报警</span>
        </template>
      </el-table-column>
      <el-table-column label="上报时间" align="center" prop="workingConditionAccumulation" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>

</template>

<script>
import { selectDetectorMointor } from "@/api/detector/detectorInfo"
export default {
  props:{
    childrenQueryParams: {}
  },
  name: "DetectorTabData",
  components: {
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: 0,
        detectorName: "",
        detectorCode: ""
      },
      loading: true,
      childrenDataList: [],
      total: 0

    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.enterpriseId = this.childrenQueryParams.beyondEnterpriseId;
      this.queryParams.detectorName = this.childrenQueryParams.deviceName;
      this.queryParams.detectorCode = this.childrenQueryParams.deviceNum;
      selectDetectorMointor(this.queryParams).then(response => {
          this.childrenDataList = response.rows;
          this.total = response.total;
          this.loading = false;
      });
    },
    detectorHandleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    }
  }
};
</script>
<style>
  .detectorTab{
    margin-bottom: 20px;
  }
</style>
