<template>
  <div class="auto">
    <!-- <div class="span"> -->
    <modal :show.sync="show" v-ref:modal large backdrop="false">

      <header slot="modal-header" class="modal-header" style="text-align: center">
        <h4 class="modal-title">欠费详情</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <data-grid :model="row" 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>
              <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_last_tablebase}}</td>
              <td>{{row.f_tablebase}}</td>
              <td><nobr>{{row.f_hand_date.substring(0, 10)}}</nobr></td>
              <td>{{row.f_oughtamount}}</td>
              <td>{{row.f_allfee}}</td>
              <td>{{row.f_debt_money}}</td>
              <td>{{row.f_selloverdue}}</td>
              <td>{{row.f_oughtfee}}</td>
              <td>{{row.f_whether_pay}}</td>
              <td>{{row.overdue}}</td>
              <td>{{row.overduedays}}</td>
              <td v-if="row.splitnum > 0">
                <button class="btn btn-info" @click="$parent.$parent.getSplitInfo(row)">分表详情</button>
              </td>
            </tr>
          </template>
        </data-grid>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="button_clear" @click="close()">取消</button>
      </footer>

    </modal>
  </div>
</template>
<script>
  export default {
    props: ['show', 'row'],
    data () {
      return {
      }
    },
    ready () {
      console.log('欠费，，', this.row)
    },
    methods: {
      close () {
        this.show = false
      }
    },
    watch: {
      'row.rows' () {
        this.selecteds = this.row.rows
      },
      'selecteds' () {
        this.$dispatch('refresh-center', this.selecteds)
      }
    }
  }
</script>
