<template>
  <form>
    <div :class="style__" class="form-group">
      <label class="col-sm-12 control-label">隐患项</label>
      <div class="col-sm-12">
        <div><input type="checkbox" v-model="f_defect_cramped">通风不良</input></div>
        <div><input type="checkbox" v-model="f_defect_bedroom">燃气设施安装在卧室/卫生间</input></div>
        <div><input type="checkbox" v-model="f_defect_longpipe">软管过长</input></div>
        <div><input type="checkbox" v-model="f_defect_firesource">第二火源</input></div>
        <div><input type="checkbox" v-model="f_defect_explosive" >燃气设施房间堆放易燃易爆品</input></div>
        <div><input type="checkbox" v-model="f_defect_viacabinet">软管穿柜/门窗/顶棚</input></div>
        <div><input type="checkbox" v-model="f_defect_intermittent">软管有接头</input></div>
        <div><input type="checkbox" v-model="f_defect_nearfire">软管离火源过近</input></div>
        <div><input type="checkbox" v-model="f_defect_openkitchen">开放厨房</input></div>
        <div><input type="checkbox" v-model="f_defect_hang">燃气管道/燃气表搭挂重物</input></div>
        <div><input type="checkbox" v-model="f_defect_notfixed">燃气设施固定不牢靠</input></div>
        <div><input type="checkbox" v-model="f_defect_idlevalve">阀门闲置</input></div>
        <div><input type="checkbox" v-model="f_defect_privatepipe">私接管道</input></div>
        <div><input type="checkbox" v-model="f_defect_stealgas">盗气</input></div>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_cramped">
      <label class="col-sm-12 control-label">通风不良照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_cramped_path', '通风不良照片')"  :src="f_cramped_path" alt="通风不良照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_cramped_path', this.f_cramped_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_bedroom">
      <label class="col-sm-12 control-label">燃气设施安装在卧室/卫生间照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_bedroom_path', '燃气设施安装在卧室/卫生间照片')"  :src="f_bedroom_path" alt="燃气设施安装在卧室/卫生间照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_bedroom_path', this.f_bedroom_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_longpipe">
      <label class="col-sm-12 control-label">软管过长照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_longpipe_path', '软管过长照片')"  :src="f_longpipe_path" alt="软管过长照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_longpipe_path', this.f_longpipe_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_firesource">
      <label class="col-sm-12 control-label">第二火源照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_firesource_path', '第二火源照片')"  :src="f_firesource_path" alt="第二火源照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_firesource_path', this.f_firesource_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_explosive">
      <label class="col-sm-12 control-label">燃气设施房间堆放易燃易爆品照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_explosive_path', '燃气设施房间堆放易燃易爆品照片')"  :src="f_explosive_path" alt="燃气设施房间堆放易燃易爆品照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_explosive_path', this.f_explosive_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_viacabinet">
      <label class="col-sm-12 control-label">软管穿柜/门窗/顶棚照片：</label>
      <div class="col-sm-4">
        <img-self @click="takePic('f_viacabinet_path', '软管穿柜/门窗/顶棚照片')"  :src="f_viacabinet_path" alt="软管穿柜/门窗/顶棚照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_viacabinet_path', this.f_viacabinet_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_intermittent">
      <label class="col-sm-12 control-label">软管有接头照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_intermittent_path', '软管有接头照片')"  :src="f_intermittent_path" alt="软管有接头照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_intermittent_path', this.f_intermittent_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_nearfire">
      <label class="col-sm-12 control-label">软管离火源过近照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_nearfire_path', '软管离火源过近照片')"  :src="f_nearfire_path" alt="软管离火源过近照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_nearfire_path', this.f_nearfire_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_openkitchen">
      <label class="col-sm-12 control-label">开放厨房照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_openkitchen_path', '开放厨房照片')"  :src="f_openkitchen_path" alt="开放厨房照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_openkitchen_path', this.f_openkitchen_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_hang">
      <label class="col-sm-12 control-label">燃气管道/燃气表搭挂重物照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_hang_path', '燃气管道/燃气表搭挂重物照片')"  :src="f_hang_path" alt="燃气管道/燃气表搭挂重物照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_hang_path', this.f_hang_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_notfixed">
      <label class="col-sm-12 control-label">燃气设施固定不牢靠照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_notfixed_path', '燃气设施固定不牢靠照片')"  :src="f_notfixed_path" alt="燃气设施固定不牢靠照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_notfixed_path', this.f_notfixed_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_idlevalve">
      <label class="col-sm-12 control-label">阀门闲置照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_idlevalve_path', '阀门闲置照片')"  :src="f_idlevalve_path" alt="阀门闲置照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_idlevalve_path', this.f_idlevalve_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_privatepipe">
      <label class="col-sm-12 control-label">私接管道照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_privatepipe_path', '私接管道照片')"  :src="f_privatepipe_path" alt="私接管道照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_privatepipe_path', this.f_privatepipe_path)"></span>
      </div>
    </div>
    <div class="form-group" v-show="f_defect_stealgas">
      <label class="col-sm-12 control-label">盗气照片：</label>
      <div class="col-sm-4">
        <img-self  @click="takePic('f_stealgas_path', '盗气照片')"  :src="f_stealgas_path" alt="盗气照片" width="150" height="200"></img-self>
      </div>
      <div class="col-sm-8">
        &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="delfile('f_stealgas_path', this.f_stealgas_path)"></span>
      </div>
    </div>
      <!--<defect></defect>-->
      <div style="height:50px;"></div>
  </form>
