<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">结算信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-4 form-group form-input-group">
            <label for="f_area" class="control-label">用户编号</label>
            <input type="text" v-model="model.f_userinfo_code" :disabled="true"
                   class="form-control" placeholder="用户编号">
          </div>
          <div class="col-sm-4 form-group form-input-group">
            <label for="f_area" class="control-label">用户姓名</label>
            <input type="text" v-model="model.f_user_name" :disabled="true"
                   class="form-control" placeholder="用户姓名">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group form-input-group">
            <label class="control-label">结算日期:</label>
            <datepicker placeholder="开始日期"
                        v-model="model.f_account_start_date"
                        v-el:date :disabled="true"
                        :value.sync="model.f_account_start_date"
                        :format="'yyyy-MM-dd'"
            ></datepicker>
          </div>
          <div class="col-sm-4 form-group form-input-group">
            <label class="control-label">至:</label>
            <datepicker placeholder="结束日期"
                        v-model="model.f_account_end_date"
                        v-el:date :disabled="true"
                        :value.sync="model.f_account_end_date"
                        :format="'yyyy-MM-dd'"
            ></datepicker>
          </div>
          <div class="col-sm-4 form-group form-input-group">
            <label for="f_area" class="control-label">上期结余</label>
            <input type="text" v-model="model.f_last_balance" :disabled="true"
                   class="form-control" v-scale="[model.f_last_balance, 2]" placeholder="0">
          </div>
        </div>
      </form>
      <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <nobr>表号</nobr>
            </th>
            <th>
              <nobr>上次表底数</nobr>
            </th>
            <th>
              <nobr>本次表底数</nobr>
            </th>
            <th>
              <nobr>本次抄表日期</nobr>
            </th>
            <th>
              <nobr>气量</nobr>
            </th>
            <th>
              <nobr>单价</nobr>
            </th>
            <th>
              <nobr>气费</nobr>
            </th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{ row.f_meternumber }}</td>
            <td style="text-align:center">{{ row.f_last_tablebase }}</td>
            <td style="text-align:center">{{ row.f_tablebase }}</td>
            <td style="text-align:center">{{ row.f_hand_date }}</td>
            <td style="text-align:center">{{ row.f_pregas }}</td>
            <td style="text-align:center">{{ row.f_price }}</td>
            <td style="text-align:center">{{ row.f_preamount }}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
      <table class="table-hover">
        <tr style="position: relative" class="table-bordered">
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
            汇总信息
          </td>
          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
            气量合计:&emsp;{{ model.f_pregas_sum }}
          </td>
          <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
            气费合计:&emsp;{{ model.f_preamount_sum.toFixed(2) }}
          </td>
        </tr>
      </table>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;" >
        <button class="button_search" @click="confirm()" v-if="buttonshow" style="width:80px;margin-left:20px;"
                id="userfiles-adjTabBox-确认">重新打印
        </button>
        <button class="button_clear" @click="cancel()" style="width:80px;margin-left:20px;"
                id="userfiles-adjTabBox-取消">取&nbsp;&nbsp;&nbsp;消
        </button>
      </div>
      <div class="form-group" style="float: right">
        <reissue-bill v-if="print" :show.sync="print" :data="data" @reissue-success="printok()"
                      @cancel="cancel()"></reissue-bill>
      </div>
    </validator>
  </div>
</template>

<script>
/**
 *阶梯气价相关信息组件
 */
