<template>
  <div class="panel panel-info auto">
    <div class="panel-heading">
      <h4 style="display:inline-block;">表具使用情况</h4>
    </div>
      <partial-view v-ref:pv>
        <div class="auto info-content">
            <div class="row">
              <label class = "col-sm-5 control-label">总购气:</label>
              <span class = "col-sm-7">{{this.fillgas[0].collection.toFixed(2)}} m³</span>
            </div>
            <div class="row" v-if="data.f_meter_type.includes('卡表')">
              <label class = "col-sm-5 control-label">换表补气量:</label>
              <span class = "col-sm-7">{{this.fillgas[0].changegas}} m³</span>
            </div>
            <div class="row" v-if="data.f_meter_type.includes('卡表')">
              <label class = "col-sm-5 control-label">掉气补气量:</label>
              <span class = "col-sm-7">{{this.fillgas[0].addoffgas}} m³</span>
            </div>
        </div>
        <!-- <div class="panel-body" style = "text-align:justify"> -->
          <!-- <div class="col-sm-12" style = "margin-top:5px;">
            <div class="">
              <span class = "col-sm-5">总购气:</span>
              <span class = "col-sm-7 text-center">{{this.fillgas[0].collection.toFixed(2)}} m³</span>
            </div>
            <div class="">
              <span class = "col-sm-5">补气量:</span>
              <span class = "col-sm7 text-center">{{this.fillgas[0].fillgas}} m³</span>
            </div>
          </div> -->
<!--
          <div v-show="this.feestype.totalfees > 0" style="width:100%;height:1px;margin:5px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div> -->

      <table class="table table-bordered self-table" id="table" v-show="price.length > 0">
        <thead>
          <tr>
             <th>单价</th>
			       <th>用气量</th>
             <th>金额</th>
          </tr>
        </thead>
        <tbody v-for="item in price">
          <tr>
            <td>{{item.f_price.toFixed(2)}}</td>
            <td>{{item.f_gas.toFixed(2)}}</td>
            <td>{{item.f_money.toFixed(2)}}</td>
          </tr>
        </tbody>
      </table>
      <div class="panel-body"  v-show="!(price.length > 0)">
        <span>表具未使用</span>
      </div>
    </partial-view >
  </div>
</template>

<script>
import co from 'co'

let getdata = function * (self) {
  let cardid = self.data.f_card_id + ''
  let userid = self.data.f_user_id + ''
  if (self.data.f_meter_type.includes('卡表')) {
    yield self.$refs.pv.load('rs/sql/getCollection', {data: {cardid: cardid, userid: userid}}).then((a) => {
      self.fillgas = a.data
    }).catch((error) => {
      if (error.status) {
        self.$warn(`加载数据出错, ${JSON.stringify(error)}`)
        return
      }
      throw error
    })
  } else {
    yield self.$refs.pv.load('rs/sql/getMaCollection', {data: {userid: userid}}).then((a) => {
      self.fillgas = a.data
    }).catch((error) => {
      if (error.status) {
        self.$warn(`加载数据出错, ${JSON.stringify(error)}`)
        return
      }
      throw error
    })
  }
}
let getprice = function * (self) {
  let cardid = self.data.f_card_id + ''
  let userid = self.data.f_user_id + ''
  if (self.data.f_meter_type.includes('卡表')) {
    yield self.$refs.pv.load('rs/sql/getPrice_meter', {data: {cardid: cardid, userid: userid}}).then((a) => {
      self.price = a.data
    }).catch((error) => {
      if (error.status) {
        self.$warn(`加载数据出错, ${JSON.stringify(error)}`)
        return
      }
      throw error
    })
  } else {
    yield self.$refs.pv.load('rs/sql/getMaPrice_meter', {data: {userid: userid}}).then((a) => {
      self.price = a.data
    }).catch((error) => {
      if (error.status) {
        self.$warn(`加载数据出错, ${JSON.stringify(error)}`)
        return
      }
      throw error
    })
  }
}

export default {
  title: '表具使用情况',
  props: ['data'],
  data () {
    return {
      fillgas: {},
      price: []
    }
  },
  ready () {
    console.log('获取表具使用情况', this.data)
    this.getd()
  },
  watch: {
    'data' (val) {
      this.getd()
    }
  },
  methods: {
    getd () {
      let gon = getdata(this)
      let gen = getprice(this)
      co(gon).then((a) => {
        co(gen)
      })
    }
  }
}
</script>
