<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>
        </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  @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="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  @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_tightness" 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_pressuretest" 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
      }
    },
    props: ['idx'],
    components: {
      RadioGroup,
      Radio
    },
    ready() {
      this.$set('piece', this.paper.f_plumbs[this.idx])
      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.piece.f_erosion_path = Vue.nopic
        }
      })
      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)
      })
    },
    methods: {
      cameraCallBack(prop, fileName) {
        console.log(prop + ',' + fileName)
        //HostApp.__this__.$set(prop, fileName) doesnt work
        HostApp.__this__.piece[prop] = fileName + '?' + Math.random()
        console.log(HostApp.__this__.meter[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', {}, 'paper-router')
      },
      delfile(prop, fileName) {
        if(fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          this.piece[prop] = Vue.nopic
        }
      }
    }
  }
</script>
