<template>
  <div class="auto" style="margin-top: 10px">
    <form novalidate class="form-horizontal" 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="form-group groupm" >
        <span class="col-sm-4 col-xs-4" style="margin-top: 8px">到达时间:</span>
        <div class="col-sm-8 col-xs-8">
          <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-sm-4 col-xs-4" style="margin-top: 8px">离开时间:</span>
        <div class="col-sm-8 col-xs-8">
          <input readonly="readonly" style="width: 100%" type="text" v-model="f_offsite_time" class="form-control text-center time-input"/>
        </div>
      </div>
      <div class="form-group groupm" >
        <span class="col-sm-4 col-xs-4 text-left" style="margin-top: 5px">入户状态:</span>
        <div class="col-sm-8 col-xs-8">
          <input type="radio" name="enterstatus" v-model="f_entry_status" id="nopeople" value="到访不遇">到访不遇
          <input type="radio" name="enterstatus" v-model="f_entry_status" id="rejectchecck" value="拒检">拒检
          <input type="radio" name="enterstatus" v-model="f_entry_status" id="enterhouse" value="入户">入户
        </div>
      </div>
      <div class="form-group col-sm-12 col-xs-12" v-show="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="f_noanswer_path" alt="到访不遇照片" width="150" height="200"> </img-self>
                </div>
              </div>
              <div class="row text-right div-photo">
                <button type="button" name="button" class="btn btn-primary btn-photo"  @click="takePic('f_noanswer_path', '到访不遇照片')">拍照</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"  @click="delfile('f_noanswer_path', this.f_noanswer_path)" style="width: 25%;"></img>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group col-sm-12 col-xs-12" v-show="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="f_rejectcheck_path" alt="拒检照片" width="150" height="200"> </img-self>
                </div>
              </div>
              <div class="row text-right div-photo">
                <button type="button" name="button" class="btn btn-primary btn-photo"  @click="takePic('f_rejectcheck_path', '拒检照片')">拍照</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"  @click="delfile('f_rejectcheck_path', this.f_rejectcheck_path)" style="width: 25%;"></img>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="style__" class="form-group groupm">
        <span class="col-sm-12 col-xs-12 text-left ">暂停使用天然气:</span>
        <div class="col-sm-12 col-xs-12">
            <input type="checkbox" v-model="f_stop_service">暂停使用天然气
        </div>
      </div>
      <div :class="style__" class="form-group groupm" v-show="f_stop_service">
        <span class="col-sm-12 col-xs-12  text-left">暂停措施</span>
        <div class="col-sm-12 col-xs-12">
            <input type="checkbox" v-model="f_stop_devices">暂停燃气器具
            <input type="checkbox" v-model="f_close_valve">关闭表前阀
            <input type="checkbox" v-model="f_unload_battery">取下表内电池
            <input type="checkbox" v-model="f_zero_meter">表内气量清零
            <input type="checkbox" v-model="f_cutoff_gas">切断气源
            <input type="checkbox" v-model="f_empty_pipe">管道放空
            <input type="checkbox" v-model="f_close_adjuster">关闭调压柜/箱
        </div>
      </div>
      <div class="form-group groupm" v-show="f_close_valve">
        <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 col-xs-4">
                  <img-self  :class="style__"  :src="f_nongasuser_path" alt="关闭表前阀照片" width="150" height="200"></img-self>
                </div>
              </div>
              <div class="row text-right div-photo">
                <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_close_valve_path', '关闭表前阀照片')">拍照</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"   @click="delfile('f_close_valve_path', this.f_close_valve_path)" style="width: 25%;"></img>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group groupm" v-show="f_cutoff_gas">
        <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="f_cutoff_gas_path" alt="切断气源照片" width="150" height="200"></img-self>
                </div>
              </div>
              <div class="row text-right div-photo">
                <button type="button" name="button" class="btn btn-primary btn-photo"@click="takePic('f_cutoff_gas_path', '切断气源照片')">拍照</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"   @click="delfile('f_cutoff_gas_path', this.f_cutoff_gas_path)" style="width: 25%;"></img>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group groupm" v-show="f_close_adjuster">
        <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="f_close_adjuster_path" alt="关闭调压柜/箱照片" width="150" height="200"></img-self>
                </div>
              </div>
              <div class="row text-right div-photo">
                <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_close_adjuster_path', '关闭调压柜/箱照片')">拍照</button>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"   @click="delfile('f_close_adjuster_path', this.f_close_adjuster_path)" style="width: 25%;"></img>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="auto app-text" style="margin-top: 5px;"  v-if="this.$parent.role != 'view'">
        <div class="panel" style="padding: 10px 10px 5px 10px;">
          <div class="panel-body panel-self">
            <div class="row" v-if="last_check_date != null && last_check_date != ''">
              <p class="panel-title col-xs-4 text-left font">上次安检时间</p>
              <p class="panel-title col-xs-8 text-left input-font">{{ last_check_date }}</p>
            </div>
            <div class="row">
              <p class="panel-title col-xs-4 text-left font">上次安检状态</p>
              <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date != null && last_check_date != ''">安检完成</p>
              <p class="panel-title col-xs-8 text-left input-font" v-if="last_check_date == null || last_check_date == ''">未安检</p>
            </div>
            <div class="row" v-if="last_check_date != null && last_check_date != ''">
              <p class="panel-title col-xs-4 text-left font">上次安检结果</p>
              <p class="panel-title col-xs-8 text-left input-font" :class="last_check_result=='正常'?'':'color-red'">{{last_check_result}}</p>
              <div v-for="data in last_check_data.data" class="panel-title col-xs-offset-4 col-xs-8 text-left input-font">
                <p v-for="(key,item) in data">
                  {{key}}:{{item}}
                </p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div style="height:50px;"></div>
    </form>
  </div>
