<template>
  <modal :show.sync="show" 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 " :class="[!$refs.reason.selectedItems || $refs.reason.selectedItems === '' ? 'select-error' : '']">
                  <input type="text" v-show="false" v-model="$refs.reason.selectedItems" v-validate="['required']" :field="'reason' + $index">
                  <v-select id="f_reason"
                            v-model="model.f_reason"
                            placeholder='停用原因'
                            :value.sync="model.f_reason"
                            :value-single="true"
                            :options='reason'
                            v-ref:reason
                            close-on-select ></v-select>
                </div>
              </div>
              <div class="form-group" v-show="has_othereason" :class="[$v.f_othereason.required ? 'has-error' : 'has-success']">
                <label for="f_reason" class="col-sm-3 control-label">二级原因:</label>
                <div class="col-sm-5 " :class="[!$refs.f_othereason.selectedItems || $refs.f_othereason.selectedItems === '' ? 'select-error' : '']">
                  <input type="text" v-show="false" v-model="$refs.f_othereason.selectedItems" v-validate="['required']" :field="'reason' + $index">
                  <v-select id="f_othereason"
                            v-model="model.f_othereason"
                            placeholder='选择二级原因'
                            :value.sync="model.f_othereason"
                            :options='othereason'
                            :value-single="true"
                            v-ref:othereason
                            :width="$refs.f_othereason.selectedItems.length"
                            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>
          <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 " :class="[!$refs.reason.selectedItems || $refs.reason.selectedItems === '' ? 'select-error' : '']">
                  <input type="text" v-show="false" v-model="$refs.reason.selectedItems" v-validate="['required']" :field="'reason' + $index">
                  <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: ['show','type'],
  data () {
    return {
      model: {
        f_reason:'',
        f_othereason:'',
        f_remake:''
      },
      valid:false,
      has_othereason:false,
      reason:[{label:"问题表-死表",value:"问题表-死表",color:'red'},
        {label:"问题表-常通",value:"问题表-常通",color:'red'},
        {label:"问题表-气量不符",value:"问题表-气量不符",color:'red'},
        {label:"表具、配件等费用未收",value:"表具、配件等费用未收",color:'red'},
        {label:"民用验收问题",value:"民用验收问题"},
        {label:"漏气（一级隐患）",value:"漏气（一级隐患）"},
        {label:"非漏气（一级隐患）",value:"非漏气（一级隐患）"},
        {label:"非漏气（二级隐患）",value:"非漏气（二级隐患）"},
        {label:"卡号重复",value:"卡号重复"},
        {label:"其他",value:"其他"}
      ],
      openReason:[
        {label:"费用已结清",value:"费用已结清"},
        {label:"已入户验收",value:"已入户验收"},
        {label:"隐患已整改",value:"隐患已整改"},
        {label:"卡号重复已调整",value:"卡号重复已调整"},
        {label:"临时解卡(待用户购气后锁卡)",value:"临时解卡(待用户购气后锁卡)"},
        {label:"临时解卡(待维修操作后锁卡)",value:"临时解卡(待维修操作后锁卡)"}
      ],
      othereason:[],
      f_othereason:[
        {reason:"问题表-死表",value:[
              {"label":"未更换","value":"未更换"},
              {"label":"已更换费用未核算","value":"已更换费用未核算"},
              {"label":"已更换，气费已核算，未收","value":"已更换，气费已核算，未收"}]},
        {reason:"问题表-常通",value:[
            {"label":"未更换","value":"未更换"},
            {"label":"已更换费用未核算","value":"已更换费用未核算"},
            {"label":"已更换，气费已核算，未收","value":"已更换，气费已核算，未收"}]},
        {reason:"问题表-气量不符",value:[
            {"label":"未更换","value":"未更换"},
            {"label":"已更换费用未核算","value":"已更换费用未核算"},
            {"label":"已更换，气费已核算，未收","value":"已更换，气费已核算，未收"}]},
       {reason:"表具、配件等费用未收",value:[]},
       {reason:"民用验收问题",value:[
          {"label":"未入户","value":"未入户"},
          {"label":"开放式厨房","value":"开放式厨房"},
          {"label":"报警器丢失","value":"报警器丢失"},
          {"label":"报警器损毁","value":"报警器损毁"},
          {"label":"报警器未接","value":"报警器未接"},
          {"label":"安全距离不足","value":"安全距离不足"},
          {"label":"双火源（煤气罐等）","value":"双火源（煤气罐等）"},
          {"label":"其他","value":"其他"},
        ]},
       {reason:"漏气（一级隐患）",value:[
          {"label":"三通接口漏气","value":"三通接口漏气"},
          {"label":"灶具机身或接口漏气","value":"灶具机身或接口漏气"},
          {"label":"热水器/壁挂炉机身或接口漏气","value":"热水器/壁挂炉机身或接口漏气"},
          {"label":"其他","value":"其他"},
          {"label":"报警器未接","value":"报警器未接"},
          {"label":"安全距离不足","value":"安全距离不足"},
          {"label":"双火源（煤气罐等）","value":"双火源（煤气罐等）"},
          {"label":"其他","value":"其他"},
        ]},
       {reason:"非漏气（一级隐患）",value:[
            {"label":"燃气管道穿卧室等禁止区域","value":"燃气管道穿卧室等禁止区域"},
            {"label":"更改厨房用途","value":"更改厨房用途"},
            {"label":"热水器/壁挂炉机身或接口漏气","value":"热水器/壁挂炉机身或接口漏气"},
            {"label":"封闭包裹管道，表具","value":"封闭包裹管道，表具"},
            {"label":"私拉乱接、私自改管","value":"私拉乱接、私自改管"},
            {"label":"直排热水器/壁挂炉","value":"直排热水器/壁挂炉"},
            {"label":"热水器/壁挂炉：无烟道/破损/安装不规范","value":"热水器/壁挂炉：无烟道/破损/安装不规范"},
            {"label":"其他","value":"其他"},
          ]},
       {reason:"非漏气（二级隐患）",value:[
          {"label":"厨房内多种火源","value":"厨房内多种火源"},
          {"label":"公租房/廉租房等：灶具无熄火保护/失效","value":"公租房/廉租房等：灶具无熄火保护/失效"},
          {"label":"软三通，软管接热水器/壁挂锅炉","value":"软三通，软管接热水器/壁挂锅炉"},
          {"label":"开放密闭厨房与起居室直接相连","value":"开放密闭厨房与起居室直接相连"},
          {"label":"其他","value":"其他"}
       ]},
       {reason:"卡号重复",value:[]},
       {reason:"其他",value:[]}
      ],
      // reason: this.$appdata.getParam('停用原因')
    }
  },
  watch:{
    'model.f_reason' (val){
      console.log(JSON.stringify(this.model.f_reason))
      this.model.f_othereason = ''
      for (const valElement of this.f_othereason) {
        if(valElement.reason===this.model.f_reason){
          if(valElement.value.length!==0){
            this.othereason = valElement.value
            console.log(this.othereason)
            this.has_othereason = true
          }else if(valElement.value.length===0){
            this.has_othereason = false
            this.othereason = valElement.reason
          }
        }
      }
      if (this.model.f_reason!==''){
        this.valid = true
      }
    }
  },
  methods: {
    confirm () {
      console.log('确定')
      this.$dispatch('success', this.type,this.model)
    },
    clean () {
      this.$dispatch('closeDisable')
    }
  }
}
</script>

<style>
</style>
