<template>
  <div  class="auto">
    <!-- <p class="bg-info text-center" style="padding: 8px;">修改发票状态</p> -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">修改发票状态</a></li>
    </ul>
    <div class="row" style="margin-top:10px; margin-left:10px;">
      <label for="f_bill_id"  class="col-sm-3 control-label">发票编号</label>
      <div class="col-sm-2">
        <input class="form-control"  type="text" v-model="BillInfo.f_bill_id"  disabled>
      </div>
      <label for="f_userinfo_id" class="col-sm-2 control-label">客户编号</label>
      <div class="col-sm-2">
        <input class="form-control"  type="text" v-model="BillInfo.f_userinfo_id"  disabled>
      </div>
    </div>
    <div class="row" style="margin-top:10px; margin-left:10px;" >
      <label for="f_user_name"  class="col-sm-3 control-label">用户姓名</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_user_name"  disabled>
      </div>
      <label for="f_user_id"  class="col-sm-2 control-label ">表编号</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_user_id" disabled >
      </div>
    </div>
    <div class="row" style="margin-top:10px; margin-left:10px;">
      <label for="f_bill_type" class="col-sm-3 control-label">业务类型</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_bill_type"  disabled>
      </div>
      <label for="f_card_id" class="col-sm-2 control-label">卡号</label>
      <div class="col-sm-2" >
        <input class="form-control"  type="text" v-model="BillInfo.f_card_id"  disabled>
      </div>
    </div>
    <div class="row" style="margin-top:10px;margin-left:10px;">
      <label for="f_total_money"  class="col-sm-3 control-label">合计金额</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_total_money" disabled >
      </div>
      <label for="f_paid_money" class="col-sm-2 control-label">实收金额</label>
      <div class="col-sm-2">
        <input class="form-control"  type="number" v-model="BillInfo.f_paid_money" disabled >
      </div>
    </div>
    <div class="row" style="margin-top:10px;margin-left:10px;">
      <label for="f_bill_id"  class="col-sm-3 control-label">状态</label>
      <div class="col-sm-2" >
        <v-select :value.sync="BillInfo.f_bill_state"
                  v-model="BillInfo.f_bill_state"
                  :options='billState' placeholder='发票状态'
                  v-model="BillInfo.f_bill_state"
                  close-on-select>
        </v-select>
      </div>
    </div>
    <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
      <button class="btn btn-success width-60" @click="confirm()" :disabled="dis" style="width:80px;margin-left:20px;" >保存</button>
      <button class="btn btn-default width-60" @click="cancel()" style="width:80px;margin-left:20px;">取消</button>
    </div>
  </div>
</template>
<script>
  /**
   *阶梯水价管理组件
   */
  export default {
    data () {
      return {
        model: {},
        BillInfo: {
          id: '',
          f_bill_id: '',
          f_userinfo_id: '',
          f_user_id: '',
          f_user_name: '',
          f_card_id: '',
          f_bill_type: '',
          f_total_money: '',
          f_paid_money: '',
          f_bill_state: ''
        },
        billState: [{label: '已用', value: '已用'},
          {label: '未用', value: '未用'},
          {label: '作废', value: '作废'}
        ],
        dis: true
      }
    },
    props: ['data'],
    watch: {
      'data' (val) {
        this.BillInfo = Object.assign({}, this.BillInfo, val)
        if (!Array.isArray(this.BillInfo.f_bill_state)) {
          this.BillInfo.f_bill_state = [this.BillInfo.f_bill_state]
        } else {
          this.BillInfo.f_bill_state = this.BillInfo.f_bill_state
        }
        if (val.f_bill_state === '作废') {
          this.dis = true
        } else {
          this.dis = false
        }
      }
    },
    ready () {
      this.BillInfo = Object.assign({}, this.BillInfo, this.data)
      if (!Array.isArray(this.BillInfo.f_bill_state)) {
        this.BillInfo.f_bill_state = [this.BillInfo.f_bill_state]
      } else {
        this.BillInfo.f_bill_state = this.BillInfo.f_bill_state
      }
      if (this.data.f_bill_state === '作废') {
        this.dis = true
      } else {
        this.dis = false
      }
    },
    methods: {
      confirm () {
        this.model = Object.assign({}, this.BillInfo)
        this.model.f_bill_state = this.model.f_bill_state[0]
        this.$BillService.changeBillState(this.model)
          .then(
            (res) => {
              this.$dispatch('success', '修改发票状态', this.data, res)
            }
          ).catch(
          (error) => {
            this.$dispatch('error', '修改发票状态', this.data, error)
          }
        )
        this.data = {}
      },
      cancel () {
        this.$dispatch('clean', this.data)
      }
    }
  }
</script>
