<template>
  <div class="flex-row">
    <div class="span" style="overflow-y: hidden">
      <validator name='v'>
        <form class="form-horizontal">
          <!-- <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">停用信息</a></li>
          </ul> -->
          <p class="bg-info text-center" style="padding: 8px;">停用信息</p>
          <div class="row">
            <div class="col-sm-4">
              <label for="f_reason" class="font_normal_body">停用原因</label>
              <v-select v-model="model.f_reason"
                        placeholder='停用原因'
                        :value.sync="model.f_reason"
                        :options='reason'
                        v-ref:reason
                        close-on-select ></v-select>
            </div>
          </div>
          <div class="row" style="margin-top:1px;" v-if= "model.f_reason[0] === '其他'">
            <div class="col-sm-8">
              <label for="f_reason" class="font_normal_body">其他原因</label>
              <input class="input_search" style="width:80%" v-model="model.f_othereason"  placeholder="请填写原因"/>
            </div>
          </div>
        </form>
        <div style="text-align:right;">
          <button class="button_search button_spacing" @click="confirm()"  :disabled='!$v.valid'>确认</button>
          <button class="button_clear" @click="clean()" >取消</button>
        </div>
      </validator>
    </div>
  </div>
</template>
<script>
  /**
   *综合业务
   表具停用组件
   */
  export default {
    title: '表具停用',
    props: ['row'],
    data () {
      return {
        model: {},
        reason: this.$appdata.getParam('停用原因')
      }
    },
    methods: {
      async confirm () {
        await this.$LogicService.meterDisable(this.model, this.row)
        this.$dispatch('success')
      },
      clean () {
        this.$dispatch('refresh')
      }
    }
  }
</script>

<style>
</style>
