<template>
  <modal show="true" v-ref:modal backdrop="false">
    <div slot="modal-header" class="modal-header">
      <span class="modal-title font">
        自锁阀信息
      </span>
    </div>
    <div slot="modal-body" class="modal-body">
      <div style="width: 95%;margin: auto">
        <validator name='v'>
          <form class="form-horizontal" v-if="type == '锁阀'">
            <p class="bg-info text-center" style="padding: 8px;"></p>
            <div class="row" style="margin-top:10px;">
              <div class="form-group" :class="[$v.f_reason.required ? 'has-error' : 'has-success']">
                <label for="f_reason" class=" col-sm-3 control-label">锁阀原因:</label>
                <div class="col-sm-5 " >
                  <v-select :value.sync="model.f_reason" close-on-select
                            v-model="model.f_reason"
                            :options='reason' placeholder='锁阀原因' :value-single="true" v-ref:f_close_reason></v-select>
                </div>
              </div>
            </div>
            <div class="row" style="margin-top:1px;">
              <div class="col-sm-8  col-sm-offset-3">
                <textarea class="form-control" v-model="model.f_remake" maxlength="120" rows="3" placeholder="备注信息（最大输入120字）"></textarea>
              </div>
            </div>
          </form>
          <form class="form-horizontal" v-if="type == '开阀'">
            <p class="bg-info text-center" style="padding: 8px;"></p>
            <div class="row" style="margin-top:10px;">
              <div class="form-group" :class="[$v.f_reason.required ? 'has-error' : 'has-success']">
                <label for="f_reason" class=" col-sm-3 control-label">开阀原因:</label>
                <div class="col-sm-5 " >
                  <v-select id="f_reason"
                            v-model="model.f_reason"
                            placeholder='开阀原因'
                            :value.sync="model.f_reason"
                            :options='openReason'
                            v-ref:reason
                            :value-single="true"
                            close-on-select ></v-select>
                </div>
              </div>
            </div>
            <div class="row" style="margin-top:1px;">
              <div class="col-sm-8  col-sm-offset-3">
                <textarea class="form-control" v-model="model.f_remake" maxlength="120" rows="3" placeholder="备注信息（最大输入120字）"></textarea>
              </div>
            </div>
          </form>
          <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">

          </div>
        </validator>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button class="btn btn-success" @click="confirm()"  :disabled='!valid'>确认</button>
      <button class="btn btn-default" @click="clean()" >取消</button>
    </div>
  </modal>
</template>
<script>
  /**
   *综合业务
   表具停用组件
   */
  export default {
    title: '自锁阀状态',
    props: ['type','show'],
    data () {
      return {
        model: {
          f_reason:'',
          f_remake:''
        },
        valid:false,
        has_othereason:false,
        reason:[{label:"费用未清",value:"费用未清"},
                {label:"隐患未整改",value:"隐患未整改"},
                {label:"其他",value:"其他"}
        ],
        openReason:[{label:"费用已清",value:"费用已清"},
                    {label:"隐患已整改",value:"隐患已整改"},
                    {label:"其他",value:"其他"}]
      }
    },
    watch:{
      'model.f_reason' (val){
        if (this.model.f_reason!==''){
          this.valid = true
        }
      }
    },
    methods: {
      confirm () {
        console.log('确定123')
        this.$dispatch('finish', this.type,this.model)
      },
      clean () {
        this.$dispatch('closeLatching')
      }
    }
  }
</script>

<style>
</style>
