<template>
  <div class="auto">
    <validator name='v'>
      <form class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">补气信息</p>
        <div class="row" style="margin-top:10px;">
          <label for="f_lastremain_fillgas" class=" col-sm-2 control-label">上次剩余补气量:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="model.f_lastremain_fillgas"
                   placeholder="上次剩余补气量"  v-scale = "[model.f_lastremain_fillgas, 2]" disabled>
          </div>
          <label for="f_theremain_fillgas" class=" col-sm-2 control-label">本次剩余补气量:</label>
          <div class="col-sm-2">
            <input class="form-control" type="number" v-model="theremain_fillgas"
                   placeholder="本次剩余补气量"  v-scale = "[theremain_fillgas, 2]" disabled>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div :class="[$v.f_fillgas.dctest ? 'has-error' : 'has-success']">
            <label for="f_fillgas" class=" col-sm-2 control-label" >补气量:</label>
            <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_fillgas"
                     v-validate:f_fillgas='{dctest: [model.f_lastremain_fillgas, "<=" ] }'
                     placeholder="补气量"  v-scale = "[model.f_fillgas, 2]">
              <span v-if="$v.f_fillgas.dctest" style="color:red ">补气量不能大于上次剩余补气量</span>
            </div>
          </div>
          <label for="f_fillgas_type" class="col-sm-2 control-label">补气类型</label>
          <div class="col-sm-2">
            <v-select id="f_fillgas_type"
                      v-model="model.f_fillgas_type"
                      placeholder='请选择'
                      :value.sync="model.f_fillgas_type"
                      :options='paymenttype'
                      close-on-select clear-button>
            </v-select>
          </div>
          <!-- <label for="f_fillgas_date" class="col-sm-2 control-label">补气日期:</label>
          <div class="col-sm-2">
            <datepicker  placeholder="补气日期"
              v-model="model.f_fillgas_date"
              v-validator:f_fillgas_date='{required: true }'
              :value.sync="model.f_fillgas_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              width="100%">
            </datepicker>
          </div> -->
        </div>
        <!-- <div class="row" style="margin-top:10px;">
          <label for="f_card_id" class=" col-sm-2 control-label" >卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
          <span class="col-sm-2 form-control-static">{{model.f_card_id}}</span>
        </div> -->
        <div class="row" style="margin-top:10px;">
          <label for="f_reason" class=" col-sm-2 control-label" >补气原因:</label>
          <div class="col-sm-8">
            <textarea class="form-control" rows="3" v-model="model.f_reason" placeholder="补气原因"></textarea>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:80px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()" title="演示系统暂不支持" :disabled="true">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import Save from '../../../../service/Save'
import PCSell from '../../../../service/PCSell'
import BluetoothSell from '../../../../service/BluetoothSell'

export default {
  title: '换表补气',
  data () {
    return {
      model: {
        f_fillgas_type: ['换表补气'],
        f_fillgas: '',
        f_lastremain_fillgas: '',
        f_theremain_fillgas: '',
        f_reason: '',
        f_card_id: ''
      },
      msg: '',
      status: '',

      paymenttype: this.$appdata.getParam('补气类型')
    }
  },
  props: ['row', 'environment'],
  ready () {
    this.model.f_card_id = this.row.f_card_id
  },
  watch: {
    'row' (val) {
      this.model.f_card_id = val.f_card_id
      this.model.f_fillgas = val.f_remanent_gas
      this.model.f_lastremain_fillgas = val.f_remanent_gas
      this.model.f_theremain_fillgas = this.model.f_lastremain_fillgas - this.model.f_fillgas
    }
  },
  methods: {
    confirm () {
      this.model.f_theremain_fillgas = this.theremain_fillgas
      // this.row.cardInfo={
      //   Times:0
      // }
      // this.model.metermessage={
      //   gasmodel:[{
      //     f_coding:11
      //   }]
      // }
      if (this.environment === 'PC') {
        let save = new Save(this)
        let pcsell = new PCSell(this)
        this.$eventBack([save, pcsell])
        // this.$ChangeMeterService.AddGasWriteCard(this.model, this.row)
        // .then(
        //   (res) => this.$dispatch('success', '换表补气', this.row, res)
        // ).catch(
        //   (error) => this.$dispatch('error', '换表补气', this.row, error)
        // )
      } else if(this.row.environment == 'Android') {
        let save = new Save(this)
        let bluetoothSell = new BluetoothSell(this)
        this.$eventBack([save, bluetoothSell])
      }
    },
    clean () {
      this.$dispatch('clean', this.row)
    }

  },
  computed: {
    theremain_fillgas () {
      if (this.model.f_lastremain_fillgas - this.model.f_fillgas > 0) {
        return this.model.f_lastremain_fillgas - this.model.f_fillgas
      } else {
        return 0
      }
    }
  }
}
</script>

<style>
</style>
