<template>
  <partial-view v-ref:pv>
    <div  id="stair" class="panel panel-info auto;" style="height:auto;">
      <div class="panel-heading" style="text-align: center">
        <h4>阶梯使用情况</h4>
      </div>
      <!--<div class="progress" id="srair">-->
        <!--<div class="progress-bar" :class="cls[n]"  :style="{width: widths[n]}" v-for="n in jt">{{content[n]}}</div>-->
      <!--</div>-->
      <table class="table table-bordered self-table " id="table1" >
        <thead>
        <th>气阶</th><th>上限</th><th>已用</th><th>未用</th><th>单价</th>
        </thead>
        <tbody>
        <tr>
          <td>一阶</td><td>{{mydata.f_stair1ceiling}}</td><td>{{mydata.f_hasuse1 > 0 ? mydata.f_hasuse1 : 0}}</td><td>{{(mydata.f_stair1ceiling - mydata.f_hasuse1).toFixed(4)}}</td><td>{{mydata.f_stair1price}}</td>
        </tr>
        <tr v-if="jt === 2">
          <td>二阶</td><td>无上限</td><td>{{mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0}}</td><td>无上限</td><td>{{mydata.f_stair2price}}</td>
        </tr>
        <tr v-if="jt > 2">
          <td>二阶</td><td>{{mydata.f_stair2ceiling}}</td><td>{{mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0}}</td><td>{{(mydata.f_stair2ceiling - mydata.f_stair1ceiling - (mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0)).toFixed(4)}}</td><td>{{mydata.f_stair2price}}</td>
        </tr>
        <tr v-if="jt === 3">
          <td>三阶</td><td>无上限</td><td>{{mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0}}</td><td>无上限</td><td>{{mydata.f_stair3price}}</td>
        </tr>
        <tr v-if=" jt > 3">
          <td>三阶</td><td>{{mydata.f_stair3ceiling}}</td><td>{{mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0}}</td><td>{{(mydata.f_stair3ceiling - mydata.f_stair2ceiling - (mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0)).toFixed(4)}}</td><td>{{mydata.f_stair3price}}</td>
        </tr>
        <tr v-if="jt === 4">
          <td>四阶</td><td>无上限</td><td>{{mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0}}</td><td>无上限</td><td>{{mydata.f_stair4price}}</td>
        </tr>
        <tr v-if="jt > 4">
          <td>四阶</td><td>{{mydata.f_stair4ceiling}}</td><td>{{mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0}}</td><td>{{mydata.f_stair4ceiling - mydata.f_stair3ceiling - (mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0)}}</td><td>{{mydata.f_stair4price}}</td>
        </tr>
        </tbody>
      </table>

    </div>
  </partial-view>
</template>

<script>
  /**
   *阶梯气价相关信息组件
   */
  import co from 'co'

  let getdata = function * (self) {
    self.data.f_userinfo_id = self.data.f_userinfo_id + ''
    yield self.$refs.pv.load('rs/logic/commonCal', {data: {model: self.data, isGasValue: 1, value: 0}}, {resolveMsg: null, rejectMsg: '获取价格信息出错'}).then((a) => {
      self.jt = a.data.chargeprice.length
      self.mydata = a.data
      self.calhasuse(self.mydata)
      if (self.jt === 1) {
        self.cls = ['progress-bar-success']
        self.widths = ['100%']
        self.content = [self.mydata.f_stair1price + '元/m³']
      } else if (self.jt === 2) {
        self.cls = ['progress-bar-success', 'progress-bar-danger']
        self.widths = ['50%', '50%']
        self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³']
      } else if (self.jt === 3) {
        self.cls = ['progress-bar-success', 'progress-bar-warning', 'progress-bar-danger']
        self.widths = ['33%', '34%', '33%']
        self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³', self.mydata.f_stair3price + '元/m³']
      } else if (self.jt === 4) {
        self.cls = ['progress-bar-success', ' progress-bar-info', 'progress-bar-warning', 'progress-bar-danger']
        self.widths = ['25%', '25%', '25%', '25%']
        self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³', self.mydata.f_stair3price + '元/m³', self.mydata.f_stair4price + '元/m³']
      }
    })
  }

  export default {
    props: ['data'],
    data () {
      return {
        myChart: {},
        jt: 0,
        width: 0,
        widths: [],
        cls: [],
        length: 0,
        mydata: '',
        values: 0
      }
    },
    methods: {
      getd () {
        this.mydata = ''
        let gen = getdata(this)
        co(gen)
      },
      calhasuse (value) {
        value.f_hasuse1 = (value.sumamount >= value.f_stair1ceiling ? value.f_stair1ceiling : value.sumamount).toFixed(4)
        value.f_hasuse2 = (value.sumamount >= value.f_stair2ceiling ? value.f_stair2ceiling - value.f_stair1ceiling : value.sumamount - value.f_stair1ceiling).toFixed(4)
        value.f_hasuse3 = (value.sumamount >= value.f_stair3ceiling ? value.f_stair3ceiling - value.f_stair2ceiling : value.sumamount - value.f_stair2ceiling).toFixed(4)
        value.f_hasuse4 = (value.sumamount >= value.f_stair4ceiling ? value.f_stair4ceiling - value.f_stair3ceiling : value.sumamount - value.f_stair3ceiling).toFixed(4)
      }
    },
    watch: {

      'data' (val) {
        this.getd()
      }
    },
    ready () {
      this.getd()
    }
  }
</script>
<style media="screen">
  #srair{
    height: 30px;
    margin-top:10px;
    margin-bottom: 10px;
  }
  #srair .progress-bar {
    line-height: 25px !important;
  }
  #table1{
    text-align:center;
  }
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
