<template>
    <table style="width: 100%" border="1" cellspacing="0" cellpadding="5" class="inspect-table">
      <tr>
        <td colspan="3" style="text-align: center;font-size: 20px">
          <div>唐山天华天然气有限公司</div>
          <div style="letter-spacing: 6.7px">调 压  箱  检  查  卡</div>
        </td>
      </tr>

      <tr>
        <td colspan="3">
          <div style="width: 100%;display: flex">
            <div style="flex: 1">检查人: {{ inspectInfo.inspector }}</div>
            <div style="flex: 1">
              <span v-if="inspectInfo.createTime">检查时间: {{ $parent.$parent.dateFormatter(inspectInfo.createTime) }}</span>
              <span v-else>检查时间: 年月日时分</span>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td colspan="2" style="text-align: center">检查项</td>
        <td style="text-align: center">选项</td>
      </tr>

      <tr>
        <td rowspan="5" style="width: 16%;text-align: center">
          外观

        </td>
        <td>调压箱外观整洁干净无污垢，无油漆脱落现象。门，锁存在且能够正常开启</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.one.check[0]" disabled/></td>
      </tr>

      <tr>
        <td>调压器周围无危及调压器安全的施工作业，无可燃物堆积
          <span
            v-if="inspectInfo.content.one.imageA"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.one.imageA)">
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.one.check[1]" disabled/></td>
      </tr>

      <tr>
        <td>调压器周围无下沉、塌陆、人工取土等</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.one.check[2]" disabled/></td>
      </tr>

      <tr>
        <td>接地扁铁完好
          <span
            v-if="inspectInfo.content.one.imageB"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.one.imageB)">
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.one.check[3]" disabled/></td>
      </tr>

      <tr>
        <td>法兰跨接完好；
          <span
            v-if="inspectInfo.content.one.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.one.image)">
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.one.check[4]" disabled/></td>
      </tr>

      <tr>
        <td rowspan="2" style="text-align: center">
          调压器进出口压力
          <span
            v-if="inspectInfo.content.two.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.two.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>进口压力:0.2-0.4MPa</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.two.check[0]" disabled/></td>
      </tr>

      <tr>
        <td>出口压力:5-8KPa</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.two.check[1]" disabled/></td>
      </tr>

      <tr>
        <td style="text-align: center">
          泄漏检查
          <span
            v-if="inspectInfo.content.three.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.three.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>所有设备及密封点无泄漏</td>
        <td style="text-align: center">
          <input type="checkbox" :checked="inspectInfo.content.three.check" disabled/>
          <!--<el-checkbox v-model="inspectInfo.content.three.check" disabled/>-->
        </td>
      </tr>

      <tr>
        <td style="text-align: center">
          检查调压通道前后阀门
          <span
            v-if="inspectInfo.content.four.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.four.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>阀门开启灵活</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.four.check" disabled/></td>
      </tr>

      <tr>
        <td style="text-align: center">
          各组件及管道外辟的油漆涂层
          <span
            v-if="inspectInfo.content.five.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.five.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>油漆涂层完好，并做到除锈彻底，刷漆全面</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.five.check" disabled/></td>
      </tr>

      <tr>
        <td style="text-align: center">
          过滤器清洗或更换
          <span
            v-if="inspectInfo.content.six.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.six.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>过滤器积垢应清洗或更换滤芯。 每年进行一次</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.six.check" disabled/></td>
      </tr>

      <tr>
        <td style="text-align: center">
          仪表检查
          <span
            v-if="inspectInfo.content.seven.image"
            style="color: blue;cursor: pointer;margin-left: 3px;border-bottom: 1px solid blue"
            @click="$parent.$parent.viewPicture(inspectInfo.content.seven.image)"
          >
            查看图片
          </span>
          <span v-else></span>
        </td>
        <td>检查各仪表显示是否正常，是否在规定压力区间， 必要时进行更换</td>
        <td style="text-align: center"><input type="checkbox" :checked="inspectInfo.content.two.seven" disabled/></td>
      </tr>

    </table>
</template>

<script>
  export default {
    name: "regulator-box-table",
    props:{
        inspectInfo:{
          type: Object,
        }
    }
  }
</script>

<style scoped lang="scss">
  .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;
  }
  }
</style>
