<template>
  <div>
    <h3 style="text-align: center;color: #00A3F0;font-size: 26px" >安检结果</h3>
    <div id="print1" >
      <div id="print2" v-show="showscheckmsg">
        <style id="style1">
          #print2 td{
            height:32px;
            width: 100px;
            text-align: center;
          }
          #print2 table{
            margin: auto;
          }
          #print2 h1{
            text-align: center;
          }
          #print2 p{
            text-align: center;
          }
          .border-btn{
            border-bottom: #000000 solid 2px;
          }
        </style>
        <table border="1" cellspacing="0">
          <tr>
            <td colspan="6"> <h3>用户:{{userinfo.f_user_name}}客户安全检查记录表</h3> </td>
          </tr>
          <tr>
            <td><b>用户编号</b></td><td>{{userinfo.f_userinfo_code}}</td><td ><b>用户姓名</b></td><td >{{userinfo.f_user_name}}</td><td><b>联系电话</b></td>
            <td>{{userinfo.f_user_phone}}</td>
          </tr>
          <tr>
            <td><b>地址</b></td><td colspan="5">{{userinfo.f_address}}
          </tr>
          <tr align="left">
            <td><b>表类型</b></td><td colspan="2">{{deviceInfo.blx}}</td>
            <td><b>表封号</b></td><td colspan="2">{{deviceInfo.bfh}}</td>
          </tr>
          <tr align="left">
            <td><b>表型号</b></td><td>{{deviceInfo.bxh}}</td>
            <td><b>表品牌</b></td><td>{{deviceInfo.bpp}}</td>
            <td><b>进气方向</b></td><td>{{deviceInfo.jqfx}}</td>
          </tr>
          <tr align="left">
            <td><b>表读数</b></td><td colspan="2">{{deviceInfo.jbds}}</td>
            <td><b>余量</b></td><td colspan="2">{{deviceInfo.yl}}</td>
          </tr>
          <tr align="left">
            <td colspan="6"><b>隐患情况列表</b></td>
          </tr>
          <tr align="left" v-for="de in defectList">
            <td colspan="3" :style="{color:(de.dname!=''?'red':'')}">{{de.dname}}</td>
            <td colspan="3" :style="{color:(de.dvalue!=''?'red':'')}">{{de.dvalue}}</td>
          </tr>
          <tr align="left" v-if="">
            <td colspan="6"><b>隐患情况列表</b></td>
          </tr>

          <tr>
            <td><b>安检员</b></td><td>{{userinfo.f_checker_name}}</td>
            <td><b>安检时间</b></td><td>{{userinfo.f_upload_date}}</td>
            <td><b>用户签字</b></td><td><img-self :src='userinfo.f_sign_path' alt="未签名"></img-self></td>
          </tr>
          <tr style="max-width: 550px">
            <td><b>总体安检照片</b></td>
            <td colspan="6">
              <table>
                <tr>
                  <template v-for="img in userinfo.f_overall_imgs">
                    <td >
                      <img-self style="margin-left: 5px" :src="'/rs/image/file/'+img.f_overall_path" alt="无总体安检照片"  height="200" width="150"></img-self>
                    </td>
                  </template>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>

import co from 'co'
import { PagedList } from 'vue-client'
import * as Util from '../../Util'
import {getUrlParames} from '../../Util'

export default {
  title: '安检信息',
  data () {
    return {
      imgs:[],
      checkitemids:'',//二维码传的id进行安检结果表查询后进行赋值
      userinfo:{}, //用户信息
      showscheckmsg:false,//无安检结果是控制隐藏
      device:[],//表具信息
      devices:[],//所有表具信息
      defectList:[],
      deviceInfo:{
        bfh:'',
        bxh:'',
        blx:'',
        jbds:'',
        yl:'',
        bpp:'',
        jqfx:''

      },//具体表具信息
      f_defect_content:'', //安检结果
    }
  },
  ready () {
    const datacheckitemid =  Util.getUrlParames("checkitemid")
    if (datacheckitemid) {
      // 根据计划id查询paper，如果没查到，则是提示暂未上传。 如果查询到了就显示当前安检记录
      this.$resetpost('/rs/sql/tel_singleTable_OrderBy', {data: {items: 'id', tablename: 't_check_paper', orderitem: 'f_upload_date desc', condition:`f_check_item_id = '${datacheckitemid}'`}},{resolveMsg: null, rejectMsg: null}).then((rows) => {
        console.log(rows)
       if(rows.data.length > 0){
         this.checkitemids=rows.data[0].id
         this.$resetpost('/rs/path/getUserinfomation', {data:{condition:`id = '${this.checkitemids}'`}},{resolveMsg: null, rejectMsg: null}).then((res)=>{
           //tag
           if(res.data.length>0){
             this.userinfo = res.data[0]
             if(this.userinfo.f_sign_path != ''){
               this.userinfo.f_sign_path = '/rs/image/file/' + this.userinfo.f_sign_path
             }
             this.getHidden()
             this.showscheckmsg = true
           }
         })
       }else {
         console.log("暂未上传")
         return  this.$showAlert('该安检单暂未上传，无安检结果记录,请耐心等待安检员上传安检结果！', 'warning', 4000)
         this.showscheckmsg = false
       }
      })
    }
  },
  methods: {
    cancel(){
      this.$parent.showcheckmsg = false
    },
    //获取当前时间
    getNowFormatDate() {
      var date = new Date(this.userinfo.f_check_date);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = date.getFullYear() +'年'+ month + '月' + strDate
        + "日" + date.getHours() + "时" + date.getMinutes()+'分'
      return currentdate;
    },
    //获取隐患信息
    getHidden(){
      //清空所有数据
      for(let device of this.userinfo.f_devices){
        //tag
        if(device.f_device_type=='燃气表'){
          for (const item of device.f_items) {
            if(item.f_item_name=="气表表号"){
              this.deviceInfo.bfh=item.f_item_lists[0].f_item_value
            }else if(item.f_item_name=="气表型号"){
              this.deviceInfo.bxh=item.f_item_lists[0].f_item_value
            }else if(item.f_item_name=="气表类型"){
              this.deviceInfo.blx=item.f_item_lists[0].f_item_value
            }else if(item.f_item_name=="已用气量" ||item.f_item_name=="已用金额"){
              this.deviceInfo.yl=parseFloat(item.f_item_lists[0].f_item_value).toFixed(1)||0
            }else if(item.f_item_name=="剩余气量" || item.f_item_name=="剩余金额"){
              this.deviceInfo.jbds=parseFloat(item.f_item_lists[0].f_item_value).toFixed(1)||0
            }else if(item.f_item_name=="气表品牌"){
              this.deviceInfo.bpp=item.f_item_lists[0].f_item_value
            }else if(item.f_item_name=="进气方向"){
              this.deviceInfo.jqfx=item.f_item_lists[0].f_item_value
            }
          }
        }
      }
      let defectlist=JSON.parse(this.userinfo.f_defect_content).data
      for(let i=0;i< defectlist.length;i++){
        for(let key in defectlist[i]){
          this.defectList.push({dname:key,dvalue:defectlist[i][key]})
        }
      }
    },
  }
}
</script>
<style media="screen" scoped>
.divtext {
  min-width: 50px;
  max-width: 200px;
  border: 1px solid green;
  display: inline-block;
}
.bg-info{
  border-left: 5px solid #5989be;
}
.bg-cus-body {
  margin-left: 5px;
}

</style>
