<template>
  <div>
    <validator name='v'  @valid="$emit('valid')"  @invalid="$emit('invalid')">
      <form class="form-horizontal">
        <div class="row">
          <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_title.required ? 'has-error' : '']">
            <label for="f_title" class="control-label">公告标题</label>
            <input type="text"  v-model="baseinfo.base.f_title" v-validate:f_title='{required: true }' class="form-control" placeholder="公告标题" v-next-el="phone">
          </div>

          <div class="col-sm-3 form-group form-input-group"   :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'has-error' : '']">
            <label for="f_user_phone" class="control-label">用户电话</label>
            <input type="text"  v-model="baseinfo.base.f_user_phone" v-validate:f_user_phone="{minlength: 11, maxlength: 11  }" class="form-control" placeholder="用户电话" v-el:phone v-next-el="area">
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="f_credentials" class="control-label">证件类型</label>
            <v-select :value.sync="baseinfo.base.f_credentials"
                      :options='credentials' placeholder='证件类型'
                      close-on-select></v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group" :class="[$v.f_idnumber2.identityCardValid ? 'has-error' : '']" v-if="baseinfo.base.f_credentials[0] === '身份证'">
            <label for="f_idnumber" class="control-label">证件号码</label>
            <input type="text"  v-model="baseinfo.base.f_idnumber" v-validate:f_idnumber2='{identityCardValid: true}' class="form-control" placeholder="证件号码" v-el:idnumber>
          </div>
          <div class="col-sm-3 form-group form-input-group" v-if="baseinfo.base.f_credentials[0] !== '身份证'"> <!---->
            <label for="f_idnumber" class="control-label">证件号码</label>
            <input type="text"  v-model="baseinfo.base.f_idnumber" class="form-control" placeholder="证件号码" v-el:idnumber>
          </div>

        </div>

        <div class="row">
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_contract" class="control-label">合同编号</label>
            <input type="text"  v-model="baseinfo.base.f_contract_id" class="form-control" placeholder="合同编号">
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_people_num" class="control-label">人口数</label>
            <input type="number"  v-model="baseinfo.base.f_people_num" class="form-control" placeholder="家庭人口数" >
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_rent_phone" class="control-label">备用电话</label>
            <input type="text"  v-model="baseinfo.base.f_rent_phone" class="form-control" placeholder="备用电话">
          </div>

        </div>
        <div class="row">
          <div class="col-sm-3 form-group form-input-group" v-if="edituserstate">
            <label for="f_user_state" class="control-label">用户状态</label>
            <v-select :value.sync="baseinfo.base.f_user_state"
                      :options='userstates' placeholder='用户状态'
                      close-on-select></v-select>
          </div>

        </div>
        <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label for="f_paper_account" class="control-label ">&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;</label>
            <textarea class="form-control" v-model="baseinfo.base.f_comments"></textarea>
          </div>
        </div>
      </form>
    </validator>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {HttpResetClass} from 'vue-client'

  let getEditUserState = async function (self) {
    try {
      let http = new HttpResetClass()
      let result = await http.load('GET', `rs/vue/EidtUserState.json`, {}, {resolveMsg: null, rejectMsg: null})
      console.log(result.data.EditUserState)
      self.edituserstate = result.data.EditUserState
    } catch (e) {
      console.log(e)
    }
  }

  export default {
    title: '公告信息',
    props: ['baseinfo', 'oldAddress'],
    data () {
      return {
        site: '',

        areas: [],
        streets: [],
        residentials: [],
        inputtores: this.$appdata.getParam('抄表员'),
        credentials: this.$appdata.getParam('证件类型'),
        costtypes: this.$appdata.getParam('缴费类型'),
        banknames: this.$appdata.getParam('银行名称'),
        userstates: this.$appdata.getParam('用户状态'),
        edituserstate: false
      }
    },
    ready () {
      getEditUserState(this)
    },
    methods: {

      onValid (res) {
        this.$dispatch('valid')
      },
      onInvalid (res) {
        this.$dispatch('invalid')
      }
    },
    watch: {
      // 重置验证结果，当证件类型切换时，验证结果不能立即刷新，需要重置
      'baseinfo.base.f_credentials[0]' () {
        console.log('验证器重置')
        this.$resetValidation()
      },
      'baseinfo.base.f_cost_type[0]' () {
        console.log('验证器重置')
        this.$resetValidation()
      },
      // 当选择销户，需要给其提醒是否进行销户
      'baseinfo.base.f_user_state' (val) {
        if (val[0] === '销户') {
          this.$showMessage('是否要对该用户进行销户操作？', ['confirm', 'cancel']).then((res) => {
            if (res !== 'confirm') {
              this.baseinfo.base.f_user_state = ['正常']
            }
          })
        }
      }
    },
    computed: {
    }
  }
</script>
