<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>
    <div class="auto info-content" v-if="hasCheck == 1 && model.datasource=='oldos'">
      <div class="row">
        <label class="col-sm-6 ">客户名称:</label>
        <span class="col-sm-6">{{model.name}}</span>
      </div>
      <div class="row">
        <label class="col-sm-6 ">客户地址:</label>
        <span class="col-sm-6">{{model.address}}</span>
      </div>
      <div class="row">
        <label class="col-sm-6 ">安检状态:</label>
        <span class="col-sm-6">{{model.taskStatusText}}</span>
      </div>
<!--      <tr>-->
<!--        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">下次安检时间:</td>-->
<!--        <td  colspan="3" style="text-align: center;border: #E9E9E9 solid 1px;">{{ model.nextcheckdate }}</td>-->
<!--      </tr>-->
      <div class="row">
        <label class="col-sm-6 ">上次安检时间:</label>
        <span class="col-sm-6">{{model.lastCheckDate}}</span>
      </div>
      <div class="row">
        <label class="col-sm-6 ">壁挂炉:</label>
        <span class="col-sm-6">{{model.hasFireplace == 0 ? '无': '有'}}</span>
      </div>
      <div class="row">
        <label class="col-sm-6 ">热水器:</label>
        <span class="col-sm-6">{{model.hasWaterHeater == 0 ? '无': '有'}}</span>
      </div>
      <div class="row">
        <label class="col-sm-6 ">天然气专用灶:</label>
        <span class="col-sm-6">{{model.hasCookTool == 0 ? '无': '有'}}</span>
      </div>
    </div>
    <table class="table table-striped table-bordered" v-if="model.f_entry_status=='到访不遇' && model.datasource =='newos'">
      <thead>
      <tr>  <th colspan="4" style="text-align: center;background-color: #8cbce2;">用户安检概况</th></tr>
      </thead>
      <tbody>
<!--      <tr>-->
<!--        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">下次安检时间:</td>-->
<!--        <td  colspan="3" :style=style>{{ model.f_next_check_date }}</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;">{{ model.f_last_check_date }}</td>
      </tr>
      <tr>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">到达时间:</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_onsite_time }}</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">离开时间:</td>
        <td style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_offsite_time }}</td>
      </tr>
      <tr>
        <td :style="{color: (model.f_entry_status==='到访不遇'||model.f_entry_status==='拒绝入户') ? 'brown' : ''}"    style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">入户状态:</td>
        <td :style="{color: (model.f_entry_status==='到访不遇'||model.f_entry_status==='拒绝入户') ? 'brown' : ''}" style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_entry_status }}</td>
      </tr>
      </tbody>
    </table>
    <table  class="table table-striped table-bordered" v-if="model.f_entry_status=='到访不遇'  && model.datasource =='newos'">
      <thead>
      <tr>  <th  colspan="4" style="text-align: center;background-color: #8cbce2;">到访不遇图片</th></tr>
      </thead>
      <tbody> <tr>
        <td style="margin: auto;text-align: center">
          <div class="container" style="background: #FFFFFF;margin:0;width:100%;">
            <div class="img" v-for="img in model.f_overall_imgs">
              <img-self v-if="img.f_overall_path!='' && img.f_overall_path!=null" :src="'rs/image/file/'+img.f_overall_path" style="float: left"  width="100" height="150"></img-self>
            </div>

          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <table class="table table-striped table-bordered" v-if="model.f_entry_status=='入户' && model.datasource =='newos'">
      <thead>
      <tr>  <th colspan="4" style="text-align: center;background-color: #8cbce2;">用户安检概况</th></tr>
      </thead>
      <tbody>
