<template>
  <div class="span">
    <validator name='v'>
      <div class="form-horizontal select-overspread container-fluid" style="overflow-y: auto">
        <div class="row auto">
          <div class="col-sm-12 bg-info text-center" style="padding: 4px;font-size: 18px;font-weight: bold">
            <span>团缴客戶基本信息</span>
          </div>
          <!--基本用户信息-->
          <div class="col-sm-12 form-group" :class="[$v.f_user_name.required ? 'has-error' : 'has-success']">
            <label class="font_normal_body">&ensp;客&nbsp;户&nbsp;名&nbsp;称&nbsp;</label>
            <input type="text" class="input_search" style="width:87%" v-model="areamodel.f_user_name"
                   v-validate:f_user_name='{required: true }'
                   placeholder="客户名称">
          </div>
<!--          <div class="col-sm-4 form-group" :class="[$v.f_customer.required ? 'has-error' : 'has-success']">-->
<!--            <label class="font_normal_body">&ensp;客&nbsp;户&nbsp;编&nbsp;码&nbsp;</label>-->
<!--            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_customer"-->
<!--                   v-validate:f_customer='{required: true }'-->
<!--                   placeholder="客户编码">-->
<!--          </div>-->
          <div class="col-sm-4 form-group" style="">
            <label for="f_user_state" class="font_normal_body">&ensp;客&nbsp;户&nbsp;状&nbsp;态&nbsp;</label>
            <v-select :value.sync="areamodel.f_user_state" :value-single="true"
                      disabled="true"
                      :options='userstates' placeholder='客户状态'
                      close-on-select></v-select>
          </div>
          <div class="col-sm-4 form-group" style="">
            <label for="f_user_type" class="font_normal_body">&ensp;客&nbsp;户&nbsp;类&nbsp;型&nbsp;</label>
            <v-select :value.sync="areamodel.f_user_type" :value-single="true"
                      :options='usertypes' placeholder='客户类型'
                      close-on-select></v-select>
          </div>
          <div style="" class="col-sm-4 form-group">
            <label for="f_user_phone" class="font_normal_body">&nbsp;联系人电话&nbsp;</label>
            <input type="text" maxlength="11" v-model="areamodel.f_user_phone"
                   class="input_search" style="width:60%"
                   placeholder="客戶电话" v-el:phone v-next-el="area">
          </div>
        </div>
        <div class="row auto">
          <div style="" class="col-sm-4 form-group">
            <label for="f_credentials" class="font_normal_body">&ensp;证&nbsp;件&nbsp;类&nbsp;型&nbsp;</label>
            <v-select id="idCardType" :value.sync="areamodel.f_credentials"
                      v-model="areamodel.f_credentials" :value-single="true"
                      :options='credentials' placeholder='证件类型'
                      style="width: 65%"
                      close-on-select></v-select>
          </div>
          <div style="" class="col-sm-8 form-group" v-if="areamodel.f_credentials[0] === '身份证'">
            <label for="f_idnumber" class="font_normal_body">&ensp;*证&nbsp;件&nbsp;号&nbsp;码&nbsp;</label>
            <input type="text" maxlength="18" v-model="areamodel.f_idnumber"
                   class="input_search" style="width:80%"
                   placeholder="证件号码">
          </div>
          <div style="" class="col-sm-8 form-group" v-if="areamodel.f_credentials[0] !== '身份证'">
            <label class="font_normal_body">&ensp;证&nbsp;件&nbsp;号&nbsp;码&nbsp;</label>
            <input type="text" v-model="areamodel.f_idnumber" class="input_search" style="width:80%"
                   placeholder="证件号码">
          </div>
        </div>
        <div class="row auto">
          <div class="col-sm-12 form-group" :class="[$v.f_address.required ? 'has-error' : 'has-success']">
            <label for="f_address" class="font_normal_body">&ensp;地&nbsp;址&nbsp;信&nbsp;息&nbsp;</label>
            <input type="text" v-model="areamodel.f_address" :value.sync="areamodel.f_address"
                   class="input_search" style="width: 87.5%;" v-validate:f_address='{required: true }' placeholder="地址信息">
          </div>
        </div>
        <div class="row auto" style="text-align:right;margin: 10px 37px 0 0;">
          <button class="button_search button_spacing" @click="confirm()" :disabled='!$v.valid'>保存</button>
          <button class="button_clear button_spacing" @click="cancel()">取消</button>
        </div>
      </div>
    </validator>
  </div>
</template>

<script>
export default {
  title: '档案添加',
  data () {
    return {
      // 用户信息
      areamodel: {
        f_customer: '',
        f_user_name: '',
        f_address: '',
        f_address_id: '',
        f_user_state: '正常',
        f_user_type: '',
        f_gasproperties: '',
        f_user_phone: '',
        f_credentials: '身份证',
        f_idnumber: ''
      },
      isSelect: false,
      userstates: this.$appdata.getParam('用户状态'),
      credentials: this.$appdata.getParam('证件类型')
    }
  },
  props: ['f_filialeids', 'row'],
  ready () {
  },
  methods: {
    areamodelInit () {
      this.areamodel = {
        f_customer: '',
        f_user_name: '',
        f_address: '',
        f_address_id: '',
        f_user_state: '正常',
        f_user_type: '',
        f_gasproperties: '',
        f_user_phone: '',
        f_credentials: '',
        f_idnumber: ''
      }
    },
    // 保存
    async confirm () {
      let param = {}
      param.f_operator = this.$login.f.name
      param.f_operatorid = this.$login.f.id
      param.f_orgid = this.$login.f.orgid
      param.f_filialeid = this.$login.f.orgid
      param.f_orgname = this.$login.f.orgs
      param.f_depid = this.$login.f.depids
      param.f_depname = this.$login.f.deps
      param = Object.assign(param, this.areamodel)
      await this.$resetpost('rs/logic/savencarchives', {param: param}, {resolveMsg: '保存成功', rejectMsg: '保存团缴用户失败!!!'})
      this.$dispatch('confirm')
    },
    cancel () {
      this.$dispatch('cancel')
    }
  },
  watch: {
  },
  computed: {
    usertypes () {
      return this.$appdata.getParam('用户类型')
    }
  },
  events: {
  }
}
</script>
<style>
.box {
  width: 727px;
  height: 175px;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #999999;
  margin-top: 13px;
}

.datapanel {
  color: #333;
  background-color: white;
  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
  padding: 10px 30px 10px 30px;
  border-radius: 15px;
}

.infosshow {
  height: 50px;
  text-align: right;
  line-height: 27px;
  padding-right: 18px;
  font-size: 25px;
  width: 50px;
  cursor: pointer;
  color: #000;
  position: absolute;
  top: 0px;
  right: 2px;
}

.infosshow:hover {
  color: #333;
}

.addmeterc {
  position: absolute;
  right: 3px;
  top: -3px;
}
</style>
