<template>
  <div class="auto" >
    <validator name='v'>
      <form class="form-horizontal">
        <p class="bg-info text-center">收费</p>
        <div class="row" style="padding-top: 0.5em;">
          <div class="col-sm-3 form-input-group" :class="[$v.payment.required ? 'has-error select-error' : '']">
            <label for="f_paytype" class=" col-sm-2 control-label">付款方式:</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.payment.selectedItems" v-validate:payment='{required: true }'>
              <v-select id="f_payment"
                        v-model="f_payment"
                        placeholder='请选择'
                        :value.sync="data.f_payment"
                        :options='paytype'
                        v-ref:payment
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
          <div class="col-sm-3 form-input-group">
            <label for="f_print" class="control-label">打印格式:</label>
            <div class="col-sm-2">
              <v-select id="print"
                        v-model="data.f_print"
                        placeholder='请选择'
                        :value.sync="data.f_print"
                        :options='printstyle'
                        close-on-select clear-button>
              </v-select>
            </div>
          </div>
          <div class="col-sm-3 form-input-group">
            <label for="f_pregas" class=" control-label">用气量:</label>
            <input class="form-control" type="number"
                   v-model="data.f_pregas" placeholder="用气量"
                   v-scale = "[data.f_pregas, 2]" disabled>
          </div>
          <div class="col-sm-3 form-input-group">
            <label for="f_preamount" class="control-label">实欠气费:</label>
            <input class="form-control"  type="number" v-model="data.f_preamount"
                   v-scale = "[data.f_preamount, 2]"
                   placeholder="实欠气费" disabled>
          </div>

        </div>
        <div class="row" style="padding-top: 0.5em;">
          <div class="col-sm-3 form-input-group">
            <label for="f_balance"  class="control-label">上期结余:</label>
            <input class="form-control"  type="number" v-model="data.f_balance"
                   v-scale="[data.f_balance,2]" placeholder="应收金额" disabled>
          </div>

          <div class="col-sm-3 form-input-group">
            <label for="f_overdue" class="control-label">违约金:</label>
            <input class="form-control"  type="number" v-model="newOverdue"
                   v-scale="[newOverdue,2]" placeholder="违约金" @blur="calOverdue()"
                   disabled>
            <button type="button" name="button" class="btn btn-link" @click="modefiy()" v-if="authArr.includes('滞纳金修改')">修改</button>
          </div>

          <div class="col-sm-3 form-input-group">
            <label for="f_totalcost" class=" col-sm-2 control-label">应收金额:</label>
            <input class="form-control"  type="number" v-model="data.f_totalcost"
                   v-scale = "[data.f_totalcost, 2]" placeholder="应收金额" disabled>
          </div>

          <div class="col-sm-3 form-input-group" :class="[$v.f_collection.required ? 'has-error select-error' : '']">
            <label for="f_collection" class="control-label">收款:</label>
            <input id="f_collection" class="form-control" type="number" v-model="data.f_collection"
                   v-validate:f_collection='{required: true }'  v-scale = "[data.f_collection, 2]"
                   @keyup.enter="confirm()">
          </div>


        </div>
        <div class="row" style="padding-top: 0.5em;">

          <div class="col-sm-12 form-input-group">
            <label for="f_curbalance" class="col-sm-2 control-label">备注:</label>
            <input class="form-control"  type="text" v-model="row.f_comments"  placeholder="<无备注>">
          </div>
        </div>
      </form>
      <print-bill :show="print" :bill-manager='config.hasBillManage' :bill-url='billUrl' v-on:toggle="close" :data='data' @printok="printok" v-ref:printbill></print-bill>
      <div class="text-right" style="margin-top: 1%">
        <button class="btn btn-success" @click="confirm()"  title="演示系统暂不支持" :disabled="true">确认</button>
        <!--<button class="btn btn-success" @click="confirmUserinfo()"  :disabled='!$v.valid'>信息保存</button>-->
        <button class="btn btn-default" @click="clean()">取消</button>
      </div>
    </validator>
    <modal :show.sync="showOverdueModal" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">修改滞纳金</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <label for="newOverdue" class="control-label">原违约金:</label>
          <input id="newOverdue" type="text" class="form-control" v-once v-model="newOverdue" disabled>
          <label for="editOverdue" class="control-label">新违约金:</label>
          <input id="editOverdue" type="text" class="form-control" v-model="editOverdue">
          <p v-if="showErrorMsg" class="text-danger">请输入新的违约金金额！</p>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
        <button v-show="showOverdueModal" type="button" class="btn btn-default" @click='closeOverdue'>取消</button>
        <button v-show="showOverdueModal" type="button" class="btn btn-success" @click='confirmOverdue()'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>
  /**
   *售气收费
   *机表收费组件
   */

  let asyncMachineMeterCenter = async function (self){
    await self.$getConfig(self,'MachineMeterCenter')
    console.log('机表收费config', self.config)
    self.data.f_print = self.config.printType instanceof Array ? self.config.printType : [self.config.printType]
    self.data.f_payment = [self.config.payment]
  }

  let machineChargeGen = async function (self) {
    try {
      let res = await self.$MachineChargeService.marchineCharge(self.data, self.row)
      console.log('机表收费返回id', res)
      // 开始打票
      if (self.config.hasPrint) {
        if (self.data.f_print.indexOf('普通收据') !== -1) {
          if (self.config.hasBillManage) {
            // 启用发票管理，获取票据管理中的票号并存储记录
            self.data.id = res.data
            self.data.f_bill_type = '机表收费'
            self.data.f_bill_style = self.data.f_print[0]
            self.billUrl = 'rs/report/machine_bill'
            self.print = true
          } else {
            self.data.id = res.data
            self.billUrl = 'rs/report/machine_bill'
            self.print = true
          }
        } else if (self.data.f_print[0] === '国税发票') {
          // TODO
        } else if (self.data.f_print[0] === '电子发票') {
          // TODO
        }
      } else {
        self.$dispatch('success')
      }
    } catch (error) {
      self.$showAlert(error, 'danger', 0)
      self.$dispatch('refresh')
    }
  }

  export default {
    title: '收费',
    data () {
      return {
        config: {
          hasPrint: true,  // 默认打票
          hasBillManage: false,  // 默认不启用发票管理
          printType: '普通收据', // 收据/电子票/专用发票/国税发票
          payment: '现金缴费'
        },
        newOverdue: 0,
        print: false,
        isConfirm: true,
        show: false,
        billUrl: '',

        showOverdueModal: false,
        editOverdue: null,
        showErrorMsg: false,
        paytype: this.$appdata.getParam('付款方式') ? this.$appdata.getParam('付款方式') : [],
        printstyle: this.$appdata.getParam('打印格式') ? this.$appdata.getParam('打印格式') : []
      }
    },
    props: ['data', 'row'],
    ready () {
      this.data.f_last_overdue = this.data.f_overdue
      this.newOverdue = this.row.f_overdue_date ? this.row.f_overdue : this.data.f_overdue
      this.calOverdue()
      asyncMachineMeterCenter(this)
    },
    methods: {
      checkOverdue () {
        this.$nextTick(() => {
          this.newOverdue = this.row.f_overdue_date ? this.row.f_overdue : this.data.f_overdue
          this.calOverdue()
        })
      },
      modefiy () {
        this.showOverdueModal = true
      },
      confirmOverdue () {
        if (!this.editOverdue) {
          this.showErrorMsg = true
          return
        }
        this.newOverdue = this.editOverdue
        this.showErrorMsg = false
        let data = {
          f_overdue: this.newOverdue,
          f_user_id: this.data.f_user_id
        }
        console.log(data, 'data-overude')
        this.$resetpost('rs/logic/editOverdue', data).then(() => {
          this.showOverdueModal = false
          this.$dispatch('success', '机表收费')
        })
      },
      closeOverdue () {
        this.showOverdueModal = false
        this.editOverdue = null
        this.showErrorMsg = false
      },
      confirm () {
        this.data.f_payment = this.data.f_payment ? this.data.f_payment[0] : '现金缴费'
        this.data.f_print = this.data.f_print ? this.data.f_print[0] : '普通收据'
        this.data.f_overdue = this.newOverdue
        console.log(this.data.f_overdue, this.data.f_last_overdue, '滞纳金')
        // 未滞纳金修改添加，将修改的值，原因添加到this.data.logicmodel中
        // 如果有变更原因说明有变更
        if (this.f_cause && this.f_cause.length > 0) {
          this.data.f_paydelaypay = this.f_paydelaypay // 应缴滞纳金
          this.data.f_delaypay = this.f_delaypay // 实缴滞纳金
          this.data.f_cause = this.f_cause // 变更原因
        }
        machineChargeGen(this)
      },
      calOverdue () {
        this.data.f_last_overdue = this.data.f_overdue
        this.data.f_lowest = this.data.f_lowest - (this.data.f_overdue - this.newOverdue)
        this.data.f_totalcost = this.data.f_totalcost - (this.data.f_overdue - this.newOverdue)
        this.data.f_overdue = this.newOverdue
        this.data.f_collection = this.data.f_totalcost
      },
      clean () {
        this.$dispatch('success', '机表收费', this.data)
        this.$info('取消操作')
      },
      printok () {
        this.$dispatch('success')
      },
      close () {
        this.print = false
        this.clean()
      },
      changeOverdue (val, reason) {
        this.$set('f_paydelaypay', this.newOverdue) // 应交滞纳金
        this.newOverdue = val // 实缴滞纳金
        this.$set('f_delaypay', this.newOverdue) // 实缴滞纳金
        this.$set('f_cause', this.reason) // 实缴滞纳金
        this.calOverdue()
      }
    },
    watch: {
      'data.f_overdue' (val) {
        // this.data.f_last_overdue = this.newOverdue
        this.newOverdue = val
      },
      'splitAll' (val) {
        this.data.f_pregas = this.data.f_pregas - val
      }
    },
    computed: {
      authArr () {
        return this.$login.r ? this.$login.r : []
      }
    }
  }
</script>