</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.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
      }
    },
    start(){
      this.$parent.isStrat = true
      this.$set('action',!this.action)
      this.$set('f_onsite_time', Util.toStandardTimeString())
      // this.$set('f_offsite_time', Util.toStandardTimeString())
      // this.$parent.tick()
    },
    setEntryClass (val) {
       if (val == '到访不遇')
        this.$set('f_entry_class', 'warning')
      else if (val == '拒检')
        this.$set('f_entry_class', 'danger')
      else if (val == '入户')
        this.$set('f_entry_class', 'success')
    }
  },
  components: {
    RadioGroup,
    Radio
  },
  ready() {
    this.$set('last_check_date',this.$parent.item.f_last_check_date)
    if(this.$parent.item.f_last_check_result){
      let checkResult = JSON.parse(this.$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.data.f_onsite_time){
      console.log('已经开始安检')
      this.$parent.startClick = true
    }
    this.action = true
    console.log('this.f_onsite_time',this.f_onsite_time)
    if(this.f_onsite_time){
      this.$parent.isStrat = true
    }
    this.$data = this.$parent.data
    if (this.$parent.role == 'repair') {
      this.$set('style__', 'divmask')
    }
    else {
      this.$set('style__', '')
    }

    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)
    // 给照片赋初值
    if(!this.f_close_valve_path)
      this.$set('f_close_valve_path', Vue.nopic)
    if(!this.f_cutoff_gas_path)
      this.$set('f_cutoff_gas_path', Vue.nopic)
    if(!this.f_close_adjuster_path)
      this.$set('f_close_adjuster_path', Vue.nopic)
    // 如果停气取消选中
    this.$watch('f_stop_service', function (val) {
      console.log('val',val)
      if(!val) {
        this.f_stop_devices = false
        this.f_close_valve = false
        this.f_unload_battery = false
        this.f_zero_meter = false
        this.f_cutoff_gas = false
        this.f_empty_pipe = false
        this.f_close_adjuster = false
        this.f_close_valve_path = Vue.nopic
        this.f_cutoff_gas_path = Vue.nopic
        this.f_close_adjuster_path = Vue.nopic
      }
    })
    // 不是入户状态
    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_stop_service = false
        this.f_no_gas_device = false
        this.f_unload_battery = false
        this.f_close_valve = false
        // 用户评价
        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_furnaces', [])
        // TODO 删除已有的照片
      }
    })
  }
}
</script>
<style>
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .time-input{
    border: 1px solid #c0c0c0;
    border-radius: 3px;
  }
  .btn-photo{
    border: 0;
    border-radius: 7px;
    background-color: #7dc1f4;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .btn-start{
    background-color: #f5fbff;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    font: 15px PingFang-SC-Medium;
    color: #499edf;
  }
  .groupm{
    margin-top: 25px;
    margin-bottom: 25px;
  }
</style>
