<template>
<div style="overflow-x: hidden;">
  <validator name='v'>
    <form novalidate class="form-horizontal">
      <div class="form-group">
        <label for="f_card_id" class="col-sm-offset-1 col-sm-1 control-label">卡号:</label>
        <div class="col-sm-2">
            <input class="form-control" type="text" v-model="model.f_card_id"  v-validate:f_card_id='{ required: true }'>
        </div>

        <label for="f_meter_no" class="col-sm-1 control-label">表号:</label>
        <div class="col-sm-2">
           <input class="form-control" type="text" v-model="model.f_meter_no" v-validate:f_meter_no='{ required: true }'>
        </div>
         <label for="f_meter_brand" class="col-sm-1 control-label">表牌:</label>
         <div class="col-sm-2">
            <!-- <input class="form-control" type="text" v-model="model.f_meter_brand" > -->
            <v-select id="f_meter_brand"
            placeholder='请选择'
            :value.sync="f_meter_brand"
            :options='f_meterbrand'
            close-on-select clear-button></v-select>
          </div>
        </div>

        <div class="form-group">
          <label for="f_meter_measurement" class="col-sm-offset-1 col-sm-1 control-label">计量类型:</label>
          <div class="col-sm-2">
              <v-select id="f_meter_measurement"
              placeholder='请选择'
              :value.sync="f_meter_measurement"
              :options='f_metermeasurement'
              close-on-select clear-button></v-select>
          </div>
          <label for="f_meter_diameter" class="col-sm-1 control-label">表径:</label>
          <div class="col-sm-2">
              <v-select id="f_meter_diameter"
              placeholder='请选择'
              :value.sync="f_meter_diameter"
              :options='f_meterdiameters'
              close-on-select clear-button></v-select>
          </div>
           <label for="f_meter_reading" class="col-sm-1 control-label">机表读数:</label>
           <div class="col-sm-2">
             <input class="form-control" type="text" v-model="model.f_meter_reading"  number v-validate:f_meter_reading='{ required: true }'>
            </div>
          </div>

        <div class="form-group">
           <label for="f_meter_remain" class="col-sm-offset-1 col-sm-1 control-label">剩余气量:</label>
           <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_meter_remain" number v-validate:f_meter_remain='{ required: true }'>
           </div>
           <label for="f_meter_total" class="col-sm-1 control-label">购气总量:</label>
            <div class="col-sm-2">
               <input class="form-control" type="text" v-model="model.f_meter_total" v-validate:f_meter_total='{ required: true }'>
            </div>

            <label for="f_meter_accumulation" class="col-sm-1 control-label">累计用气量:</label>
            <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_meter_accumulation" v-validate:f_meter_accumulation='{ required: true }'>
            </div>
          </div>

          <div class="form-group">
             <label for="f_remark" class="col-sm-offset-1 col-sm-1 control-label">备注:</label>
             <div class="col-sm-2">
                <input class="form-control" type="text" v-model="model.f_remark">
             </div>
            </div>
        </form>
        <div style="text-align:center;height:auto;">
          <button class="btn btn-primary" :disabled='!($v.valid)' @click="confirm()" style="width:100px;margin-left:20px;">
            <span class="glyphicon glyphicon-floppy-disk"></span>保存
          </button>
          <button class="btn btn-default"  @click='cancel()' style="width:100px;margin-left:20px;">
            <span class="glyphicon glyphicon-log-out"></span>取消
          </button>
        </div>
  </validator>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import Vue from 'vue'
import * as Util from '../Util'
import AppData from '../../stores/AppData'

export default {
  title: '表档案修改',
  props: ['model'],
  data () {
    return {
      f_meter_brand: [''],
      f_meterbrand: this.$appdata.getParam('燃气表品牌'),
      f_meter_measurement: [''],
      f_metermeasurement: this.$appdata.getParam('计量类型'),
      f_meter_diameter: [''],
      f_meterdiameters: this.$appdata.getParam('表径'),
      rowCopy: {}
    }
  },
  ready () {
    if(this.model.f_meter_brand)
      this.f_meter_brand = [this.model.f_meter_brand]
    if(this.model.f_meter_measurement)
      this.f_meter_measurement = [this.model.f_meter_measurement]
    if(this.model.f_meter_diameter)
      this.f_meter_diameter = [this.model.f_meter_diameter]
    this.rowCopy = JSON.stringify(this.model)
  },
  methods: {
    cancel () {
      let tmp = JSON.parse(this.rowCopy)
      for(let prop in this.model)
        if(tmp.hasOwnProperty(prop)) {
          this.model[prop] = tmp[prop]
        }
      this.$back()
    },
    confirm () {
      if (!this.f_meter_brand[0]) {
        window.alert('请选择燃气表品牌！')
        return
      }
      if (!this.f_meter_measurement[0]) {
        window.alert('请选择计量类型！')
        return
      }
      if (!this.f_meter_diameter[0]) {
        window.alert('请选择表径！')
        return
      }
      if(!this.model.id) {
        this.model.id = Util.guid()
      }
      this.model.f_meter_brand = this.f_meter_brand[0]
      this.model.f_meter_measurement = this.f_meter_measurement[0]
      this.model.f_meter_diameter = this.f_meter_diameter[0]
      this.$back()
    }
  }
}
</script>