let liquidationManage = async function (self) {
  await self.$getConfig(self, 'liquidationManage')
  console.log('liquidationManage', self.config)
  self.model.f_print = self.config.printType instanceof Array ? self.config.printType : [self.config.printType]
  self.model.f_payment = [self.config.payment]
  // 获取当前票号用
  self.model.f_use_type = self.config.billType
  self.model.f_bill_type = self.config.printType
  self.hasValidateBill = self.config.hasBillManage
  console.log('开始没调？？？111')
  await self.getUpdate()
}
export default {
  props: ['data', 'parentData'],
  data () {
    return {
      buttonshow: false,
      model: {
        rows: [],
        f_userinfo_id: this.data.f_userinfo_id,
        f_user_name: this.data.f_user_name,
        f_userinfo_code: this.data.f_userinfo_code,
        f_user_type: this.data.f_user_type,
        f_address: this.data.f_address,
        f_account_start_date: this.data.f_account_start_date,
        f_account_end_date: this.data.f_account_end_date,
        f_last_balance: this.data.f_last_balance,
        f_balance: 0,
        f_collection: this.data.f_collection,
        f_orgid: this.$login.f.orgid,
        f_pregas_sum: 0,
        f_preamount_sum: 0,
        f_bill_type: ['普通收据'],
        f_use_type: '燃气费'
      },
      billData: {
        url: 'rs/report/webmeter_liquidation',
        bill: '',
        f_meter_classify: '物联网表'
      },
      print: false,
      flag: false,
      hasValidateBill: true,
      config: {
        hasBillManage: true,  // 默认不启用发票管理
        billType: '燃气费',   // 票据类型（燃气费，其他费用，调用的发票代码不同）
        payment: '现金缴费',
        printType: ['普通收据'] // 收据/电子票/专用发票/国税发票
      }
    }
  },
  watch: {
    'parentData' (val) {
      console.log('观察到用户发生变化', val, this.model)
      this.f_user_id = this.data.f_user_id
      this.model.f_bill_type = this.config.printType
      this.model.f_use_type = this.config.billType
      this.getUpdate()
      deep: true
    }
  },
  ready () {
    liquidationManage(this).then(() => {
      this.$emit('ready')
    }).catch((error) => {
      this.$emit('error', error)
    })
    this.f_user_id = this.data.f_user_id
  },
  methods: {
    printok () {
      this.$dispatch('search')
    },
    async confirm () {
      let res = await this.$showMessage('请确认是否重新打印', ['confirm', 'cancel'])
      if (res == 'cancel') return
      console.log('this.data', this.data)
      this.data.billUrl = this.billData.url
      this.data.type = '物联网表结算'
      this.data.f_bill_type = '物联网表结算'
      this.data.f_charge_type = '物联网表结算'
      this.data.f_charge_id = this.data.id
      this.print = true
    },
    validateBill (val) {
      console.log('piaohao111', val)
      this.billData.bill = val.bill
    },
    cancel () {
      this.$dispatch('close')
    },
    async getUpdate () {
      console.log('开始没调？？？222')
      this.buttonshow = false
      let res = await this.$resetpost('rs/sql/getWebMeterAccount', {
        data: {
          condition: this.data.id,
          f_orgid: this.model.f_orgid
        }
      }, {rejectMsg: '获取表底数出错', resolveMsg: null})
      this.model.f_pregas_sum = 0
      this.model.f_preamount_sum = 0
      this.model.rows = res.data
      var f_pregas_sum = 0
      var f_preamount_sum = 0
      for (var i = 0; i < this.model.rows.length; i++) {
        f_pregas_sum = parseInt(f_pregas_sum) + parseInt(this.model.rows[i].f_pregas)
        f_preamount_sum = f_preamount_sum + this.model.rows[i].f_preamount
      }
      if (this.model.rows.length > 0) {
        this.buttonshow = true
      }
      if (!(isNaN(parseInt(this.data.f_last_balance)) && isNaN(parseInt(this.data.f_collection)))) {
        this.model.f_balance = this.model.f_last_balance + this.model.f_collection - f_preamount_sum
        this.model.f_preamount_sum = f_preamount_sum
        this.model.f_pregas_sum = f_pregas_sum
      } else {
        this.model.f_balance = !isNaN(this.data.f_last_balance) ? this.model.f_last_balance : 0
      }
    }
  }
}
</script>
<style>

</style>
