<template>
  <div class="panel panel-info auto">
    <div class="panel-heading">
      <h4 style="display:inline-block;">用户历史操作记录汇总</h4>
    </div>
      <partial-view v-ref:pv>
        <div class="panel-body" style = "text-align:justify"  v-show="this.feestype.totalfees > 0">
          <div class="col-sm-12"  v-show = "row.fees > 0 && row.record_type !== '欠费金额' && row.record_type !== '账户余额' && row.record_type !== '售气收费'" v-for="row in model" style = "margin-top:5px;">
            <span class = "col-sm-2">{{row.record_type}}:</span>
            <span class = "col-sm-6 text-center" v-show = "row.record_type !=='总购气' ">{{row.times}} 次</span>
            <!-- 当为  总购气 时 显示以下内容-->
            <span class = "col-sm-6 text-center" v-show = "row.record_type ==='总购气'">{{row.gas.toFixed(2)}} m³({{row.times}} 次)</span>
            <span class = "col-sm-4 text-right">{{row.fees.toFixed(2)}} 元</span>
          </div>

          <div class="col-sm-12" style = "margin-top:5px">
            <span class = "col-sm-4">合计:</span>
            <span class = "col-sm-4 col-sm-offset-4 text-right">{{this.feestype.totalfees.toFixed(2)}} 元</span>
          </div>
          <div v-show="this.feestype.totalfees > 0" style="width:100%;height:1px;margin:5px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>

          <div class="col-sm-12" v-show = "row.record_type === '欠费金额' || row.record_type === '账户余额'" v-for="row in model" style = "margin-top:5px;">
            <span class = "col-sm-3">{{row.record_type}}:</span>
            <span class = "col-sm-4 col-sm-offset-5 text-right" v-show=" row.fees != null">{{row.fees.toFixed(2)}} 元</span>
            <span class = "col-sm-4 col-sm-offset-5 text-right" v-show=" row.fees == null">0.00 元</span>
          </div>
          <div class="col-sm-12" style = "padding-top:5px">
            <span class = "col-sm-6 ">实际缴费:</span>
            <span class = "col-sm-4 col-sm-offset-2 text-right">{{this.feestype.realcollection.toFixed(2)}} 元</span>
          </div>
          <div class="col-sm-12" style = "padding-top:5px">
            <span class = "col-sm-6 ">实际账户余额:</span>
            <span class = "col-sm-4 col-sm-offset-2 text-right">{{this.feestype.realbalance.toFixed(2)}} 元</span>
          </div>
          <div class="col-sm-12" style = "padding-top:5px">
            <span class = "col-sm-6 ">实际欠费金额:</span>
            <span class = "col-sm-4 col-sm-offset-2 text-right">{{Math.abs(this.feestype.realoughtfee).toFixed(2)}} 元</span>
          </div>
        </div>
        <div class="panel-body" style = "text-align:justify"  v-show="this.feestype.totalfees <= 0">
          <span>此用户无任何操作记录</span>
        </div>
      </partial-view>
  </div>
</template>

<script>
export default {
  title: '历史操作记录汇总',
  props: ['data'],
  data () {
    return {
      model: {},
      feestype: {
        whomoney: null,
        totalfees: null,
        realcollection: null,
        realoughtfee: null,
        realbalance: null
      }
    }
  },
  ready () {
    this.getdata()
  },
  watch: {
    'data' (val) {
      this.getdata()
    }
  },
  methods: {
    getdata () {
      // this.$info(`接受到了数据，${JSON.stringify(this.data)}`)
      // let sql = 'recordStory'
      let f_userinfo_id = this.data.f_userinfo_id
      // this.$info(`加载数据中..., sql:${sql}`)
      this.$refs.pv.load('rs/sql/recordStory', {data: {f_userinfo_id: f_userinfo_id}}).then((a) => {
        // this.$info(`获取到数据, data:${JSON.stringify(a.data)}`)
        this.model = a.data
        console.log('看看获取到了左侧用户信息的数据：', this.model)
        if (a.data === []) {
          this.$info('此处未空')
        } else {
          this.caldata()
        }
      }).catch((error) => {
        if (error.status) {
          this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
          return
        }
        throw error
      })
    },
    caldata () {
      this.feestype.totalfees = 0
      this.feestype.whomoney = 0
      this.feestype.realcollection = 0
      this.feestype.realoughtfee = 0
      this.feestype.realbalance = 0
      for (let index in this.model) {
        // this.$info(`类型:${this.model[index].record_type}, fees:${this.model[index].fees}`)
        this.feestype.totalfees += this.model[index].fees
        if (this.model[index].record_type === '欠费金额') {
          this.feestype.totalfees -= this.model[index].fees
          this.feestype.whomoney -= this.model[index].fees
        }
        if (this.model[index].record_type === '账户余额') {
          this.feestype.totalfees -= this.model[index].fees
          this.feestype.whomoney += this.model[index].fees
        }
        if (this.model[index].record_type === '售气收费') {
          this.feestype.totalfees -= this.model[index].fees
          this.feestype.realcollection += this.model[index].fees
        }
        if (this.model[index].record_type === '补卡金额' ||
        this.model[index].record_type === '换表费' ||
        this.model[index].record_type === '过户费' ||
        this.model[index].record_type === '其他收费') {
          this.feestype.realcollection += this.model[index].fees
        }
      }
      // this.feestype.whomoney = this.feestype.whomoney - this.feestype.totalfees
      this.feestype.whomoney > 0 ? this.feestype.realbalance = this.feestype.whomoney : this.feestype.realoughtfee = this.feestype.whomoney
      // this.$info(`合计费用, totalfees:${this.feestype.totalfees}`)
      // this.$info(`实际缴费, realcollection:${this.feestype.realcollection}`)
      // this.$info(`实际欠费, realoughtfee:${this.feestype.realoughtfee}`)
      // this.$info(`实际余额, realbalance:${this.feestype.realbalance}`)
    }
  }
}
</script>
