<template>
  <!-- 月度安检 -->
  <div>
    <div style="text-align: right">
      <el-button type="primary" @click="printInspect">打印</el-button>
    </div>

    <div id="monthInspect">
      <div style="text-align: center;font-size: 26px;margin-bottom: 18px;">工业用户检查表</div>

      <el-row>
        <el-col :span="8">
          用户单位：{{ inspectInfo.receiveName }}
        </el-col>

        <el-col :span="8">
          检查时间：{{ inspectInfo.createTime.substr(5,2) }}月 {{ inspectInfo.createTime.substr(8,2) }}日
        </el-col>

        <el-col :span="8">
          检查人：{{ inspectInfo.memberName }}
        </el-col>
      </el-row>

      <table class="inspect" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td style="width: 7%">区域</td>
          <td style="width: 20%">检查项目</td>
          <td>检查内容</td>
          <td style="width: 15%">现场情况</td>
        </tr>

        <tr>
          <td rowspan="8" style="writing-mode: vertical-lr;">管线检查</td>
          <td>压力表检查</td>
          <td>压力表放空检查机械零位，表盘无裂痕；处于检定有效期内，并粘贴检定标识、上下限粘贴标识</td>
          <td>
            正常<input v-model="inspectObj.obj.yalibiaojiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.yalibiaojiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>连接件泄漏检查</td>
          <td>连接部件用检漏液检查泄漏。</td>
          <td>
            正常<input v-model="inspectObj.obj.lianjiejianxieloujiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.lianjiejianxieloujiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>接地点检查</td>
          <td>计量撬有扁铁接地，接地螺栓紧固，无腐蚀。</td>
          <td>
            正常<input v-model="inspectObj.obj.jiedidianjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.jiedidianjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>静电跨接线检查</td>
          <td>跨接线无缺失、无破损、接线端子无锈蚀。</td>
          <td>
            正常<input v-model="inspectObj.obj.jingdiankuajiexianjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.jingdiankuajiexianjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>阀门</td>
          <td>密封、润滑、无内漏、无锈蚀。</td>
          <td>
            正常<input v-model="inspectObj.obj.famen.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.famen.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>管线、焊口检查</td>
          <td>管线表面及焊口无腐蚀，放空立管固定牢靠。</td>
          <td>
            正常<input v-model="inspectObj.obj.guanxianhankoujiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.guanxianhankoujiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>附件检查</td>
          <td>阀门手柄无缺失；铅封无损坏，备用管路用盲板盲好。</td>
          <td>
            正常<input v-model="inspectObj.obj.fujianjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.fujianjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>气流标识检查</td>
          <td>标识齐全、清晰、无损坏。</td>
          <td>
            正常<input v-model="inspectObj.obj.qiliubiaoshijiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.qiliubiaoshijiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td rowspan="7" style="writing-mode: vertical-lr;">设备检查</td>
          <td>消防器材检查</td>
          <td>灭火器压力指示正常，按检查卡内容例行检查，无缺失/损坏。</td>
          <td>
            正常<input v-model="inspectObj.obj.xiaofangqicaijiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.xiaofangqicaijiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>过滤器检查</td>
          <td>过滤器表面无腐蚀；差压表显示正常，使用有效期检查；数值＜100kpa。</td>
          <td>
            正常<input v-model="inspectObj.obj.guolvqijiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.guolvqijiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>流量计检查</td>
          <td>证书在有效期内；表面无损坏；连接密封点无泄漏；润滑油位正常；仪表显示正常，面板无报警信息；电池电量充足。</td>
          <td>
            正常<input v-model="inspectObj.obj.liuliangjijiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.liuliangjijiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>撬装箱体检查</td>
          <td>门锁正常启闭；箱体、门把手无损坏；卫生良好；接地正常。</td>
          <td>
            正常<input v-model="inspectObj.obj.qiaozhuangxiangjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.qiaozhuangxiangjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>安全阀检查</td>
          <td>与现场实际相符，证书在有效期内；配有检定标签；安全阀前球阀全开；</td>
          <td>
            正常<input v-model="inspectObj.obj.anquanfajiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.anquanfajiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>周围环境检查</td>
          <td>无私自改装管线；撬装附近禁止堆放杂物；管线上无电线搭接缠绕。</td>
          <td>
            正常<input v-model="inspectObj.obj.zhouweihuanjingjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.zhouweihuanjingjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>

        <tr>
          <td>可燃气体报警器检查</td>
          <td>接线良好，工作正常，无异常信息；处于鉴定有效期内；经测试报警器工作正常灵敏。</td>
          <td>
            正常<input v-model="inspectObj.obj.keranqitibaojingjiancha.value == 0" type="checkbox" class="input-disabled"/>
            异常<input v-model="inspectObj.obj.keranqitibaojingjiancha.value == 1" type="checkbox" class="input-disabled"/>
          </td>
        </tr>
      </table>
      <div style="margin: 10px;display: flex">
        <span style="line-height: 30px;width: 80px">客户签字：</span>
        <div style="width: 90px;height: 26px;">
          <el-image
            v-if="inspectObj.qmUrl"
            :src="inspectObj.qmUrl"
            :preview-src-list="[inspectObj.qmUrl]"
            :z-index="9999"
            style="width: 26px;height: 90px;transform: rotate(-90deg);top: -32px;left: 29px;"
          >
          </el-image>
          <span v-else></span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import printJs from "print-js";
  export default {
    name: "industry-month-task-inspect-table",
    props:{
      inspectInfo:{
        type:Object
      }
    },
    data(){
      return{
        inspectObj:{
          obj:{
            yalibiaojiancha:{
              value: 0
            },
            lianjiejianxieloujiancha:{
              value: 0
            },
            jiedidianjiancha:{
              value: 0
            },
            jingdiankuajiexianjiancha:{
              value: 0
            },
            famen:{
              value: 0
            },
            guanxianhankoujiancha:{
              value: 0
            },
            fujianjiancha:{
              value: 0
            },
            qiliubiaoshijiancha:{
              value: 0
            },
            xiaofangqicaijiancha:{
              value: 0
            },
            guolvqijiancha:{
              value: 0
            },
            liuliangjijiancha:{
              value: 0
            },
            qiaozhuangxiangjiancha:{
              value: 0
            },
            anquanfajiancha:{
              value: 0
            },
            zhouweihuanjingjiancha:{
              value: 0
            },
            keranqitibaojingjiancha:{
              value: 0
            }
          },
          qmUrl:""
        }
      }
    },
    watch:{
      inspectInfo:{
        handler(){
          this.inspectObj = JSON.parse(this.inspectInfo.content);
        },
        immediate: true
      }
    },
    methods:{
      printInspect(){
        printJs({
          //需要打印区域设置的id
          printable: 'monthInspect',
          //打印类型
          type: 'html',
          maxWidth: '100%',
          // * 代表所有样式，没有设置，打印窗口忽略所有样式
          targetStyles: ['*'],
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .inspect{
    width: 100%;
    td{
      //width: 16%;
      text-align: center;
      height: 29px;
    }
    /*input[type=checkbox]:checked::after {
      content: "✓";
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      #background-color: #ff4014;
      background-color: #0075ff;
      padding: 0px 2px 0px 2px;
      position: relative;
      left: -1px;
      bottom: 2px;
      border-radius: 3px;
    }*/

    .input-disabled{
      pointer-events: none;
    }
  }
</style>
