<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">-->
          <!--用户单位：-->
        <!--</el-col>-->

        <!--<el-col :span="8">-->
          <!--检查时间：-->
        <!--</el-col>-->

        <!--<el-col :span="8">-->
          <!--检查人：-->
        <!--</el-col>-->
      <!--</el-row>-->

      <table class="inspect" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td rowspan="3" colspan="2" style="writing-mode: vertical-lr;width: 100px">客户资料</td>
          <td colspan="2" style="width: 100px;height: 60px">单位名称</td>
          <td colspan="5" width="250px">{{detailInfo.company}}</td>
          <td colspan="2" width="100px">合同号</td>
          <td colspan="3">{{detailInfo.contract}}</td>
        </tr>

        <tr>
          <td colspan="2" style="width: 100px;height: 60px">详细地址</td>
          <td colspan="5">{{ detailInfo.address }}</td>
          <td colspan="2">表号</td>
          <td colspan="3">{{ detailInfo.usernum }}</td>
        </tr>

        <tr>
          <td  colspan="2" style="height: 50px">联系人</td>
          <td colspan="5">{{ detailInfo.username }}</td>
          <td colspan="2">电话</td>
          <td colspan="3">{{ detailInfo.phone }}</td>
        </tr>


        <tr>
          <td rowspan="2" colspan="2" width="">表具类型</td>
          <td rowspan="2" colspan="2">型号</td>
          <td rowspan="2" colspan="3" width="">生产厂家</td>
          <td rowspan="2" colspan="2" >进气方向</td>
          <td colspan="5" >累计购气量     M³</td>
        </tr>


        <tr>
          <td colspan="5">子轮数	M³</td>
        </tr>
        <tr>
          <td rowspan="2" colspan="2">
            <input type="checkbox" :checked="detailInfo.meterType == 1" class="input-disabled"/>皮膜
            <input type="checkbox" :checked="detailInfo.meterType == 2" class="input-disabled"/>超声
          </td>
          <td rowspan="2" colspan="2">
            <input type="checkbox" :checked="detailInfo.meterModel == 1" class="input-disabled"/>G1.5
            <input type="checkbox" :checked="detailInfo.meterModel == 2" class="input-disabled"/>G2.5
            <input type="checkbox" :checked="detailInfo.meterModel == 3" class="input-disabled"/>G4
          </td>
          <td rowspan="2" colspan="3">
            <input type="checkbox" :checked="detailInfo.meterCompany == 1" class="input-disabled"/>金卡
            <input type="checkbox" :checked="detailInfo.meterCompany == 2" class="input-disabled"/>秦川
          </td>
          <td rowspan="2" colspan="2">
            <input type="checkbox" :checked="detailInfo.direction == 1" class="input-disabled"/>左
            <input type="checkbox" :checked="detailInfo.direction == 2" class="input-disabled"/>右
          </td>
          <td colspan="5" >液晶数  M³</td>
        </tr>
        <tr>
          <td colspan="5">卡内余额  	 元</td>
        </tr>

        <tr>
          <td width="50px">燃气用具</td>
          <td rowspan="1" width="50px">双眼灶</td>
          <td rowspan="1" width="50px">单眼灶</td>
          <td rowspan="1" width="50px">多眼灶</td>
          <td rowspan="1" width="50px">大锅灶</td>
          <td rowspan="1" width="50px">民用灶</td>
          <td rowspan="1" width="50px">烧烤灶</td>
          <td rowspan="1" width="50px">低汤灶</td>
          <td rowspan="1" width="50px">煲仔炉</td>
          <td rowspan="1" width="50px">矮仔炉</td>
          <td rowspan="1" width="50px">烤箱（炉）</td>
          <td rowspan="1" width="50px">蒸汽炉（箱）</td>
          <td rowspan="1" width="50px">煮面桶</td>
          <td rowspan="1" width="50px">壁挂炉</td>
        </tr>
        <tr>
          <td width="50px">数量</td>
          <td rowspan="1" width="50px">{{device.bothEyes}}</td>
          <td rowspan="1" width="50px">{{device.singleEyes}}</td>
          <td rowspan="1" width="50px">{{device.manyEyes}}</td>
          <td rowspan="1" width="50px">{{device.cauldron}}</td>
          <td rowspan="1" width="50px">{{device.civil}}</td>
          <td rowspan="1" width="50px">{{device.barbecue}}</td>
          <td rowspan="1" width="50px">{{device.lowSoup}}</td>
          <td rowspan="1" width="50px">{{device.clayPot}}</td>
          <td rowspan="1" width="50px">{{device.dwarf}}</td>
          <td rowspan="1" width="50px">{{device.oven}}</td>
          <td rowspan="1" width="50px">{{device.steamer}}</td>
          <td rowspan="1" width="50px">{{device.barrel}}</td>
          <td rowspan="1" width="50px">{{device.wall}}</td>
        </tr>
        <tr>
          <td colspan="14">安全隐患及存在问题</td>
        </tr>
        <tr>
          <td colspan="14" style="text-align: left;padding-left: 20px">
            <div class="contendiv">
              1<input type="checkbox" :checked="jsondata.obj.yi.valueArr2[0]" class="input-disabled"/>未安装燃气报警及切断阀；
              <input type="checkbox"  :checked="jsondata.obj.yi.valueArr2[1]" class="input-disabled"/>燃气报警器、切断阀故障或未通电；
              <input type="checkbox"  :checked="jsondata.obj.yi.valueArr2[2]" class="input-disabled"/>燃气报警器未定期检验；
            </div>
            <div class="contendiv">
              2<input type="checkbox" :checked="jsondata.obj.er.valueArr2[0]" class="input-disabled"/>燃气管道及燃气设施泄漏；
            </div>
            <div class="contendiv">
              3<input type="checkbox" :checked="jsondata.obj.san.valueArr2[0]" class="input-disabled"/>拆装改动燃气管道或增加燃气设备；
            </div>
            <div class="contendiv">
              4<input type="checkbox" :checked="jsondata.obj.si.valueArr2[0]" class="input-disabled"/>燃气管道阀门损坏；
            </div>
            <div class="contendiv">
              5<input type="checkbox" :checked="jsondata.obj.wu.valueArr2[0]" class="input-disabled"/>室内燃气管道设施严重锈蚀（管道及设施表面锈蚀达50％及以上，且处于潮湿环境）；
            </div>
            <div class="contendiv">
              6<input type="checkbox" :checked="jsondata.obj.liu.valueArr2[0]" class="input-disabled"/>双火源、双气源隐患
            </div>
            <div class="contendiv">
              7<input type="checkbox" :checked="jsondata.obj.qi.valueArr2[0]" class="input-disabled"/>未使用不锈钢波纹管；
              不锈钢波纹管存在
              <input type="checkbox" :checked="jsondata.obj.qi.valueArr2[1]" class="input-disabled"/>老化；
              <input type="checkbox" :checked="jsondata.obj.qi.valueArr2[2]" class="input-disabled"/>超过2米；
              <input type="checkbox"  :checked="jsondata.obj.qi.valueArr2[3]" class="input-disabled"/>有三通；
              <input type="checkbox"  :checked="jsondata.obj.qi.valueArr2[4]" class="input-disabled"/>有接口；
              <input type="checkbox"  :checked="jsondata.obj.qi.valueArr2[5]" class="input-disabled"/>暗敷；
              <input type="checkbox"  :checked="jsondata.obj.qi.valueArr2[6]" class="input-disabled"/>穿墙；
              <input type="checkbox"  :checked="jsondata.obj.qi.valueArr2[7]" class="input-disabled"/>穿越吊顶隐患；
            </div>
            <div class="contendiv">
              8<input type="checkbox" :checked="jsondata.obj.ba.valueArr2[0]" class="input-disabled"/>操作间存在
              <input type="checkbox" :checked="jsondata.obj.ba.valueArr2[1]" class="input-disabled"/>搭挂重物、电源线、接地线
              <input type="checkbox"  :checked="jsondata.obj.ba.valueArr2[2]" class="input-disabled"/>封包燃气管道设施；
            </div>
            <div class="contendiv">
              9<input type="checkbox"  :checked="jsondata.obj.jiu.valueArr2[0]" class="input-disabled"/>室内燃气管道设施一般锈蚀；
            </div>
            <div class="contendiv">
              10<input type="checkbox"  :checked="jsondata.obj.shi.valueArr2[0]" class="input-disabled"/>室内燃气管道缺失固定支架；
            </div>
            <div class="contendiv">
              11<input type="checkbox" :checked="jsondata.obj.shiyi.valueArr2[0]" class="input-disabled"/>燃气管道与电线平行净距少于25cm;
              <input type="checkbox"  :checked="jsondata.obj.shiyi.valueArr2[0]" class="input-disabled"/>燃气管道设施与电线交叉净距少于10cm;
              <input type="checkbox"  :checked="jsondata.obj.shiyi.valueArr2[0]" class="input-disabled"/>燃气管道设施与用电设施净距少于30cm
            </div>
            <div class="contendiv">
              12<input type="checkbox" :checked="jsondata.obj.shier.valueArr2[0]" class="input-disabled"/>燃气设备与计量装置安全间距不符合规范；
            </div>
            <div class="contendiv">
              13<input type="checkbox" :checked="jsondata.obj.shisan.valueArr2[0]" class="input-disabled"/>燃气计量表具损坏或不能正常计量（仪表外表损坏、过气不走字和仪表铅封损坏等；
            </div>
            <div class="contendiv">
              14<input type="checkbox" :checked="jsondata.obj.shisi.valueArr2[0]" class="input-disabled"/>室外燃气表箱受外力破损；
            </div>
            <div class="contendiv">
              15<input type="checkbox" :checked="jsondata.obj.shiwu.valueArr2[0]" class="input-disabled"/>无独立厨房；
              <input type="checkbox" :checked="jsondata.obj.shiwu.valueArr2[0]" class="input-disabled"/>□在用餐场所使用燃烧器具；
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">安全特别提示</td>
          <td colspan="12" style="padding: 7px">依据燃气相关法律法规规定，用户及时对以上(  自动填充 )处不合格项隐患问题按照整改要求进行整改，限期（ 手动填写）天内整改完成，如用户需由燃气公司协助整改，费用由用户承担。未按要求整改完成， 一切后果责任由用户自行承担（可增加备注）</td>
        </tr>
        <tr>
          <td colspan="2">用户意见建议</td>
          <td colspan="12" style="height: 50px"></td>
        </tr>
        <tr>
          <td colspan="2">燃气公司建议</td>
          <td colspan="12" style="padding: 7px">
            1.依据《中华人民共和国安全生产法》《城镇燃气管理条例》、《河北省燃气管理条例》《唐山市燃气管理办法》，请贵单位规范使用天然气，并建立健全的燃气安全管理制度，明确责任人。<br>
            2.为了安全使用天然气，请贵单位安装燃气防护报警装置，并由法定的计量机构定期校验，保证其使用正常。<br>
            3.请贵单位详细阅读用户须知，正确使用天然气。<br>
            4.如贵单位不能按照要求正确使用天然气，将有可能带来人员及财产损失，后果由贵单位自行负责。
          </td>
        </tr>
        <tr>
          <td colspan="2">提示</td>
          <td colspan="12" style="padding: 7px">
            唐山天华天然气有限公司<span style="font-size: 20px">24小时客服热线及投诉电话0315-6530022/6530023。</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">安检员</td>
          <td colspan="2" style="height: 50px">{{map.username}}</td>
          <td colspan="2">安检时间</td>
          <td colspan="3" > {{map.createTime.substr(0,10)}}</td>
          <td colspan="2">用户签字</td>
          <td colspan="3" style="position: relative"> <img class="qianm" :src="jsondata.qmUrl"/></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>
