<template>
  <partial-view v-ref:pv>
    <criteria-paged :model="model" :pager="false" v-ref:paged>
      <div partial="list" style="overflow-y: scroll;height: 98%">
        <accordion :one-at-atime="true" type="info"  >
          <panel :is-click="false" :is-open="true" type="info" v-for="row in model.rows" >
            <span @click="$parent.$parent.$parent.selected(row)" class="panel-title row" slot="header"
                  style="cursor: pointer;">
              <div class="col-sm-11">
                <div class="row">
                  <strong :title="row.f_userinfo_code" class="col-sm-4" show-overflow-tooltip="true">{{row.f_userinfo_code.length>9?''+row.f_userinfo_code.substring(0,9)+'...':row.f_userinfo_code}}</strong>
                  <!--<span class="col-sm-3" title="用户名称">{{row.f_user_name}}</span>-->
                  <span class="col-sm-5" title="抄表日期">{{row.f_input_date.substr(0,10)}}</span>
                  <!--<span class="col-sm-3" title="用气金额">{{row.f_oughtfee}}</span>-->
                  <span class="col-sm-3" title="是否欠费">{{row.f_whether_pay === '是' ? '已缴': '欠费'}}</span>
                </div>
              </div>
            </span>
            <div class="panel-body" v-if="$parent.$parent.$parent.isSelected(row)">
              <div class="auto"  >
                  <div class="row">
                    <label class = "col-sm-4">客户名称:</label>
                    <span class = "col-sm-8" style="text-align:left">{{row.f_user_name}}</span>
                  </div>
                  <div class="row">
                    <label class = "col-sm-4">上期底数:</label>
                    <span class = "col-sm-2" style="text-align:left">{{row.f_last_tablebase}}</span>
                    <label class = "col-sm-4">本期底数:</label>
                    <span class = "col-sm-2" style="text-align:left">{{row.f_tablebase}}</span>
                  </div>
                  <!--<div class="row">-->
                    <!--<label class = "col-sm-4">本期底数:</label>-->
                    <!--<pre style="padding:0" class = "col-sm-8">{{row.f_tablebase}}</pre>-->
                  <!--</div>-->
                  <div class="row">
                    <label class = "col-sm-4">用气量:</label>
                    <pre style="text-align:left" class = "col-sm-2">{{row.f_oughtamount}}</pre>
                    <label class = "col-sm-4">用气金额:</label>
                    <span class = "col-sm-2" style="text-align:left">{{row.f_oughtfee}}</span>
                  </div>
                  <!--<div class="row">-->
                    <!--<label class = "col-sm-4">用气金额:</label>-->
                    <!--<span class = "col-sm-8" style="text-align:left">{{row.f_oughtfee}}</span>-->
                  <!--</div>-->
                <div class="row">
                  <label class = "col-sm-4">抄表员:</label>
                  <span style="text-align:left" class = "col-sm-2">{{row.f_inputtor}}</span>
                  <label class = "col-sm-4">是否缴费:</label>
                  <span class = "col-sm-2" style="text-align:left">{{row.f_whether_pay}}</span>
                </div>
                <div class="row">
                  <label class = "col-sm-4" title="所属月份">下发日期:</label>
                  <span class = "col-sm-8" style="text-align:left">{{row.f_hand_date}}</span>
                </div>
                  <div class="row">
                    <label class = "col-sm-4">抄表时间:</label>
                    <span class = "col-sm-8" style="text-align:left">{{row.f_input_date}}</span>
                  </div>
                <div class="row">
                  <label class = "col-sm-4">录入时间:</label>
                  <span class = "col-sm-8" style="text-align:left">{{row.f_operate_date}}</span>
                </div>
                <div class="row">
                  <label class = "col-sm-4">缴费时间:</label>
                  <span class = "col-sm-8" style="text-align:left">{{row.f_sellinggas_date}}</span>
                </div>
                </div>
            </div>
            <div style="margin-top: 8px;background: #FFF;" v-if="!$parent.$parent.$parent.isSelected(row)">
              <span>上期底数:{{row.f_last_tablebase}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本期指数:{{row.f_tablebase}}</span>
            </div>
          </panel>
        </accordion>
      </div>

    </criteria-paged>
  </partial-view>
</template>

<script>
  import {PagedList} from 'vue-client'

  export default {
    title: '历史抄表',
    props: {
      'f_userfiles_id': {},
      isOperate: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        model: new PagedList('rs/sql/gethandlist', 9999),
        row: Object
      }
    },
    ready () {
      let condition = `f_userfiles_id = '${this.f_userfiles_id}' `
      this.model.search(condition)
    },
    methods: {
      selected (row) {
        if (this.row === row) {
          this.row = null
        } else {
          this.row = row
        }
      },
      isSelected (row) {
        return this.row === row
      }
    }
  }
</script>
