<template>
  <!-- 安检记录详情 -->
  <el-dialog class="inspect-table" title="检查表详情" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">

    <div style="text-align: right">
      <el-button type="primary" @click="printInspect">打印</el-button>
    </div>

    <div id="inspect" v-if="checkType == 2 && jsondata.obj"  >
      <div style="text-align: center;font-size: 26px;margin-bottom: 18px;">餐饮用户检查表</div>
      <el-row>
        <el-col :span="8">
          用户姓名：{{detailInfo.username }}
        </el-col>

        <el-col :span="5">
          联系电话：{{detailInfo.phone}}
        </el-col>

        <el-col :span="6">
          地址：{{detailInfo.address}}
        </el-col>

        <el-col :span="5">
          燃气表号：{{detailInfo.usernum}}
        </el-col>
      </el-row>

      <table class="inspect" border="1" cellspacing="0" cellpadding="0">

        <tr>
          <td>安检位置</td>
          <td colspan="2">安检内容</td>
          <td>安检结果</td>
        </tr>

        <tr>
          <td rowspan="2">户外管道</td>
          <td colspan="2">是否存在管道锈蚀、防腐不到位的现象</td>
          <td>
            <input v-model="jsondata.obj.huwaiguandao.valueArr2[0]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在多余或未使用燃气接口的现象</td>
          <td>
            <input v-model="jsondata.obj.huwaiguandao.valueArr2[1]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td rowspan="2">燃气表</td>
          <td colspan="2">是否存在锁闭阀启闭、内漏异常的现象</td>
          <td>
            <input v-model="jsondata.obj.ranqibiao.valueArr2[0]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在燃气表计量异常、表封损坏的现象</td>
          <td>
            <input v-model="jsondata.obj.ranqibiao.valueArr2[1]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td rowspan="2">入户管道</td>
          <td colspan="2">是否存在燃气设施包封在橱柜内等封闭现象</td>
          <td>
            <input v-model="jsondata.obj.ruhuguandao.valueArr2[0]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在燃气管道、阀门及其他设备未使用专用材质</td>
          <td>
            <input v-model="jsondata.obj.ruhuguandao.valueArr2[1]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>


        <tr>
          <td rowspan="3">燃气灶</td>
          <td colspan="2">是否存在未安装自闭阀或报警连锁装置的现象</td>
          <td>
            <input v-model="jsondata.obj.ranqizao.valueArr2[0]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在使用不具有熄火保护燃气专用灶具的现象</td>
          <td>
            <input v-model="jsondata.obj.ranqizao.valueArr2[1]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否使用不合格“瓶、灶、阀门、管”等情况</td>
          <td>
            <input v-model="jsondata.obj.ranqizao.valueArr2[2]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>


        <tr>
          <td rowspan="9">其他</td>
          <td colspan="2">是否存在以营利为目的使用天然气且未商用登记的</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[0]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否在用餐场所使用或存放气瓶</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[1]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在偷盗气、破坏燃气设施等违法行为</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[2]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在漏气现象</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[3]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在带电、电气接地、安全间距小于300毫米</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[4]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否在地下室、半地下室及密闭空间中使用燃气</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[5]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在使用不合格或软管、波纹管超2米、穿墙等</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[6]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存放超过100公斤气瓶，但未设专用气瓶间</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[7]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td colspan="2">是否存在私自改动燃气设施等现象</td>
          <td>
            <input v-model="jsondata.obj.qita.valueArr2[8]" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>检查人签字</td>
          <td>{{map.username}}</td>
          <td>用户签字</td>
          <td>
            <div style="width: 90px;height: 26px;">
              <el-image
                v-if="jsondata.qmUrl"
                :src="jsondata.qmUrl"
                :preview-src-list="[jsondata.qmUrl]"
                :z-index="9999"
                style="width: 26px;height: 90px;transform: rotate(-90deg);top: -29px;left: 29px;"
              >
              </el-image>
              <span v-else>-</span>
            </div>
          </td>
        </tr>

        <tr>
          <td>日期</td>
          <td colspan="3">{{map.createTime.substr(0,4)}}年 {{ map.createTime.substr(5,2) }}月 {{ map.createTime.substr(8,2) }}日</td>
        </tr>

      </table>
      <!--<div style="margin: 10px">客户签字：</div>-->
    </div>



    <div id="inspect" v-if="checkType == 1 && jsondata.obj">
      <div style="text-align: center;font-size: 26px;margin-bottom: 18px;">入户安检单</div>

      <div class="user-info">
        <div class="item">用户名：{{ detailInfo.username }}</div>
        <div class="item" style="flex:1.5">联系电话：{{ detailInfo.phone }}</div>
        <div class="item" style="flex:1.4">村庄：{{ detailInfo.villageName }}</div>
        <div class="item" style="flex:1.5">燃气表号：{{ detailInfo.usernum }}</div>
        <div class="item">表底数：{{ jsondata.userInfo.biaodishuzhi }}</div>
      </div>

      <table class="inspect" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td>安检位置</td>
          <td>安检内容</td>
          <td>安检结果</td>
        </tr>

        <tr>
          <td rowspan="3">户外管道</td>
          <td>户外管道焊口未刷漆</td>
          <td><input type="checkbox" :checked="jsondata.obj.huwaiguandao.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>户外管道多余燃气接头</td>
          <td><input type="checkbox" :checked="jsondata.obj.huwaiguandao.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>漏气</td>
          <td><input type="checkbox" :checked="jsondata.obj.huwaiguandao.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td rowspan="4">燃气表</td>
          <td>锁闭阀损坏</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqibiao.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气表故障</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqibiao.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气表接头漏气</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqibiao.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>表封损坏</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqibiao.valueArr2[3]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td rowspan="7">燃气管道</td>
          <td>漏气</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气设施包封在橱柜内</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气管道、阀门及其他设备未使用国标材料</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>搭接电线、作为电气接地线或悬挂重物</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[3]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>使用不合格软管</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[4]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>波纹管超 2 米</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[5]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>波纹管穿墙</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqiguandao.valueArr2[6]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td rowspan="3">燃气灶</td>
          <td>未安装自闭阀</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqizao.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气灶具无熄火保护装置</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqizao.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>燃气灶具超过 8 年使用年限</td>
          <td><input type="checkbox" :checked="jsondata.obj.ranqizao.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td rowspan="5">采暖设备</td>
          <td>未安装烟道/烟道未伸出室外</td>
          <td><input type="checkbox" :checked="jsondata.obj.cainuanshebei.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>使用国家禁用的热水器</td>
          <td><input type="checkbox" :checked="jsondata.obj.cainuanshebei.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>未安装壁挂炉</td>
          <td><input type="checkbox" :checked="jsondata.obj.cainuanshebei.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>壁挂炉安装在灶台正上方</td>
          <td><input type="checkbox" :checked="jsondata.obj.cainuanshebei.valueArr2[3]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>安装在浴室/卧室内</td>
          <td><input type="checkbox" :checked="jsondata.obj.cainuanshebei.valueArr2[4]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td rowspan="7">其他</td>
          <td>以营利为目的使用天然气且未商用登记的</td>
          <td><input type="checkbox" :checked="jsondata.obj.qita.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>私自改动燃气设施</td>
          <td><input type="checkbox" :checked="jsondata.obj.qita.valueArr2[1]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>偷盗气的违法行为</td>
          <td><input type="checkbox" :checked="jsondata.obj.qita.valueArr2[2]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>破坏燃气设施等违法行为</td>
          <td><input type="checkbox" :checked="jsondata.obj.qita.valueArr2[3]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>双火源/双气源</td>
          <td><input type="checkbox" :checked="jsondata.obj.qita.valueArr2[4]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>其他问题{{ ': ' +  jsondata.obj.qitawenti.textarea}}</td>
          <td><input type="checkbox" :checked="jsondata.obj.qitawenti.valueArr2[0]" class="input-disabled"/></td>
        </tr>

        <tr>
          <td>正常</td>
          <td><input type="checkbox" :checked="jsondata.dangerNumber == 0" class="input-disabled"/></td>
        </tr>
      </table>
      <div class="sign">
        <div class="item">安检员：{{map.username}}</div>
        <div class="item" style="display: flex">
          <div style="width: 90px">用户签字：</div>
          <img style="position: relative;top:-13px;" class="qianm" :src="jsondata.qmUrl"/>
        </div>
        <div class="item">安检日期：{{map.createTime.substr(0,10)}}</div>
      </div>
    </div>
  </el-dialog>

