<template>
  <div>
    <form>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">燃气表类型：</label>
        <div class="col-sm-12">
          <radio-group :value.sync="meter.f_meter_type" 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">
            <input type="text" class="form-control" v-model="meter.f_maker" maxlength="20">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">表型号：</label>
        <div class="col-sm-12">
          <v-select id="c_plan_year" :value.sync="meter.f_diaphgram_size"
                    :options='meters_size' close-on-select clear-button></v-select>
        </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="meter.f_flow_direction" 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="meter.f_weizhi" 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">
          <input type="text" class="form-control" maxlength="20" v-model="meter.f_meter_no" @keyup="resetReading">
        </div>
        <!--<div class="col-sm-12">
          <a href="#" class="btn btn-primary" @click="updateMeterNo()">修改基表号</a>
        </div>-->
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">本期基表读数：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="meter.f_reading" number @keyup="calcGasUsage">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">上期基表读数：</label>
        <div class="col-sm-12">
          <input type="text" readonly="readonly" class="form-control" maxlength="10" v-model="meter.f_prior_reading">
        </div>
      </div>
        <div :class="paper.style__" class="form-group">
          <label class="col-sm-12 control-label">燃气表生产日期（年）：</label>
          <div class="col-sm-12">
            <datepicker id="f_making_date" placeholder="燃气表生产日期（年）"
                        :value.sync="meter.f_making_date"
                        :disabled-days-of-Week="[]"
                        :format="'yyyy'"
                        :show-reset-button="reset" readonly="readonly">
            </datepicker>
          </div>
        </div>
       <!-- <div :class="paper.style__" class="col-sm-12">
          <a href="#" class="btn btn-primary" @click="change()">修改表信息</a>
        </div>-->
      <div :class="paper.style__" class="form-group">
        <div class="col-sm-12">
            <input type="checkbox" v-model="meter.f_invalid">报废</input>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_invalid">
        <label class="col-sm-12 control-label">报废照片：</label>
        <div class="col-sm-4">
          <img-self @click="takePic('f_invalid_path', '报废照片')"  :src="meter.f_invalid_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_invalid_path', this.meter.f_invalid_path)"></span>
        </div>
      </div>
      <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="meter.f_working_state">工作状态异常</input>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_working_state">
        <label class="col-sm-12 control-label">工作状态异常照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_working_state_path', '工作状态异常照片')"  :src="meter.f_working_state_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_working_state_path', this.meter.f_working_state_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="meter.f_meter_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="meter.f_meter_erosion=='严重'">
        <label class="col-sm-12 control-label">严重腐蚀照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_erosion_path', '严重腐蚀照片')"  :src="meter.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.meter.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">
          <datepicker placeholder="检验日期"
            :value.sync="f_calibrate_date"
            :disabled-days-of-Week="[]"
            :format="'yyyy-MM-dd'"
            :show-reset-button="reset" readonly="readonly">
          </datepicker>
        </div>
      </div>
     <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">检验周期(天)：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" v-model="meter.f_calibrate_period" maxlength="10">
        </div>
      </div>
     <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">卡号：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" v-model="meter.f_card_id" maxlength="10">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <div class="col-sm-12">
            <input type="checkbox" v-model="meter.f_newmeter" @click="calcGasUsage">换表
        </div>
      </div>
        <div :class="paper.style__" class="form-group">
          <label class="col-sm-12 control-label">累计购气量：</label>
          <div class="col-sm-12">
            <input type="text"  class="form-control" maxlength="10" v-model="meter.f_metergasnums" number>
          </div>
        </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">本期用气量：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="meter.f_usage" number>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">表内剩余气量：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="meter.f_remaining_gas" number>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">剩余气量照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_remaining_gas_path', '剩余气量照片')"  :src="meter.f_remaining_gas_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_remaining_gas_path', this.meter.f_remaining_gas_path)"></span>
        </div>
      </div>
      <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="meter.f_defect_no">正常</input>
            <input type="checkbox" v-model="meter.f_defect_magnetic">强磁</input>
            <input type="checkbox" v-model="meter.f_defect_wrapped">包裹</input>
            <input type="checkbox" v-model="meter.f_defect_covered">暗闭</input>
            <input type="checkbox" v-model="meter.f_defect_oil">油污</input>
            <input type="checkbox" v-model="meter.f_defect_unfixed">固定不牢靠</input>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_defect_magnetic">
        <label class="col-sm-12 control-label">强磁照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_magnetic_path', '强磁照片')"  :src="meter.f_magnetic_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_magnetic_path', this.meter.f_magnetic_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_defect_wrapped">
        <label class="col-sm-12 control-label">包裹照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_wrapped_path', '包裹照片')"  :src="meter.f_wrapped_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_wrapped_path', this.meter.f_wrapped_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_defect_covered">
        <label class="col-sm-12 control-label">暗闭照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_covered_path', '暗闭照片')"  :src="meter.f_covered_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_covered_path', this.meter.f_covered_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_defect_oil">
        <label class="col-sm-12 control-label">油污照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_oil_path', '油污照片')"  :src="meter.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.meter.f_oil_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_defect_unfixed">
        <label class="col-sm-12 control-label">固定不牢靠照片：</label>
        <div class="col-sm-4">
          <img-self  @click="takePic('f_unfixed_path', '固定不牢靠照片')"  :src="meter.f_unfixed_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_unfixed_path', this.meter.f_unfixed_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="meter.f_meter_defect" type="success" buttons="false">
            <radio value="正常">正常</radio>
            <radio value="长通表">长通表</radio>
            <radio value="死表">死表</radio>
            <radio value="表不过气">表不过气</radio>
            <radio value="其他">其他</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="meter.f_meter_defect=='其他'">
        <label class="col-sm-12 control-label">其他表故障照片：</label>
        <div class="col-sm-4">
          <img-self @click="takePic('f_meter_defect_path', '其他表故障照片')"  :src="meter.f_meter_defect_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_meter_defect_path', this.meter.f_meter_defect_path)"></span>
        </div>
      </div>
    </form>
    <div class="col-sm-12">
    <a href="#" class="btn btn-primary" @click="goBackValidation">确定</a>
    </div>
    <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'
