<template>
  <div class="panel panel-info auto">
    <div class="panel-heading auto" style="height: 35px">
      <h4 style="display:inline-block;margin-top: auto">未处理隐患</h4>
    </div>
    <table class="table table-striped table-bordered" v-if="hiddenDangerList.length > 0">
      <tbody v-for="(index,row) in hiddenDangerList">
        <tr>
          <td colspan="4" style="text-align: center;background-color: #8cbce2;">未处理隐患{{index+1}}明细
          </td>
        </tr>
        <tr>
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">隐患名称:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;">{{ row.f_item_name }}</td>
        </tr>
        <tr>
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">发现时间:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;">{{ row.f_offsite_time }}</td>
        </tr>
        <tr>
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">发现人员:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;">{{ row.f_checker_name }}</td>
        </tr>
        <tr>
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">隐患照片:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">
            <div class="img">
              <img-self :src="'rs/image/file/' + row.f_path" width="150" height="150"></img-self>
            </div>
          </td>
        </tr>
        <tr v-if="row.f_p1_path">
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">隐患照片2:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">
            <div class="img">
              <img-self :src="'rs/image/file/' + row.f_p1_path" width="150" height="150"></img-self>
            </div>
          </td>
        </tr>
        <tr v-if="row.f_p2_path">
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">隐患照片3:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">
            <div class="img">
              <img-self :src="'rs/image/file/' + row.f_p2_path" width="150" height="150"></img-self>
            </div>
          </td>
        </tr>
        <tr v-if="row.f_p3_path">
          <td colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">隐患照片4:</td>
          <td colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">
            <div class="img">
              <img-self :src="'rs/image/file/' + row.f_p3_path" width="150" height="150"></img-self>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="auto info-content" v-if="hiddenDangerList.length === 0">
      <div class="row">
        <strong>暂无未处理隐患信息</strong>
      </div>
    </div>
  </div>

</template>
<script>
/**
 *用户信息
 *安检信息
 */

import { HttpResetClass } from 'vue-client'

let getHiddenDangerGen = async function (self) {
  try {
    let http = new HttpResetClass()
    let condition = `f_userinfoid = ${self.data.f_userinfo_id} and f_is_repaired in ('隐患未处理','用户自行整改','转维修')`
    let getHiddenDanger = await http.load('POST', 'rs/sql/defectDetails', {
      data: {
        condition: condition,
        f_filialeid: `('${self.$login.f.orgid}')`
      }
    }, {resolveMsg: null, rejectMsg: null})
    console.log('getHiddenDanger', getHiddenDanger)
    self.hiddenDangerList = getHiddenDanger.data
  } catch (error) {
    console.error(error)
  }
}
export default {
  title: '安检信息',
  data () {
    return {
      hiddenDangerList: [],
      style: 'text-align: center;border: #E9E9E9 solid 1px;'
    }
  },
  props: ['data'],
  ready () {
    if (this.data) {
      getHiddenDangerGen(this)
    }
  },
  methods: {},
  computed: {},
  watch: {
    'data' () {
      if (this.data == null) {
        this.hiddenDangerList = []
      } else {
        getHiddenDangerGen(this)
      }
    }
  }
}
</script>
<style scoped>
.img {
  border: 1px solid #9773ed;
  width: auto;
  height: auto;
  margin: 6px auto;
  display: inline-block;
  text-align: center;
}

img {
  margin: 6px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