</template>

<script>
  import printJs from "print-js";
  export default {
    name: "cy-record-detail",
    components: {
    },
    data(){
      return {
        open: false,
        checkType: 1,
        jsondata:{},
        map:{},
        detailInfo:{},
        device:{}
      }
    },
    methods: {
      printInspect(){
        printJs({
          //需要打印区域设置的id
          printable: 'inspect',
          //打印类型
          type: 'html',
          maxWidth: '100%',
          // * 代表所有样式，没有设置，打印窗口忽略所有样式
          targetStyles: ['*'],
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .inspect{
    width: 100%;
    td{
      //width: 16%;
      text-align: center;
      height: 29px;
    }
  }
  .contendiv{
    line-height: 40px;
  }
  .qianm{
    width: auto;
    height: 60px;
    object-fit: contain;
    transform: rotate(-90deg);
   // position: absolute;
    z-index: 99;
   // margin-top: -185px;
    //margin-left: -30px;
  }

  /*.inspect-table{
    input[type=checkbox]:checked::after {
      content: "✓";
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      #background-color: #ff4014;
      background-color: #0075ff;
      padding: 1px 3px 1px 3px;
      position: relative;
      left: -1px;
      bottom: 3px;
      border-radius: 3px;
    }
  }*/

  .input-disabled{
    pointer-events: none;
  }

  .user-info{
    margin-bottom: 8px;
    display: flex;
    .item{
      flex: 1;
    }
  }

  .sign{
    margin-top: 8px;
    display: flex;
    .item{
      flex: 1;
    }
  }


</style>
