<template >
  <div class="row" style="margin-top:5px;height: auto">
    <div style="float: left">
      <p class="bg-info text-center" style="padding: 8px;">基本信息</p>
    </div>
  </div>
  <div class="panel panel-primary datapanel" style="height: auto;padding-right:20px;">
    <div class="row">
      <div class="col-xs-2">
        <label type="text"  class="form-control mystylecenter" >客户名称:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter "> {{row.f_user_name}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >用户状态:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter "> {{row.f_user_state}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >安装日期:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_gas_date}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >客户电话:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control  mystylecenter"> {{row.f_user_phone}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >用户类型:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_user_type}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >用气性质:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_gasproperties}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >客户地址:</label>
      </div>
      <div class="col-xs-10">
        <label type="text" class="form-control mystylecenter "> {{row.f_address}}</label>
      </div>
    </div>
  </div>
  <div class="row" style="margin-top:10px;height: auto">
    <div style="float: left">
      <p class="bg-info text-center" style="padding: 8px;">表具信息</p>
    </div>
  </div>
  <div class="panel panel-primary span datapanel " v-for="row in meterInfo" style="height: auto;padding-right:20px;">
    <!--    第一行数据-->
    <div class="row" style="margin-top:10px;">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >表号:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_meternumber}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >气表状态:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_table_state}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >气表类型:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_meter_classify}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >气表品牌:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_meter_brand}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >气表型号:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_meter_style}}</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter" >表底数:</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter"> {{row.f_meter_base}}</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter" >表累计购气金额:</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter"> {{row.f_total_fee}}</label>
      </div>
      <div class="col-xs-4">
        <label type="text" class="form-control mystylecenter" >表累计购气量:</label>
      </div>
      <div class="col-xs-2">
        <label type="text" class="form-control mystylecenter"> {{row.f_total_gas}}</label>
      </div>
    </div>
  </div>
</template>

<script>
  import vue from 'vue'

  import {HttpResetClass} from 'vue-client'

  export default {
    title: '表具信息',
    // 表相关信息1
    props: ['f_userinfo_id'],

    data () {
      return {
        model: null,
        row:{},
        meterInfo:{}
      }
    },
    methods: {
      // 发送请求数据
      search () {

        let http = new HttpResetClass()

        http.load('POST','api/af-revenue/sql/getUserBaseData',{data: {condition: `f_userinfo_id ='${this.f_userinfo_id}'`}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.row = res.data[0]})
        let http2 = new HttpResetClass()
        http2.load('POST','api/af-revenue/sql/getUserMeter',{data: {condition: `f_userinfo_id ='${this.f_userinfo_id}'`}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.meterInfo = res.data})
      },
    },
    ready () {
      this.search()
    },
    watch: {

    },
    computed: {
    }
  }
</script>
<style scoped>

  .datapanel {
    color: #111;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 10px 10px 10px;
    border-radius:15px;
  }
  .mystylecenter{
    border: 0px;
    text-align: center;
    padding-left: 1px;
  }
</style>
