<template>
  <form novalidate class="form-horizontal  auto compatible" style="width: 100%;margin: auto;border:15px">
    <div style="width: 100%;height: 36px;background-color: #f1f8ff">
      <div style="width: 8px;height: 100%;background-color: #6aa6e2;margin-right: 20px;float: left"></div>
      <div style="width: auto;height:100%;float: left;"><p class="title-font" style="margin-top: 5px">安检概况：</p></div>
    </div>
    <div class="auto">

      <div class="form-group groupm " >
        <span class="col-md-3 col-sm-4 col-xs-4" style="margin-top: 8px">到达时间:</span>
        <div class="col-md-9 col-sm-8 col-xs-8">
          <input readonly="readonly" style="width: 100%" type="text" v-model="item.f_onsite_time" class=" form-control text-center time-input"/>
          <!--<input readonly="readonly" style="width: 100%" type="text" v-model="f_onsite_time" class=" form-control text-center time-input"/>-->
        </div>
      </div>
      <div class="form-group groupm">
       <span class="col-md-3 col-sm-4 col-xs-4" style="margin-top: 8px">离开时间:</span>
        <div class="col-md-9 col-sm-8 col-xs-8">
          <input readonly="readonly" style="width: 100%" type="text" v-model="item.f_offsite_time" class="form-control text-center time-input"/>
        </div>
      </div>
      <div class="form-group groupm">
        <span class="col-md-3 col-sm-4 col-xs-4  text-left" style="margin-top: 5px">入户状态:</span>
        <div :class="style__" class="col-md-9 col-sm-8 col-xs-8 text-center">
          <input type="radio" name="enterstatus" v-model="item.f_entry_status" id="nopeople" value="到访不遇">到访不遇
          <input type="radio" name="enterstatus" v-model="item.f_entry_status" id="rejectchecck" value="拒检">拒检
          <input type="radio" name="enterstatus" v-model="item.f_entry_status" id="enterhouse" value="入户">入户

        </div>
      </div>
        <div class="form-group groupm col-sm-12 col-xs-12" v-show="item.f_entry_status=='入户'" style="margin-top: 6px">
          <span class="text-left col-md-3 col-sm-4 col-xs-4" style="margin-top: 5px"> 燃气使用:</span>
          <div :class="style__" class="col-md-9 col-sm-8 col-xs-8 text-center">
            <input type="radio" name="isuseed" v-model="item.f_usegas" id="useedgas" value="已使用">已使用
            <input type="radio" name="isuseed" v-model="item.f_usegas" id="nousegas" value="未使用">未使用
          </div>
        </div>
      <div :class="style__" class="form-group col-sm-12 col-xs-12" style="margin-top: 6px" v-show="item.f_usegas == '未使用'">
        <label class="text-left font">未使用天然气照片：</label>
        <div class="auto">
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
              <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                <div class="col-sm-4">
                  <img-self  :class="style__"  :src="item.f_nongasuser_path" alt="未使用天然气照片" width="150" height="200"></img-self>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="item.f_entry_status=='到访不遇'">
        <label class="text-left font">到访不遇照片：</label>
        <div class="auto">
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
              <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                <div class="col-sm-4">
                  <img-self :src="item.f_noanswer_path" alt="到访不遇照片" width="150" height="200"> </img-self>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group col-sm-12 col-xs-12" :class="style__" v-show="item.f_entry_status=='拒检'">
        <label class="text-left font">拒检照片：</label>
        <div class="auto">
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
              <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                <div class="col-sm-4">
                  <img-self :src="item.f_rejectcheck_path" alt="拒检照片" width="150" height="200"> </img-self>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    <div :class="style__" class="form-group" v-show="item.f_usegas == '未使用'">
      <sapn class="text-left col-md-12 col-sm-12 col-xs-12">处置方式：</sapn>
      <div class="col-xs-12 col-sm-12 col-md-12">
        <input type="checkbox" v-model="item.f_no_gas_device">无燃气具
        <input type="checkbox" v-model="item.f_close_valve">关闭表前阀
        <input type="checkbox" v-model="item.f_unload_battery">取下表内电池
      </div>
    </div>
      <!--<div align="center">用户情况表</div>-->
      <!--<div class="form-group" :class="style__">-->
        <!--<span class="col-md-3 col-sm-4 col-xs-4">在家时间:</span>-->
        <!--<div class="col-md-9 col-sm-8 col-xs-8">-->
          <!--<input readonly="readonly"  style="width: 100%" type="text" v-model="item.f_user_inhome_time" class="form-control text-center time-input"/>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="form-group" :class="style__">-->
        <!--<span class="col-md-3 col-sm-4 col-xs-4">建议安检时间:</span>-->
        <!--<div class="col-md-9 col-sm-8 col-xs-8">-->
          <!--<input readonly="readonly"  style="width: 100%" type="text" v-model="item.f_user_check_time" class="form-control text-center time-input"/>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="form-group" :class="style__">-->
        <!--<span class="col-md-3 col-sm-4 col-xs-4">备用联系方式:</span>-->
        <!--<div class="col-md-9 col-sm-8 col-xs-8">-->
          <!--<input readonly="readonly"  style="width: 100%" type="text" v-model="item.f_user_spare_phone" class="form-control text-center time-input"/>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="form-group" :class="style__">-->
        <!--<span class="col-md-3 col-sm-4 col-xs-4">家庭情况备注:</span>-->
        <!--<div class="col-md-9 col-sm-8 col-xs-8">-->
          <!--<input readonly="readonly"   style="width: 100%" type="text" v-model="item.f_user_family_remarks" class="form-control text-center time-input"/>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="form-group" :class="style__">-->
        <!--<span class="col-md-3 col-sm-4 col-xs-4">设备情况备注:</span>-->
        <!--<div class="col-md-9 col-sm-8 col-xs-8">-->
          <!--<input  readonly="readonly"  style="width: 100%" type="text" v-model="item.f_user_equipment_remarks" class="form-control text-center time-input"/>-->
        <!--</div>-->
      <!--</div>-->

    </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{
      item:this.$parent.data
    }
  },
  methods: {
    cameraCallBack(prop, fileName) {
      HostApp.__this__.$set(prop, fileName + '?' + Math.random())
      console.log('photo file name:' + HostApp.__this__.f_nongasuser_path)
      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
      }
    },
    setEntryClass(val) {
         if (val == '到访不遇') {
           this.f_usegas =''
           this.$set('f_entry_class', 'warning')
         }else if (val == '拒检') {
           this.f_usegas = ''
           this.$set('f_entry_class', 'danger')
         } else if (val == '入户') {
           this.$set('f_entry_class', 'success')
         }
    },
    setUsegas(val){
      if (val == '未使用')
        this.$set('f_useclass', 'default')
      if (val == '已使用')
        this.$set('f_useclass', 'success')
    },
    start(){
      // console.log('this.f_onsite_time--',this.data.f_onsite_time)
      this.$parent.$parent.$parent.isStrat = true
      this.$set('action',!this.action)
      this.$set('f_onsite_time', Util.toStandardTimeString())
      //this.$set('f_offsite_time', Util.toStandardTimeString())
      //this.$parent.$parent.$parent.tick()
    }
  },
  components: {
    RadioGroup,
    Radio
  },
  ready() {
    
    console.log("item传递数据",this.item)
    /*this.$set('last_check_date',this.$parent.$parent.$parent.$parent.item.f_last_check_date)*/
    console.log("这里是安检概况数据：",this.$parent.$parent.$parent.$parent.data)

    
   /* if(this.$parent.$parent.$parent.item.f_last_check_result){
      let checkResult = JSON.parse(this.$parent.$parent.$parent.item.f_last_check_result)
      this.$set('last_check_result',checkResult.result)
      this.$set('last_check_data.data',checkResult.data)
    }else{
      this.$set('last_check_result','')
      this.$set('last_check_data.data',[])
    }
    if(this.$parent.$parent.$parent.data.f_onsite_time){
      console.log('已经开始安检')
      this.$parent.$parent.$parent.startClick = true
    }
    if(this.$parent.$parent.$parent.role == 'androidview'){
      this.action = false
      this.f_onsite_time = this.$parent.$parent.$parent.f_onsite_time
      this.f_offsite_time = this.$parent.$parent.$parent.f_offsite_time
    }
    this.action = true
    console.log('this.f_onsite_time',this.f_onsite_time)
    if(this.f_onsite_time){
        this.$parent.$parent.$parent.isStrat = true
    }
    if (this.$parent.$parent.$parent.role == 'repair') {
      this.$set('style__', 'divmask')
      this.$set('style_view_', '')
    }
    else if (this.$parent.$parent.$parent.role == 'view') {
      this.$set('style__', 'divmask')
      this.$set('style_view_', 'divmask')
      console.log('set style for ....')
    } else {
      this.$set('style__', '')
      this.$set('style_view_', '')
    }
    if (!this.f_nongasuser_path)
      this.$set('f_nongasuser_path', Vue.nopic)
    if (!this.f_noanswer_path)
      this.$set('f_noanswer_path', Vue.nopic)
    if (!this.f_rejectcheck_path)
      this.$set('f_rejectcheck_path', Vue.nopic)


    this.$watch('f_usegas', (val) => {
      this.setUsegas(val)
   })

    this.setEntryClass(this.f_entry_status)
    this.$watch('f_entry_status', (val) => {
      this.setEntryClass(val)

      if (val == '到访不遇') {
        this.f_rejectcheck_path = Vue.nopic
      }
      if (val == '拒检') {
        this.f_noanswer_path = Vue.nopic
      }

      if (val != '入户') {
        //清理安检概括
        this.f_no_gas_device = false
        this.f_unload_battery = false
        this.f_close_valve = false
        //清理全局隐患
        this.f_defect_cramped = false
        this.f_defect_bedroom = false
        this.f_defect_longpipe = false
        this.f_defect_firesource = false
        this.f_defect_explosive = false
        this.f_defect_viacabinet = false
        this.f_defect_intermittent = false
        this.f_defect_nearfire = false
        this.f_defect_openkitchen = false
        this.f_defect_hang = false
        this.f_cramped_path = Vue.nopic
        //用户评价
        this.f_client_evaluation = null
        //清设备
        this.$set('f_meters', [])
        this.$set('f_plumbs', [])
        this.$set('f_valves', [])
        this.$set('f_inner_plumbs', [])
        this.$set('f_alarms', [])
        this.$set('f_cookers', [])
        this.$set('f_heaters', [])
        this.$set('f_furnaces', [])
        //TODO 删除已有的照片
      }
    })*/
  }

}
</script>
<style>
  .btn-start{
    background-color: #f5fbff;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    font: 15px PingFang-SC-Medium;
    color: #499edf;
  }
  .time-input{
    border: 1px solid #c0c0c0;
    border-radius: 3px;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .btn-photo{
    border: 0;
    border-radius: 7px;
    background-color: #7dc1f4;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .color-red{
    color: red;
  }

  .title-font{
    font: 18px PingFang-SC-Bold;
    color: #333333;
  }

  .groupm{
    margin-top: 25px;
    margin-bottom: 25px;
  }
</style>
