<template>
  <div>
    <validator name='v'  @valid="$emit('valid')"  @invalid="$emit('invalid')">
      <form class="form-horizontal select-overspread ">
        <div class="row">
          <div class="col-sm-3"  :class="[$v.f_user_name.required ? 'has-error' : '']">
            <label for="f_user_name" class="font_normal_body">客户名称</label>
            <input type="text"  v-model="baseinfo.base.f_user_name" v-validate:f_user_name='{required: true }' class="input_search" style="width:60%" placeholder="客户名称" v-next-el="phone">
          </div>

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

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

        </div>

        <div class="row">
          <div class="col-sm-3">
            <label for="f_contract" class="font_normal_body">用户证号</label>
            <input type="text"  v-model="baseinfo.base.f_book_no" class="input_search" style="width:60%" placeholder="用户证号">
          </div>
          <div class="col-sm-3">
            <label for="f_contract" class="font_normal_body">合同编号</label>
            <input type="text"  v-model="baseinfo.base.f_contract_id" class="input_search" style="width:60%" placeholder="合同编号">
          </div>
          <div class="col-sm-3" :class="[$v.f_people_num.dctest ? 'has-error' : '']">
            <label for="f_people_num" class="font_normal_body">&nbsp;&nbsp;&nbsp;人口数</label>
            <input type="number"  v-model="baseinfo.base.f_people_num" v-validate:f_people_num='{dctest: [0, ">=" ]}' :disabled="!jurisdiction.includes('修改人口数')" class="input_search" style="width:60%" placeholder="家庭人口数" >
          </div>
          <div class="col-sm-3">
            <label for="f_rent_phone" class="font_normal_body">备用电话</label>
            <input type="text"  v-model="baseinfo.base.f_rent_phone" class="input_search" style="width:60%" placeholder="备用电话">
          </div>
          <div class="col-sm-3" v-if="edituserstate">
            <label for="f_cost_type" class="font_normal_body">缴费类型</label>
            <v-select :value.sync="baseinfo.base.f_cost_type"
                      :options='costtypes' placeholder='缴费类型'
                      close-on-select></v-select>
          </div>

        </div>
        <div class="row">
          <div class="col-sm-3" v-if="edituserstate">
            <label for="f_user_state" class="font_normal_body">客户状态</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">
            <label for="f_paper_account" class="font_normal_body ">&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;</label>
            <input class="input_search" style="width:65%" v-model="baseinfo.base.f_comments"/>
          </div>
        </div>

        <ul class="nav nav-tabs" style="margin-bottom: 10px;" v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
          <li role="presentation" class="active"><a href="#">银行信息</a></li>
        </ul>

        <div v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
          <div class="row" >
            <div class="col-sm-3" :class="[$v.f_bank_accopen.required ? 'has-error' : '']">
              <label for="f_username" class="font_normal_body">银行户名</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_accopen"
                     class="input_search" style="width:60%" id="f_username" placeholder="客户名称" v-validate:f_bank_accopen='{required: true}'
                     v-next-el="bankaccount">
            </div>
            <div class="col-sm-3" id=userfiles-useEssInf-银行名称>
              <label for="f_username" class="font_normal_body ">银行名称</label>
              <v-select :value.sync="baseinfo.bank.f_bank_name"
                        :options='banknames' placeholder='银行名称'
                        close-on-select></v-select>
            </div>
            <div class="col-sm-6" :class="[$v.f_bank_account.required ? 'has-error' : '']">
              <label for="f_userid" class="font_normal_body">银行账号</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_account" class="input_search" style="width:60%"
                     v-validate:f_bank_account='{required: true}'placeholder="银行账号" v-el:bankaccount v-next-el="bankidnumber">
            </div>
          </div>
          <div class="row" >
            <div class="col-sm-6" :class="[$v.f_bank_idnumber.identityCardValid ? 'has-error' : '']">
              <label for="f_bank_idnumber" class="font_normal_body">身份证号</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_idnumber" v-validate:f_bank_idnumber='{identityCardValid: true}' class="input_search" style="width:60%" aria-describedby="helpBlock" placeholder="身份证号" v-el:bankidnumber>
            </div>
            <span id="helpBlock" class="help-block">银行卡所属人身份证号</span>
          </div>
        </div>
      </form>
    </validator>
  </div>
</template>

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

  let getEditUserState = async function (self) {
    try {
      let http = new HttpResetClass()
      let result = await http.load('GET', `rs/vue/EditUserState.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('用户状态'),
        jurisdiction: this.$login.r,
        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>
