<template>
  <div class="auto">
    <!-- <div class="span"> -->
    <div class="panel panel-info auto">
      <!--<div class="panel-heading auto" style="text-align: center">-->
        <!--<h4 style="display:inline-block;">表号为{{row.title}}的欠费信息</h4>-->
      <!--</div>-->
      <div class="panel-body">
        <data-grid :model="row" partial='list' class="list_area table_sy" v-ref:grid>
          <template partial='head'>
            <tr>
              <th>
                <input type="checkbox"  @click="$parent.$parent.addOrRemove($parent.$parent.selectAll)" :checked="$parent.$parent.selectAll" :disabled="$parent.$parent.charge">
              </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>
              <th><nobr>违约天数</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="text-align:center">
                <input type="checkbox" v-model="$parent.$parent.selecteds" :value="row" @click="$parent.$parent.checkbox($index, $event)" :disabled="$parent.$parent.charge">
              </td>
              <td>{{$index + 1}}</td>
              <td>{{row.f_last_tablebase}}</td>
              <td>{{row.f_tablebase}}</td>
              <td><nobr>{{row.f_input_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_whether_pay}}</td>-->
              <td>{{row.overdue}}</td>
              <td>{{((row.f_oughtfee - 0) + (row.overdue - 0)).toFixed(2)}}</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>
    </div>

    <owe-detail-list v-if="isDetail" :show.sync="isDetail" :row="row"></owe-detail-list>
  </div>
</template>
<script>
  import co from 'co'
  import OweDetailList from './OweDetailList'

  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', 'floor', 'charge'],
    data () {
      return {
        splitInfo: false,
        handInfo: [],
        selecteds: [],
        maxIndex: -1,
        pages: [],
        selectAll: true,
        isDetail: false,
        selectedRows: 0// 初始化选中的行数
      }
    },
    components: {
      OweDetailList
    },
    ready () {
      this.selecteds = this.row.rows
    },
    methods: {
      getSplitInfo (row) {
        console.log('获取的总表信息', row)
        // 获取分表费用数据
        co(getSplitInfoGen(this, row))
        this.splitInfo = true
        // 获取选中行数
        this.selectedRows = this.selecteds.length
      },
      close () {
        this.splitInfo = false
      },
      checkbox (val, event) {
        this.selecteds = []
        if (event.target.checked === true) {
          for (let i = 0; i <= val; i++) {
            this.selecteds.push(this.row.rows[i])
          }
        } else if (event.target.checked === false) {
          for (let i = 0; i <= val - 1; i++) {
            this.selecteds.push(this.row.rows[i])
          }
        }
        this.selectAll = (this.selecteds.length === this.row.rows.length)
      },
      addOrRemove (is) {
        this.selecteds = []
        if (!is) { // 添加本页所有数据到ids中
          this.row.rows.forEach((row) => {
            this.selecteds.push(row)
          })
          this.selectAll = true
        } else { // 从ids中取消所有的数据
          this.row.rows.forEach((row, index) => {
            if (index <= this.maxIndex) {
              this.selecteds.push(row)
            }
          })
          this.selectAll = false
        }
      },
      showOweDetail () {
        console.log('显示详情')
        this.isDetail = true
      }
    },
    watch: {
      // 'row.rows' () {
      //   this.maxIndex = this.$parent.getMaxIndex(this.row.rows)
      //   this.maxIndex = this.maxIndex > 0 ? this.maxIndex : -1
      //   console.log('选择的欠费信息', this.maxIndex)
      //   this.selecteds = this.row.rows
      // },
      'selecteds' () {
        // 获取选中的行数
        this.selectedRows = this.selecteds.length
        this.$dispatch('refresh-center', this.selecteds, this.selectedRows)
      }
    }
  }
</script>
