<template>
    <div style="overflow-y: scroll;height: 100%">
        <div class="auto"  >
            <div v-for="row in model.rows" style="margin-top: 10px;background-color: #c8eff4 " >
                <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-8" style="text-align:left">{{row.f_last_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="padding:0" class = "col-sm-8">{{row.f_oughtamount}}</pre>
                </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 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>
        </div>
    </div>
</template>

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

  export default {
    title: '历史抄表',
    props: ['f_userfiles_id'],
    data () {
      return {
        model: new PagedList('rs/sql/gethandlist', 9999)
      }
    },
    watch: {
      'f_userfiles_id'(){
        let condition = `f_userfiles_id = '${this.f_userfiles_id}' `
        this.model.search(condition)
      },
      'model.rows' () {
        if (this.model.rows) {
          debugger
          console.log(this.model.rows)
          let arr = this.model.rows.slice(0, 3)
          let n = 0
          for (var i = 0; i < arr.length; i++) {
            console.log('this.model.rows.f_oughtamount', this.model.rows.f_oughtamount)
            if (arr[i].f_oughtamount == 0 && arr[i].f_oughtfee == 0) {
              n = n + 1
              console.log('nnnnnnnnnn' + n)
            }
          }
          if (n >= 3) {
            this.$showAlert('当前用户数月未使用', 'warning', 4000)
          }
        }
      }
  },
    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
        }
      }
    }
  }
</script>
