<template >
  <div class="panel panel-default auto repair-info-content">
    <div class="panel-body" v-show="show">
      <div className="panel panel-default well">
        <div className="bg-info">
          <div className="row form-group">
            <div className="col-xs-12 col-sm-12 col-md-12">
              <div className="row">
                <div className="col-xs-6 col-sm-6 col-md-6">
                  总购气量: {{ f_pregas_count }}
                </div>
                <div className="col-xs-6 col-sm-6 col-md-6">
                  总购气金额: {{ f_preamount_count }}
                </div>
                <div className="col-xs-6 col-sm-6 col-md-6">
                  购气次数: {{ model.length }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default well" v-for="row in model">
        <div class="bg-info">
          <div class="row form-group">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                  购气量: {{row.f_pregas}}
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  购气金额: {{row.f_preamount}}
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  收费状态: {{row.f_state}}
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  收款: {{row.f_collection}}
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                  缴费方式: {{row.f_payment}}
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                  营业网点: {{row.f_depname}}
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                  操作员: {{row.f_operator}}
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                  购气时间: {{row.f_operate_date}}
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <p v-show="model.length == 0 ">此用户暂无购气记录</p>
    </div>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import co from 'co'
export default {
  title: '查询用户',
  data () {
    return {
      model: [],
      f_pregas_count: 0,
      f_preamount_count: 0,
      show: false,
      row: Object
    }
  },
  props: {
    user: {
      type: Object
    },
    f_userinfo_id:''
  },
  methods: {
    getmodel () {
      let userinfoid
      if(this.f_userinfo_id){
        userinfoid = this.f_userinfo_id
      }else{
        userinfoid = this.user.f_userinfo_id
        console.log(this.user.f_userinfo_id)
      }
      console.log(userinfoid)
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {items: '*', tablename: 't_sellinggas', orderitem: 'f_operate_date desc', condition:`f_state = ‘有效’ and f_userinfo_id = '${userinfoid}'`}},{resolveMsg : null,rejectMsg :null}).then((row) => {
        this.model = row.data
        row.data.forEach(item => {
          this.f_pregas_count += item.f_pregas
          this.f_preamount_count += item.f_preamount
        })
        this.show=true
      })
    },
    back(){

    }
  },
  watch: {
    'user' (val) {
      // this.model.search(`card_id = ${this.user.card_id}`)
      if(this.user){
        if (!(this.user.isNuN)) {
          this.model= []
          this.getmodel()
        }
      }
    },
    'f_userinfo_id'(){
      if(this.f_userinfo_id){
        this.model= []
        this.getmodel()
      }
    }
  },
  ready () {
    if (this.user && this.user.f_userinfo_id) {
      // this.model.search(`card_id = ${this.user.card_id}`)
      this.getmodel()
    }
    if(this.f_userinfo_id){
      this.getmodel()
    }
  }
}
</script>
<style>
.app-botton {
  position:fixed;
  background: #87b2dd;
  color: #FFF;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  z-index: 10;
  opacity:0.5;
  bottom: 50px;
  margin-top: -10px;
  height: 40px;
}
</style>
