<template>
  <div class="auto">
    <form novalidate class="form-horizontal">
      <p class="bg-info text-center" style="padding: 8px;">上次购气信息</p>
      <div class="row" style="margin-top:6px;">
        <label class=" col-sm-2 control-label">预购气量:</label>
        <div class="col-sm-2" >
          <input class="form-control"  type="number" v-model="model.f_pregas" placeholder="预购气量" disabled>
        </div>
        <label class=" col-sm-2 control-label">预购金额:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="number" v-model="model.f_preamount" placeholder="预购气量" disabled>
        </div>
        <label class=" col-sm-2 control-label">撤销类型:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="text" v-model="model.f_canceltype" placeholder="撤销类型" disabled>
        </div>
      </div>
      <div class="row" style="margin-top:6px;">
        <label class=" col-sm-2 control-label">上期结余:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="number" v-model="model.f_balance" placeholder="上期结余" disabled>
        </div>
        <label class="col-sm-2 control-label">本期结余:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="number" v-model="model.f_curbalance" placeholder="本期结余" disabled>
        </div>
        <label class="col-sm-2 control-label" style="width:15%">收款:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="number" v-model="model.f_collection" placeholder="收款" disabled>
        </div>
      </div>
      <div class="row" style="margin-top:6px;">
        <label class=" col-sm-2 control-label">售气时间:</label>
        <div class="col-sm-2" >
          <input class="form-control"  type="text" v-model="model.f_date" disabled :class="{color: isToday ? 'red':'blue'}">
        </div>
        <label class="col-sm-2 control-label">操作员:</label>
        <div class="col-sm-2">
          <input class="form-control" type="text" v-model="model.f_operator" disabled>
        </div>
        <!--<label for="f_outlets" class="col-sm-2 control-label" style="width:15%">网点:</label>-->
        <!--<div class="col-sm-2">-->
          <!--<input class="form-control"  type="text" v-model="model.f_outlets" disabled>-->
        <!--</div>-->
      </div>
    </form>
    <div style="text-align:right;margin-top:80px;margin-right:50px;">
      <button class="btn btn-default width-60" @click="cancel()" :disabled="!isToday">撤销</button>
      <button class="btn btn-default width-60" @click="clean()">取消</button>
    </div>
    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">撤销原因</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group col-sm-12">
          <textarea rows="3" placeholder="请填写原因" v-model="model.f_cancel_reason" style="margin: 0px; width: 560px; height: 140px;"></textarea>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-success" @click='confirm()' title="演示系统暂不支持" :disabled="true">确认</button>
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>
/**
*综合业务
*卡表收费组件
*/

let cardChargeCancelGen = async function (self){
  // 冲正记录
  await self.$CancelService.cardChargeCancel(self.model, self.row)
  // 冲正电子票
  if (self.model.f_bill_style.includes('电子发票')) {
    await self.$CommonService.correctEticket(self.model.id, self.model.f_canceltype)
  }
  self.$dispatch('success')

}

export default {
  title: '卡表收费',
  data () {
    return {
      model: {
        f_payment: '',
        f_pregas: '',
        f_preamount: '',
        f_totalcost: '',
        f_curbalance: '',
        f_collection: '',
        f_balance: '',
        f_user_balance: '',
        f_canceltype: '',
        f_operator: '',
        f_date: ''
      },
      show: false,
      isToday: false
    }
  },
  props: ['row'],
  ready () {
    this.model.f_price_id = this.row.f_price_id
    this.model.f_user_id = this.row.f_user_id
    this.model.f_userinfo_id = this.row.f_userinfo_id
    this.$resetpost('rs/sql/gasCancel', {data: {f_user_id: this.model.f_user_id}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
      console.log('GASCANCEL:' + JSON.stringify(res.data))
      this.model.id = res.data[0].id
      this.model.f_pregas = res.data[0].f_pregas
      this.model.f_preamount = res.data[0].f_preamount
      this.model.f_curbalance = res.data[0].f_curbalance
      this.model.f_collection = res.data[0].f_collection
      this.model.f_balance = res.data[0].f_balance
      this.model.f_user_balance = res.data[0].f_user_balance
      this.model.f_canceltype = res.data[0].f_canceltype
      this.model.f_bill_style = res.data[0].f_bill_style
      this.model.f_operator = res.data[0].f_operator
      this.model.f_date = res.data[0].f_date
      console.log('日期。。。', new Date().toDateString(), new Date(res.data[0].f_date).toDateString())
      this.isToday = new Date().toDateString() === new Date(res.data[0].f_date).toDateString()
      console.log('这是真实的账户余额：' + res.data[0].f_user_balance)
    }).catch((error) => {
      this.$dispatch('error', '收费撤销', this.row, error)
    })
  },
  watch: {
    'row' (val) {
      this.model.f_price_id = val.f_price_id
      this.model.f_user_id = val.f_user_id
      this.model.f_userinfo_id = val.f_userinfo_id
    }
  },
  methods: {
    cancel () {
      this.show = true
    },
    close () {
      this.show = false
    },
    confirm () {
      console.log('看看有没有撤销原因', this.model)
      this.show = false
      cardChargeCancelGen(this)
    },
    clean () {
      this.$info('取消操作')
      this.$dispatch('cancelclean', this.row)
    }
  }
}
</script>

<style>
</style>