</template>

<script>
  import RadioGroup from 'vue-client/src/vue-strap/src/radioGroup'
  import Radio from 'vue-client/src/vue-strap/src/radioBtn'
  import Vue from 'vue'
  import * as Util from '../Util'

  export default {
    title: '安检全局隐患',
    data() {
      return  this.$parent.$parent.data
    },
    methods: {
      cameraCallBack(prop, fileName) {
        HostApp.__this__.$set(prop, fileName + '?' + Math.random())
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        console.log('this[prop]:' + this[prop])
        let fileName
        if(!this[prop] || this[prop].includes("nopic.png")) {
          fileName = Util.guid() +'-' + prop + '.jpg'
        } else {
          fileName = Util.getFileName(this[prop])
        }
        HostApp._open_a_page({type: 'boomerang',
          page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
          param: {file: fileName, requestCode: 111, callback:'javascript:HostApp.__callback__("' + prop +'", "%s");', watermark: title + '\t时间：'+ Util.toStandardTimeString() + '\t' + Vue.user.name}
        })
      },
      delfile(prop, fileName) {
        if(fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          this[prop] = Vue.nopic
        }
      }
    },
    components: {
      RadioGroup,
      Radio
    },
    ready() {
      if(!this.f_cramped_path)
        this.$set('f_cramped_path', Vue.nopic)
      if(!this.f_bedroom_path)
        this.$set('f_bedroom_path', Vue.nopic)
      if(!this.f_longpipe_path)
        this.$set('f_longpipe_path', Vue.nopic)
      if(!this.f_firesource_path)
        this.$set('f_firesource_path', Vue.nopic)
      if(!this.f_explosive_path)
        this.$set('f_explosive_path', Vue.nopic)
      if(!this.f_viacabinet_path)
        this.$set('f_viacabinet_path', Vue.nopic)
      if(!this.f_intermittent_path)
        this.$set('f_intermittent_path', Vue.nopic)
      if(!this.f_nearfire_path)
        this.$set('f_nearfire_path', Vue.nopic)
      if(!this.f_openkitchen_path)
        this.$set('f_openkitchen_path', Vue.nopic)
      if(!this.f_hang_path)
        this.$set('f_hang_path', Vue.nopic)
      if(!this.f_notfixed_path)
        this.$set('f_notfixed_path', Vue.nopic)
      if(!this.f_idlevalve_path)
        this.$set('f_idlevalve_path', Vue.nopic)
      if(!this.f_privatepipe_path)
        this.$set('f_privatepipe_path', Vue.nopic)
      if(!this.f_stealgas_path)
        this.$set('f_stealgas_path', Vue.nopic)
    },

  }
</script>