<!--      <tr>-->
<!--        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">下次安检时间:</td>-->
<!--        <td  colspan="3" :style=style>{{ model.f_next_check_date }}</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;">{{ model.f_last_check_date }}</td>
      </tr>
      <tr>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">到达时间:</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_onsite_time }}</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">离开时间:</td>
        <td style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_offsite_time }}</td>
      </tr>
      <tr>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%">入户状态:</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_entry_status }}</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 17%" >燃气使用:</td>
        <td style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ model.f_usegas }}</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%">{{ model.f_item_name ==='机械读数' ? '无': model.f_item_value }}</td>
      </tr>
      <tr >
        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">用户满意度:</td>
        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">{{ model.f_client_evaluation }}</td>
        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">安检结果:</td>
        <td  colspan="1" style="text-align: center;border: #E9E9E9 solid 1px;">{{ model.ajresult }}</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;word-wrap:break-word;word-break:break-all;width:87%">
             <span  v-for="deviceCollect in model.deviceCollects">
                      <span class="li-font">
                        {{deviceCollect.name}}:{{deviceCollect.value}}&nbsp;&nbsp;&nbsp;
                      </span>
                <br>
           </span>
        </td>
      </tr>
      </tbody>
    </table>
    <table class="table table-striped table-bordered" v-if="model.safecheckitem.length>0 && model.datasource =='newos'">
      <thead>
      <tr>  <th colspan="4" style="text-align: center;background-color: #8cbce2;">隐患详情</th></tr>
      </thead>
      <tr v-for="checkitem in model.safecheckitem">
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%">{{ checkitem.f_item_name}} - {{ checkitem.f_is_repaired }}</td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%" v-if="checkitem.f_path!='' && checkitem.f_path!=null">
          <img-self :src="'rs/image/file/'+checkitem.f_path" style="float: left"  width="100" height="150"></img-self>
        </td>
        <td  style="text-align: center;border: #E9E9E9 solid 1px;width: 33%" v-if="checkitem.f_path=='' && checkitem.f_path==null">
          暂无图片
        </td>
      </tr>
    </table>


    <table  class="table table-striped table-bordered" v-if="model.f_entry_status=='入户'  && model.datasource =='newos'">
      <thead>
      <tr>  <th  colspan="4" style="text-align: center;background-color: #8cbce2;">总体安检照片</th></tr>
      </thead>
      <tbody> <tr>
        <td style="margin: auto;text-align: center">
          <div class="container" style="background: #FFFFFF;margin:0;width:100%;">
            <div class="img" v-for="img in model.f_overall_imgs">
              <img-self  :src="img.f_overall_path" style="float: left"  width="100" height="150"></img-self>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="auto info-content" v-if="hasCheck === 0">
      <div class="row">
        <strong>暂无安检信息</strong>
      </div>
    </div>
    <div class="auto info-content" v-if="hasCheck === -1">
      <div class="row">
        <p>正在获取安检信息...</p>
      </div>
    </div>
  </div>
  <modal :show.sync="imgshow2" v-ref:modal backdrop="true">
    <header slot="modal-header" class="modal-header">
      {{model.f_entry_status}}照片
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="from-group">
        <div class="row">
          <div class="col-md-6">
            <img-self v-if="this.model.f_entry_status=='到访不遇'" :src="showimg3"   width="300" height="400"></img-self>
          </div><div class="col-md-6">
          <img-self v-if="this.model.f_entry_status=='拒检'" :src="showimg4"   width="300" height="400"></img-self>
        </div>
        </div>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer" v-show="false">
      <button type="button" class="btn btn-success" @click='imgclose'>关闭</button>
    </footer>
  </modal>
</template>
<script>
  /**
   *用户信息
   *安检信息
   */

  import {HttpResetClass} from 'vue-client'

  let getSafeCheckGen = async function (self) {
    // 获取安检信息
    try {
      let http = new HttpResetClass()
      let param = {
        f_userfiles_id: self.data.f_userfiles_id,
        f_userinfo_id: self.data.f_userinfo_id
      }
      if (self.data.f_olduserinfo_code) {
        param.f_olduserinfo_code = self.data.f_olduserinfo_code
      }
      let getSafeCheck = await http.load('POST', 'rs/logic/getSafecheck', param, {resolveMsg: null, rejectMsg: null})
      if (!(JSON.stringify(getSafeCheck.data) == '{}')) {
        self.model = {}
        self.model = Object.assign({}, self.model, getSafeCheck.data)
        self.hasCheck = 1
      } else {
        self.hasCheck = 0
      }
    } catch (error) {
      self.hasCheck = 0
    }

    if (new Date(self.model.f_next_check_date) < new Date(self.nowdate)) {
      self.style = 'text-align: center;border: #E9E9E9 solid 1px;color:red'
    } else {
      self.style = 'text-align: center;border: #E9E9E9 solid 1px;'
    }
  }

  export default {
    title: '安检信息',
    data () {
      return {
        model: {},
        style: 'text-align: center;border: #E9E9E9 solid 1px;',
        nowdate: this.$login.toStandardTimeString(),
        hasCheck: -1,
        imgshow: false,
        imgshow2: false,
        showimg1: '',
        showimg2: '',
        showimg3: '',
        showimg4: ''
      }
    },
    props: ['data'],
    ready () {
      getSafeCheckGen(this)
    },
    methods: {
      showpicture2 () {
        this.imgshow2 = true
      }
    },
    watch: {
      'data' () {
        if (this.data == null) {
          this.hasCheck = 0
          this.model = {}
        } else {
          getSafeCheckGen(this)
        }
      }
    }
  }
</script>
<style scoped>
  .img {
    border: 1px solid #9773ed;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 6px;
  }

  img {
    margin: 6px;
  }


  .container{
    margin: 10px auto;
    width: 80%;
    height: auto;
  }
  div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  div{
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  .divmask {
    pointer-events: none;
  }
  .app-header {
    border-radius: 50%;
    background: rgba(73, 158, 223, 0.4);
    color: #FFF;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    z-index: 10;
    opacity:0.5;
    bottom: 50px;
    margin-top: -20px;
    position: absolute;
    top: 10%;
    right: 2%;
    height: 8%;
  }
</style>
