<template>
  <div class="auto">
    <table  class="table table-condensed" style="margin-top:15px; margin-left:5%; width:90%;text-algin:center;">
      <thead>
        <tr>
          <th style="text-align:center"><nobr>操作</nobr></th>
          <th style="text-align:center"><nobr>阶梯数</nobr></th>
          <th style="text-align:center"><nobr>气量</nobr></th>
          <th style="text-align:center"><nobr>单价</nobr></th>
          <th style="text-align:center"><nobr>人口增量</nobr></th>
          <th style="text-align:center" v-if="isheat == '1'"><nobr>采暖增量</nobr></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in stairmodel">
          <td><nobr>
            <button class="glyphicon glyphicon-minus btn-danger" @click.stop="delGas($index)"></button>&nbsp;&nbsp;&nbsp;
            <button class="glyphicon glyphicon-plus btn-success" @click.stop="addGas()"></button>
          </nobr></td>
          <td v-if='!row.f_price_name'>{{$index+1}}</td>
          <td v-if='row.f_price_name'>{{row.f_price_name}}</td>
          <td style="text-align:center">
            <input class="input_search" style="width: 100px" type="number" v-model="row.f_gas" :disabled="isDisable"
            placeholder="气量">
          </td>
          <td style="text-align:center">
            <input class="input_search" style="width: 100px" type="number" v-model="row.f_price" :disabled="isDisable"
            placeholder="单价">
          </td>
          <td style="text-align:center">
            <input class="input_search" style="width: 100px" type="number" v-model="row.f_add_gas" :disabled="isDisable"
             placeholder="人口增量">
          </td>
          <td style="text-align:center" v-if="isheat == '1'">
            <input class="input_search" style="width: 100px" type="number" v-model="row.f_add_gas_heat" :disabled="isDisable"
                   placeholder="采暖增量">
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</template>
<script>
/**
*阶梯气价管理组件
*/
export default {
  data () {
    return {
    }
  },
  props: ['stairmodel', 'isDisable', 'isheat'],
  watch: {
    'stairmodel' (val) {
      // val.push({})
    }
  },
  methods: {
    addGas () {
      this.stairmodel.push({
        f_add_gas: 0,
        f_add_gas_heat: 0
      })
    },
    delGas (index) {
      if (this.stairmodel.length > 1) {
        this.stairmodel.splice(index, 1)
      }
    }
  }
}
</script>
<style>
input { outline:none; }
</style>
