<template>
  <div>
    <form>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">立管</label>
        <div class="col-sm-12">
            <input type="checkbox" v-model="piece.f_plumb_normal">正常</input>
            <input type="checkbox" v-model="piece.f_plumb_trapped">暗封</input>
            <input type="checkbox" v-model="piece.f_plumb_hung">异物悬挂、缠绕</input>
            <input type="checkbox" v-model="piece.f_plumb_modified">私改</input>
            <input type="checkbox" v-model="piece.f_plumb_nearpower">与电源过近</input>
            <input type="checkbox" v-model="piece.f_plumb_loose">固定不牢靠</input>
            <input type="checkbox" v-model="piece.f_plumb_oil">油污</input>
            <input type="checkbox" v-model="piece.f_plumb_tramp">踩踏</input>
            <input type="checkbox" v-model="piece.f_plumb_viberate">震动</input>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_trapped">
        <label class="col-sm-12 control-label">暗封照片：</label>
        <div class="col-sm-4">
          <img-self :class="style__" @click="takePic('f_trapped_path', '暗封照片')"  :src="piece.f_trapped_path" alt="暗封照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_trapped_path', this.piece.f_trapped_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_hung">
        <label class="col-sm-12 control-label">异物悬挂、缠绕照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_hung_path', '异物悬挂、缠绕照片')"  :src="piece.f_hung_path" alt="异物悬挂、缠绕照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_hung_path', this.piece.f_hung_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_modified">
        <label class="col-sm-12 control-label">私改照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_modified_path', '私改照片')"  :src="piece.f_modified_path" alt="私改照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_modified_path', this.piece.f_modified_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_nearpower">
        <label class="col-sm-12 control-label">与电源过近照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_nearpower_path', '与电源过近照片')"  :src="piece.f_nearpower_path" alt="与电源过近照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_nearpower_path', this.piece.f_nearpower_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_loose">
        <label class="col-sm-12 control-label">固定不牢靠照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_loose_path', '固定不牢靠照片')"  :src="piece.f_loose_path" alt="固定不牢靠照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_loose_path', this.piece.f_loose_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_oil">
        <label class="col-sm-12 control-label">油污照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_oil_path', '油污照片')"  :src="piece.f_oil_path" alt="油污照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_oil_path', this.piece.f_oil_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_tramp">
        <label class="col-sm-12 control-label">踩踏照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_tramp_path', '踩踏照片')"  :src="piece.f_tramp_path" alt="踩踏照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_tramp_path', this.piece.f_tramp_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_viberate">
        <label class="col-sm-12 control-label">震动照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_viberate_path', '震动照片')"  :src="piece.f_viberate_path" alt="震动照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_viberate_path', this.piece.f_viberate_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">腐蚀</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_plumb_erosion" type="success" buttons="false">
            <radio value="正常">正常</radio>
            <radio value="严重">严重</radio>
            <radio value="中度">中度</radio>
            <radio value="轻微">轻微</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_plumb_erosion == '严重'">
        <label class="col-sm-12 control-label">严重腐蚀照片：</label>
        <div class="col-sm-4">
          <img-self :class="paper.style__" @click="takePic('f_erosion_path', '严重腐蚀照片')"  :src="piece.f_erosion_path" alt="严重腐蚀照片" width="150" height="200"></img-self>
        </div>
        <div class="col-sm-8">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_erosion_path', this.piece.f_erosion_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">外漏检查</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_plumb_outer_leakage" type="success" buttons="false">
            <radio value="正常">正常</radio>
            <radio value="漏气">漏气</radio>
          </radio-group>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">内漏检查</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_plumb_inner_leakage" type="success" buttons="false">
            <radio value="合格">合格</radio>
            <radio value="不合格">不合格</radio>
          </radio-group>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">测试压力（Pa）：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="piece.f_plumb_pressure" number>
        </div>
      </div>
    </form>
    <a href="#" class="btn btn-primary" @click="goBackValidation">确定</a>
    <div style="height:50px;"></div>
  </div>
