<template>
  <partial-view v-ref:pv>
  <div class="panel panel-info auto">
     <div class="panel-heading">
      <h4 style="display:inline-block;">用户基本信息</h4>
    </div>
    <div class="auto info-content">
        <div class="row">
          <label class = "col-sm-5 control-label">用户姓名:</label>
          <span class = "col-sm-7">{{data.f_user_name}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">用户编号:</label>
          <span class = "col-sm-7">{{data.f_userinfo_code}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">用户电话:</label>
          <span class = "col-sm-7">{{data.f_user_phone}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label" id="address1">用户地址:</label>
          <span class = "col-sm-7" id="address">{{data.f_address}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">气表表号:</label>
          <span class = "col-sm-7">{{data.f_meternumber}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">用户类型:</label>
          <span class = "col-sm-7">{{data.f_user_type}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">用气性质:</label>
          <span class = "col-sm-7">{{data.f_gasproperties}}</span>
        </div>
        <div class="row">
           <label class = "col-sm-5 control-label">气价名称:</label>
          <span class = "col-sm-7">{{data.f_price_name}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">开户时间:</label>
          <span class = "col-sm-7">{{data.f_createfile_date}}</span>
        </div>
        <div class="row" v-if="data.f_balance < 0">
          <label class = "col-sm-5 control-label">账户欠费:</label>
          <span class = "col-sm-7" title="不包含违约金">{{0 - (data.f_balance - 0)}}</span>
        </div>
        <div class="row" v-else>
          <label class = "col-sm-5 control-label">账户余额:</label>
          <span class = "col-sm-7">{{data.f_balance}}</span>
        </div>
        <div class="row" v-if="data.f_calculation === '预付费' && data.f_billing === '按金额'">
          <label class = "col-sm-5 control-label">表上余额:</label>
          <span class = "col-sm-7">{{data.f_balance_amount}}</span>
        </div>
        <div class="row" v-if="data.f_calculation === '预付费' && data.f_billing === '按气量'">
          <label class = "col-sm-5 control-label">表上余量:</label>
          <span class = "col-sm-7">{{data.f_balance_gas}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 control-label">剩余气量:</label>
          <span class = "col-sm-7">{{data.f_remanent_gas}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type === '机表' || data.f_meter_type === '物联网表'">
          <label class = "col-sm-5 control-label">表当前底数:</label>
          <span class = "col-sm-7">{{data.f_meter_base}}</span>
        </div>
        <div class="row" v-else>
          <label class = "col-sm-5 control-label">表当前累计购气量:</label>
          <span class = "col-sm-7">{{data.f_meter_base}}</span>
        </div>
      </div>
    </partial-view>
</template>

<script>
/**
*用户档案相关信息组件
*/

export default {
  ready () {
    console.log('看看userinfo里面接收的data数据：', this.data)
  },
  title: '用户基本信息',
  data () {
    return {
      model: null
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
    }
  }
}
</script>
<style lang="less">
  .row {
    /*border-bottom:1px solid #F2F6FA;*/
    margin-left: 0;
    margin-right: 0;
  }
  // .control-label {
  //   height: 23px;
  //   border-right: 1px solid #F2F6FA;
  //   margin-bottom: 0;
  //   text-align: left;
  // }
  // #address {
  //   border-left: 1px solid #F2F6FA;
  // }
  // #user-info {
  //   padding:6px;
  //   span {
  //     padding-left: 5px;
  //   }
  // }
  // #address1 {
  //   border-right: 0;
  // }
</style>
