<template>
  <el-dialog class="close-inspect-device" title="设备检验到期" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-table :data="closeInspectDeviceList" class="aa">
      <el-table-column label="设备类型" align="center" prop="devTypeName" width="120"/>
      <el-table-column label="出厂编号" align="center" prop="devName" width="100" :show-overflow-tooltip="true"/>
      <el-table-column label="规格型号" align="center" prop="devNo" :show-overflow-tooltip="true"/>
      <el-table-column label="设备位置" align="center" prop="devAddr" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.devAddr==null">-</span>
          <span v-else>{{ scope.row.devAddr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" align="center" prop="devStatus" >
        <template slot-scope="scope">
          <span v-if="scope.row.devStatus==null">-</span>
          <span v-if="scope.row.devStatus==1" style="color: #1ab394">正常</span>
          <span v-if="scope.row.devStatus==2" style="color: #C03639">停用</span>
          <span v-if="scope.row.devStatus==9" style="color:grey">报废</span>
        </template>
      </el-table-column>
      <el-table-column label="预警天数" align="center" prop="alarmDays">
        <template slot-scope="scope">
          <span v-if="scope.row.alarmDays==null">-</span>
          <span v-else>{{ scope.row.alarmDays }}</span>
        </template>
      </el-table-column>

      <el-table-column label="最新检验日期" align="center" prop="currOverhaulDate" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.currOverhaulDate==null">-</span>
          <span v-else>{{ parseTime(scope.row.currOverhaulDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下次检验日期" align="center" prop="nextOverhaulDate" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.nextOverhaulDate==null">-</span>
          <span v-else style="color: red">{{ parseTime(scope.row.nextOverhaulDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>

  </el-dialog>

</template>

<script>
  import { closeInspectDevice } from "@/api/cycle/cycle";
  export default {
    name: "close-inspect-device",
    data(){
        return{
          open: false,
          closeInspectDeviceList: []
        }
    },
    created(){
      this.getCloseInspectDevice();
    },
    methods:{
      getCloseInspectDevice(){
        closeInspectDevice().then(res =>{
          if(res.code == 200 && res.data && res.data.length > 0){
             this.closeInspectDeviceList = res.data;
             this.open = true;
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .close-inspect-device{
    z-index: 99999 !important;
    .el-dialog__title{
      color: red;
    }
  }

  .el-tooltip__popper.is-dark {
    z-index: 999999!important;
  }
  /*.aa{
    height: 600px;
  }*/
</style>