</template>

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

export default {
  title: '立管',
  data() {
    return {
      paper: this.$parent.$parent.data,
      piece:{f_plumb_normal:'',f_plumb_trapped:'',f_plumb_hung:'',f_plumb_modified:'',f_plumb_nearpower:'',f_plumb_loose:'',f_plumb_oil:'',f_plumb_tramp:'',f_plumb_viberate:'',
        f_plumb_erosion:'',f_plumb_outer_leakage:'',f_plumb_inner_leakage:'',f_plumb_pressure:'' }
    }
  },
  props: ['idx'],
  components: {
    RadioGroup,
    Radio
  },
  ready() {
    this.$set('piece', this.paper.f_plumbs[this.idx])
    if(!this.piece.f_trapped_path)
      this.$set('piece.f_trapped_path', Vue.nopic)
    this.$watch("piece.f_plumb_trapped", function(val){
      if(!val)
        this.$set('piece.f_trapped_path', Vue.nopic)
    })
    if(!this.piece.f_hung_path)
      this.$set('piece.f_hung_path', Vue.nopic)
    this.$watch("piece.f_plumb_hung", function(val){
      if(!val)
        this.$set('piece.f_hung_path', Vue.nopic)
    })
    if(!this.piece.f_modified_path)
      this.$set('piece.f_modified_path', Vue.nopic)
    this.$watch("piece.f_plumb_modified", function(val){
      if(!val)
        this.$set('piece.f_modified_path', Vue.nopic)
    })
    if(!this.piece.f_nearpower_path)
      this.$set('piece.f_nearpower_path', Vue.nopic)
    this.$watch("piece.f_plumb_nearpower", function(val){
      if(!val)
        this.$set('piece.f_nearpower_path', Vue.nopic)
    })
    if(!this.piece.f_loose_path)
      this.$set('piece.f_loose_path', Vue.nopic)
    this.$watch("piece.f_plumb_loose", function(val){
      if(!val)
        this.$set('piece.f_loose_path', Vue.nopic)
    })
    if(!this.piece.f_oil_path)
      this.$set('piece.f_oil_path', Vue.nopic)
    this.$watch("piece.f_plumb_oil", function(val){
      if(!val)
        this.$set('piece.f_oil_path', Vue.nopic)
    })
    if(!this.piece.f_tramp_path)
      this.$set('piece.f_tramp_path', Vue.nopic)
    this.$watch("piece.f_plumb_tramp", function(val){
      if(!val)
        this.$set('piece.f_tramp_path', Vue.nopic)
    })
    if(!this.piece.f_viberate_path)
      this.$set('piece.f_viberate_path', Vue.nopic)
    this.$watch("piece.f_plumb_viberate", function(val){
      if(!val)
        this.$set('piece.f_viberate_path', Vue.nopic)
    })
    if(!this.piece.f_erosion_path)
      this.$set('piece.f_erosion_path', Vue.nopic)
    this.$watch("piece.f_plumb_erosion", function(val){
      if(val != '严重')
        this.$set('piece.f_erosion_path', Vue.nopic)
    })
  },
  methods: {
    cameraCallBack(prop, fileName) {
      console.log(prop + ',' + fileName)
      HostApp.__this__.piece[prop] = fileName + '?' + Math.random()
      console.log(HostApp.__this__.piece[prop])
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      console.log('this.piece[prop]:' + this.piece[prop])
      let fileName
      if(!this.piece[prop] || this.piece[prop].includes("nopic.png")) {
        fileName = Util.guid() +'-plumb-' + this.idx + '-' + prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.piece[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}
      })
    },
    goBackValidation() {
      this.$goto('paper-device-noncivil', {}, 'paper-router')
    },
    delfile(prop, fileName) {
      if(fileName == Vue.nopic)
        return
      else {
        HostApp.delfile(fileName)
        this.piece[prop] = Vue.nopic
      }
    }
  }
}
</script>
