<template>
  <div class="panel panel-info auto;" style="height:auto;">
    <div class="panel-heading" style="text-align: center">
      <h4>历史缴费信息</h4>
    </div>
    <data-grid :model="model" partial='list' v-ref:grid>
      <template partial='head'>
        <tr>
          <th>序号</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>{{$index + 1}}</td>
          <td>{{row.f_brand_spec}}</td>
          <td>{{row.f_collection}}</td>
          <td>{{row.f_number}}</td>
          <td>{{row.f_unitprice}}</td>
          <td>{{row.f_payment}}</td>
        </tr>
      </template>
    </data-grid>
  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'

  let getRecord = async function (self) {
    let http = new HttpResetClass()
    let res = await http.load('POST', 'rs/sql/singleTable_OrderBy', {
      data: {
        items: '*',
        tablename: 't_othercharge',
        condition: `f_userinfo_id = '${self.data.f_userinfo_id}' and f_state = '有效'`,
        orderitem: 'f_operate_date desc'
      }
    }, {resolveMsg: null, rejectMsg: '获取用户信息失败'})
    console.log('获取的用户信息。。', res)
    self.model.rows = [...self.model.rows, ...res.data]
  }

  export default {
    props: ['data'],
    data () {
      return {
        model: {
          rows: []
        }
      }
    },
    ready () {
      console.log('其他收费历史缴费信息，，', this.data)
      if (this.data) {
        getRecord(this)
      }
    },
    methods: {},
    watch: {
      'data' (val) {
        if (val) {
          getRecord(this)
        }
      }
    }
  }
</script>
