 <template>
  <div class="auto">
    <!-- <div class="span"> -->
    <h4 class="bg-info text-center">表编号为{{row.metertitle}}的欠费信息</h4>
      <data-grid :model="row" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>序号</th>
            <th>上期指数</th>
            <th>本期指数</th>
            <th>抄表时间</th>
            <th v-if="row.f_totalsplit_type === '分表'">承担量</th>
            <th>用气量</th>
            <th>用气金额</th>
            <th>是否缴费</th>
            <th>违约金</th>
            <th>违约天数</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td>{{$index + 1}}</td>
            <td>{{row.f_last_tablebase}}</td>
            <td>{{row.f_tablebase}}</td>
            <td>{{row.f_hand_date.substring(0, 10)}}</td>
            <td v-if="row.f_share_gas > 0">{{row.f_share_gas && row.f_share_gas > 0? row.f_share_gas : 0}}</td>
            <td>{{row.f_oughtamount}}</td>
            <td>{{row.f_oughtfee}}</td>
            <td>{{row.f_whether_pay}}</td>
            <!-- <td>{{row.f_end_date}}</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>
    <!-- </div> -->
    <modal :show.sync="splitInfo" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">分表费用详情</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <table class="table">
            <thead>
              <tr>
                 <th>用户姓名</th>
                 <th>表编号</th>
                 <th>表品牌</th>
                 <th>表型号</th>
                 <th>抄表状态</th>
                 <th>应交气量</th>
              </tr>
            </thead>
            <tbody v-for="row in handInfo">
              <tr>
                 <td style="text-align: center;">{{row.f_user_name}}</td>
                 <td style="text-align: center;">{{row.f_user_id}}</td>
                 <td style="text-align: center;">{{row.f_meter_brand}}</td>
                 <td style="text-align: center;">{{row.f_meter_style}}</td>
                 <td style="text-align: center;">{{row.f_meter_state}}</td>
                 <td style="text-align: center;">{{row.f_oughtamount}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>
<script>
import co from 'co'

let getSplitInfoGen = function * (self, row) {
  let getSplit = yield self.$resetpost('rs/logic/splitInfo', {data: {totalInfo: row}}, {resolveMsg: null, rejectMsg: '获取分表抄表信息出错!!!'})
  console.log('获取分表信息。。。', getSplit)
  self.handInfo = []
  // 分表总用量
  if (getSplit.data.length > 0) {
    for (let i = 0; i < getSplit.data.length; i++) {
      self.handInfo.push(getSplit.data[i])
    }
  }
}

export default {
  props: ['row'],
  data () {
    return {
      splitInfo: false,
      handInfo: []
    }
  },
  ready () {
    console.log('欠费，，', this.row)
  },
  methods: {
    getSplitInfo (row) {
      console.log('获取的总表信息', row)
      // 获取分表费用数据
      co(getSplitInfoGen(this, row))
      this.splitInfo = true
    },
    close () {
      this.splitInfo = false
    }
  }
}
</script>
