<template>
  <partial-view v-ref:pv>
    <div class="panel panel-info auto;" style="height:auto" v-show="t_userfees.data.length!=0">
      <div class="panel-heading">
        <h4 style="display:inline-block;">客户其他费用</h4>
      </div>
      <table class="table table-bordered self-table" id="table1" >
        <thead>
          <th>类型</th>
          <th>到期时间</th>
        </thead>
        <tbody>
          <tr v-for="row in t_userfees.data" class="danger">
            <td>{{row.f_fee_type}}</td>
            <td>{{row.f_expiration_date}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </partial-view>
</template>

<script>
  /**
   *用户其他费用信息组件
   */
  export default {
    props: ['userinfoid'],
    data () {
      return {
        t_userfees: '',
      }
    },
    methods: {
      async userfees(userinfoid){
        this.t_userfees = await this.$refs.pv.load('rs/sql/saleSingleTable', {data: {tablename: 't_userfees', condition:`f_userinfo_id=${userinfoid}` }})
      }
    },
    watch: {
      'userinfoid' (val) {
        this.userfees(val)
      }
    },
    ready () {
      this.userfees(this.userinfoid)
    }
  }
</script>
<style media="screen">
  #table1{
    text-align:center;
  }
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
