<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 v-if="detailInfo.stationName">{{ detailInfo.stationName }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称">
            <span v-if="detailInfo.gasUser">{{ detailInfo.gasUser }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-row>

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

      </el-row>

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

      </el-row>

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

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

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

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

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

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

<script>
  import { getRecord } from "@/api/lpgRegulation/check";
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        detailInfo: {}
      }
    },
    methods:{
      getDetailInfo(id){
        getRecord(id).then(res =>{
          if(res.code == 200 && res.data){
            this.detailInfo = res.data;
            this.detailOpen = true;
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .detailInfo{
    height: 500px;
    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>