<template>
  <el-dialog title="安检记录详情" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-form label-width="120px" class="detailInfo">
      <el-row>
        <el-col :span="12">
          <el-form-item label="储配站">
            <span>{{ form.stationName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称">
            <span>{{ form.gasUserName}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="用户类型">
            <span v-if="form.gasUserType == '0'">居民</span>
            <span v-if="form.gasUserType == '1'">非居民</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式">
            <span>{{ form.telNum}}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="安检时间">
            <span>{{ form.safeCheckDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安检人">
            <span>{{ form.safeCheckPersonName}}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入户状态">
            <span v-if="form.checkInStatus == '0'">正常入户</span>
            <span v-if="form.checkInStatus == '1'">拒绝安检</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户地址">
            <span>{{ form.gasUserAddress}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.stoveCheckStatus">
          <el-form-item label="燃气灶具检查情况">
            <div v-if="form.stoveCheckStatus == '0'">合格</div>
            <div v-if="form.stoveCheckStatus == '1'">无3C认证</div>
            <div v-if="form.stoveCheckStatus == '2'">无熄火保护装置</div>
            <el-image v-if="form.stoveCheckPic" :src="form.stoveCheckPic" :preview-src-list="[form.stoveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="连接软管检查情况" v-if="form.hoseCheckStatus">
            <div v-if="form.hoseCheckStatus == '0'">合格</div>
            <div v-if="form.hoseCheckStatus == '1'">普通橡胶软管</div>
            <div v-if="form.hoseCheckStatus == '2'">三通连接软管</div>
            <div v-if="form.hoseCheckStatus == '3'">长度超过两米且未使用硬质钢管链接</div>
            <div v-if="form.hoseCheckStatus == '4'">穿越墙体、门窗顶棚和地面</div>
            <el-image v-if="form.hoseCheckPic" :src="form.hoseCheckPic" :preview-src-list="[form.hoseCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.valveCheckStatus">
          <el-form-item label="减压阀检查情况">
            <div v-if="form.valveCheckStatus == '0'">合格</div>
            <div v-if="form.valveCheckStatus == '1'">可调节</div>
            <div v-if="form.valveCheckStatus == '2'">五自闭功能</div>
            <el-image v-if="form.valveCheckPic" :src="form.valveCheckPic" :preview-src-list="[form.valveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.bottleCheckStatus">
          <el-form-item label="液化气钢瓶检查情况">
            <div v-if="form.bottleCheckStatus == '0'">合格</div>
            <div v-if="form.bottleCheckStatus == '1'">部分有码且可追溯</div>
            <div v-if="form.bottleCheckStatus == '2'">有码但不可追溯</div>
            <div v-if="form.bottleCheckStatus == '3'">钢瓶无码</div>
            <el-image v-if="form.bottleCheckPic" :src="form.bottleCheckPic" :preview-src-list="[form.bottleCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.alarmCheckStatus">
          <el-form-item label="报警器加电磁切断阀检查情况">
            <div v-if="form.alarmCheckStatus == '0'">合格</div>
            <div v-if="form.alarmCheckStatus == '1'">有但未使用</div>
            <div v-if="form.alarmCheckStatus == '2'">有但未实现联动</div>
            <div v-if="form.alarmCheckStatus == '3'">无</div>
            <div v-if="form.alarmCheckStatus == '4'">非液化气专用报警器</div>
            <div v-if="form.alarmCheckStatus == '5'">安装位置大于0.3米</div>
            <el-image v-if="form.alarmCheckPic" :src="form.alarmCheckPic" :preview-src-list="[form.alarmCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.placeCheckStatus">
          <el-form-item label="液化气钢瓶检查情况">
            <div v-if="form.placeCheckStatus == '0'">合格</div>
            <div v-if="form.placeCheckStatus == '1'">高层建筑（裙房）</div>
            <div v-if="form.placeCheckStatus == '2'">地下（半地下）室 </div>
            <div v-if="form.placeCheckStatus == '3'">车库或半地下车库 </div>
            <div v-if="form.placeCheckStatus == '4'">通风不良的场所 5.50公斤钢瓶超过两只或15公斤钢瓶超过七只未设置独立的气瓶间 </div>
            <el-image v-if="form.placeCheckPic" :src="form.placeCheckPic" :preview-src-list="[form.placeCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.checkPersonSign">
          <el-form-item label="安检人员签名">
            <el-image v-if="form.checkPersonSign" :src="form.checkPersonSign" :preview-src-list="[form.checkPersonSign]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.gasUserSign">
          <el-form-item label="用户签字">
            <el-image v-if="form.gasUserSign" :src="form.gasUserSign" :preview-src-list="[form.gasUserSign]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        form: {}
      }
    },
    methods:{
    }
  }
</script>

<style scoped lang="scss">
  .detailInfo{
    height: 350px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>