import Datepicker from 'vue-client/src/vue-strap/src/Datepicker'

export default {
  title: '燃气表',
  data() {
    return {
      paper: this.$parent.$parent.data,
      f_maker: '',
      f_calibrate_date: '',
      meter:{f_invalid:'',f_meter_type:'',f_working_state:'',f_reading:'',f_prior_reading:'',f_newmeter:'',f_defect_no:'',f_defect_wrapped:'',f_flow_direction:'',f_meter_erosion:'',
        f_calibrate_period:'',f_diaphgram_size:'',f_remaining_gas:'',f_remaining_gas_path:'',f_defect_magnetic:'',f_defect_covered:'',f_defect_oil:'',f_defect_unfixed:'',f_meter_defect:''},
      meters_size:Util.choices(this.$parent.$parent.role,'燃气表型号')
    }
  },
  props: ['idx'],
  components: {
    RadioGroup,
    Radio,
    Datepicker
  },
  ready() {
    this.$set('meter', this.paper.f_meters[this.idx])
    // 处理生产厂家
    if(!this.meter.f_maker) {
        this.$set('meter.f_maker', null)
    } else {
      this.f_maker = [this.meter.f_maker]
    }
    this.$watch('f_maker', function (val) {
        this.meter.f_maker = val[0]
    })

    if(!this.meter.f_erosion_path)
      this.$set('meter.f_erosion_path', Vue.nopic)
    this.$watch('meter.f_meter_erosion', function (val) {
      if(val != '严重') {
        this.$set('meter.f_erosion_path', Vue.nopic)
      }
    })
    if(!this.meter.f_invalid_path)
      this.$set('meter.f_invalid_path', Vue.nopic)
    this.$watch("meter.f_invalid", function(val){
      if(!val)
        this.$set('meter.f_invalid_path', Vue.nopic)
    })
    if(!this.meter.f_magnetic_path)
      this.$set('meter.f_magnetic_path', Vue.nopic)
    this.$watch("meter.f_defect_magnetic", function(val){
      if(!val)
        this.$set('meter.f_magnetic_path', Vue.nopic)
    })
    if(!this.meter.f_wrapped_path)
      this.$set('meter.f_wrapped_path', Vue.nopic)
    this.$watch("meter.f_defect_wrapped", function(val){
      if(!val)
        this.$set('meter.f_wrapped_path', Vue.nopic)
    })
    if(!this.meter.f_covered_path)
      this.$set('meter.f_covered_path', Vue.nopic)
    this.$watch("meter.f_defect_covered", function(val){
      if(!val)
        this.$set('meter.f_covered_path', Vue.nopic)
    })
    if(!this.meter.f_oil_path)
      this.$set('meter.f_oil_path', Vue.nopic)
    this.$watch("meter.f_defect_oil", function(val){
      if(!val)
        this.$set('meter.f_oil_path', Vue.nopic)
    })
    if(!this.meter.f_unfixed_path)
      this.$set('meter.f_unfixed_path', Vue.nopic)
    this.$watch("meter.f_defect_unfixed", function(val){
      if(!val)
        this.$set('meter.f_unfixed_path', Vue.nopic)
    })
    if(!this.meter.f_working_state_path)
      this.$set('meter.f_working_state_path', Vue.nopic)
    this.$watch('meter.f_working_state', function (val) {
      if(!val) {
        this.$set('meter.f_working_state_path', Vue.nopic)
      }
    })
    if(!this.meter.f_meter_defect_path)
      this.$set('meter.f_meter_defect_path', Vue.nopic)
    this.$watch('meter.f_meter_defect', function (val) {
      if(val != '其他') {
        this.meter.f_meter_defect_path = Vue.nopic
      }
    })
    if(!this.meter.f_remaining_gas_path)
      this.$set('meter.f_remaining_gas_path', Vue.nopic)

    //检验日期
    if(!this.meter.f_calibrate_date) {
      this.$set('meter.f_calibrate_date', null)
    } else {
      this.f_calibrate_date = this.meter.f_calibrate_date
    }

    this.$watch('f_calibrate_date', function (val) {
        this.meter.f_calibrate_date = val
    })
  },
  methods: {
    cameraCallBack(prop, fileName) {
      console.log(prop + ',' + fileName)
      //HostApp.__this__.$set(prop, fileName) doesnt work
      HostApp.__this__.meter[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.meter[prop]:' + this.meter[prop])
      let fileName
      if(!this.meter[prop] || this.meter[prop].includes("nopic.png")) {
        fileName = Util.guid() +'-meter-' + this.idx + '-' + prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.meter[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.meter[prop] = Vue.nopic
      }
    },

    // 提取上期基表读数
    getLastReading () {
      if(!this.meter.f_meter_no) {
        window.alert('请先填写基表号！')
      } else {
        let that = this
        this.$resetpost( `${this.$androidUtil.getProxyUrl()}/api/af-safecheck/logic/提取基表读数`, {data:{f_meter_no: this.meter.f_meter_no, f_userinfoid: this.paper.f_userid}}, {resolveMsg: null, rejectMsg: null}).then(
          (response) => {
            that.$set('meter.f_prior_reading', response.data.f_prior_reading)
            that.calcGasUsage()
          }
        ).catch(
          (response) => {
            window.alert('提取上期基表读数失败！')
          }
        )
      }
    },
    updateMeterNo () {
      if (!this.mete.f_meter_no) {
        window.alert('请先输入表号')
        return
      }
      HostApp.updateMeterNo(this.meter.f_meter_no, this.paper.f_check_item_id)
    },
    // 计算本期读数
    calcGasUsage () {
      if(Util.isInt(this.meter.f_prior_reading) && Util.isInt(this.meter.f_reading)) {
        let v = Math.round(this.meter.f_reading - (this.meter.f_prior_reading / 1))
        this.$set('meter.f_usage', v)
      }
    },
    change(){
      var r = confirm("确定是否修改用户表信息？")
      if(r) {
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_modify_userinfo`,
          {
            f_time: this.$parent.$parent.getNowFormatDate(),
            f_plan_item_id: this.paper.f_check_item_id,
            f_modifier: Util.f.name,
            f_modifier_id: Util.f.id,
            f_modify_type: '表档案',
            f_userinfoid: this.paper.f_userinfoid,
            f_user_name: this.paper.f_user_name,
            f_approved: '未审核',
            version: this.meter.version,
            f_content: {
              "id": this.meter.id,
              "f_userid": this.meter.f_userid,
              "f_maker": this.meter.f_maker,
              "f_diaphgram_size": this.meter.f_diaphgram_size,
              "f_meter_no": this.meter.f_meter_no,
              "f_weizhi": this.meter.f_weizhi,
              "f_prior_reading": this.meter.f_prior_reading,
              "f_flow_direction": this.meter.f_flow_direction,
              "f_making_date": this.meter.f_making_date
            }
          })
      }
    },
    //重置抄表
    resetReading () {
      this.$set('meter.f_prior_reading', 0)
      this.$set('meter.f_usage', 0)
      this.$set('meter.f_newmeter', false)
    },

  }
}
</script>
