<template>
  <partial-view v-ref:pv>
    <div class="panel panel-info auto" style="margin-top: auto">
      <div class="panel-heading"  style="height: 30px">
        <h4 style="display:inline-block;margin-top: auto">表具信息</h4>
      </div>
      <div class="auto ">

        <!--        <div class="row">-->
        <!--          <label class = "col-sm-5 ">左右表:</label>-->
        <!--          <span class = "col-sm-7">{{data.f_aroundmeter}}</span>-->
        <!--        </div>-->
        <div class="row" v-if="data.f_meter_type.includes('物联网') && data.f_collection_type === '按金额'">
          <label class = "col-sm-5 " >表上余额:</label>
          <span class = "col-sm-7" style="">{{data?data.f_balance_amount:dafault.f_balance_amount}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type.includes('物联网') && data.f_collection_type === '按气量'">
          <label class = "col-sm-5 " >表上余量:</label>
          <span class = "col-sm-7" style="">{{data?data.f_balance_gas:dafault.f_balance_gas}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type === '机表' || data.f_meter_type === '物联网表'">
          <label class = "col-sm-5 " >表当前底数:</label>
          <span class = "col-sm-7" >{{data?data.f_meter_base:dafault.f_meter_base}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type === '机表' || data.f_meter_type === '物联网表'">
          <label class = "col-sm-5 " >剩余抵扣量:</label>
          <span class = "col-sm-7" >{{data?data.f_deduction_gas:dafault.f_deduction_gas}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type.includes('卡表') && data.f_collection_type === '按金额'">
          <label class = "col-sm-5 " >累购金额:</label>
          <span class = "col-sm-7" style="">{{data?data.f_total_fee:dafault.f_total_fee}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type.includes('卡表') && data.f_collection_type === '按气量'">
          <label class = "col-sm-5 " >累购气量:</label>
          <span class = "col-sm-7" style="">{{data?data.f_total_gas:dafault.f_total_gas}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type.includes('卡表')">
          <label class = "col-sm-5 " >卡号:</label>
          <span class = "col-sm-7">{{data?data.f_card_id:dafault.f_card_id}}</span>
        </div>
        <div class="row" v-if="data.f_meter_type.includes('卡表')">
          <label class = "col-sm-5 " >购气次数:</label>
          <span class = "col-sm-7">{{data?data.f_times:dafault.f_times}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >气表表号:</label>
          <span class = "col-sm-7">{{data?data.f_meternumber:dafault.f_meternumber}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >用气性质:</label>
          <span class = "col-sm-7">{{data?data.f_gasproperties:dafault.f_gasproperties}}</span>
        </div>
        <div class="row">
          <label class = "col-sm-5 " >气价名称:</label>
          <span class = "col-sm-7">{{data?data.f_price_name:dafault.f_price_name}}</span>
        </div>

        <div class="row" v-if="data.f_balance < 0">
          <label class = "col-sm-5 "  >账户欠费:</label>
          <span class = "col-sm-7" title="不包含违约金">{{data?0 - (data.f_balance - 0):dafault.f_balance}}</span>
        </div>
        <div class="row" v-else>
          <label class = "col-sm-5 " >账户余额:</label>
          <span class = "col-sm-7">{{data?data.f_balance:dafault.f_balance}}</span>
        </div>
        <div class="row" v-if="data.f_remanent_money > 0">
          <label class = "col-sm-5 " >应补金额:</label>
          <span class = "col-sm-7">{{data?data.f_remanent_money:dafault.f_remanent_money}}</span>
        </div>
        <div class="row" v-if="data.f_remanent_gas > 0">
          <label class = "col-sm-5 " >应补气量:</label>
          <span class = "col-sm-7">{{data?data.f_remanent_gas:dafault.f_remanent_gas}}</span>
        </div>
      </div>
    </div>
  </partial-view>
</template>

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

  export default {
    ready () {
      console.log('看看userinfo里面接收的data数据：', this.data)
    },
    title: '客户基本信息',
    data () {

      return {
        dafault:{
          f_balance_amount:0,
          f_balance_gas:0,
          f_meter_base:0,
          f_deduction_gas:0,
          f_total_gas:0,
          f_total_fee:0,
          f_card_id:"*****",
          f_times:0,
          f_meternumber:0,
          f_gasproperties:"****",
          f_price_name:"****",
          f_balance:0,
          f_user_type:"**",
          f_remanent_gas:0

        },
        model: null
      }
    },
    props: ['data'],
    methods:{
      dealmsg (val) {
        this.$dispatch('deal-msg', val)
      },
    },
    watch: {
      'data' (val) {
      }
    }
  }
</script>
<style lang="less">
  .row {
    /*border-bottom:1px solid #F2F6FA;*/
    margin-left: 0;
    margin-right: 0;
  }
  // . {
  //   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>
