<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_user_name.required ? 'has-error' : '']">
            <label for="f_user_name" class="control-label">用户姓名</label>
            <input type="text"  v-model="baseinfo.base.f_user_name" v-validate:f_user_name='{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_area" class="control-label">区/县</label>
            <div class="col-sm-2">
              <v-select :value.sync="baseinfo.base.f_area" v-model="baseinfo.base.f_area" :value-single="true"
                        :options='areas' placeholder='请选择'
                        close-on-select search="true" @change="areaChange">
              </v-select>
            </div>
          </div>

          <div class="col-sm-3 form-group form-input-group" >
            <label for="f_slice_area" class="control-label">片区</label>
            <!--<input type="text"  v-model="baseinfo.base.f_slice_area" class="form-control" placeholder="片区/管理站" v-el:slice v-next-el="street" readonly>-->
            <v-select :value.sync="baseinfo.base.f_slice_area" v-model="baseinfo.base.f_slice_area"
                      :options='sliceArea' placeholder='片区/管理站' readonly close-on-select></v-select>
          </div>

        </div>

        <div class="row">

          <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_street.required ? 'select-error' : '']">
            <label for="f_street" class="control-label">街道名称</label>
            <div class="col-sm-2">
              <v-select :value.sync="baseinfo.base.f_street" :value-single="true"
                        :options='streets' placeholder='请选择' v-model="baseinfo.base.f_street"
                        close-on-select search="true" v-ref:street @change="streetChange">
              </v-select>
              <input type="text" v-show="false" v-model="$refs.street.selectedItems" v-validate:f_street='{required: true }'>
            </div>
          </div>

          <div class="col-sm-3 form-group form-input-group" >
            <label for="f_residential_area" class="control-label">小区名称</label>
            <div class="col-sm-2">
              <v-select :value.sync="baseinfo.base.f_residential_area" :value-single="true"
                        :options='residentials' placeholder='请选择'
                        close-on-select search="true" v-ref:residential @change="resAreaChange">
              </v-select>
            </div>
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_address.required ? 'has-error' : '']">
            <label for="f_address" class="control-label">地址</label>
            <input type="text" v-model="baseinfo.base.f_address" class="form-control" v-validate:f_address='{required: true }' id="f_address" readonly placeholder="详细地址" v-el:address >
          </div>

        </div>

        <div class="row">
          <div class="col-sm-3 form-group form-input-group" :class="[$v.f_building.required ? 'has-error' : '']">
            <label for="f_building" class="control-label">楼号</label>
            <input type="text"  v-model="baseinfo.base.f_building"
                   class="form-control" placeholder="楼号" v-el:building v-next-el="unit" @blur="address()" >
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="f_unit" class="control-label">单元号</label>
            <input type="text" v-model="baseinfo.base.f_unit"
                   class="form-control" placeholder="单元号" v-el:unit v-next-el="floor" @blur="address()">
          </div>
          <div class="col-sm-3 form-group form-input-group" >
            <label for="f_floor" class="control-label">楼层</label>
            <input type="text"  v-model="baseinfo.base.f_floor"
                   class="form-control" placeholder="楼层" v-el:floor v-next-el="room" @blur="address()">
          </div>

          <div class="col-sm-3 form-group form-input-group" >
            <label for="f_room" class="control-label">门牌号</label>
            <input type="text" v-model="baseinfo.base.f_room"
                   class="form-control" id="f_room" placeholder="门牌号" v-el:room v-next-el="address" @blur="address()" >
          </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_credentials" class="control-label">证件类型</label>
            <v-select :value.sync="baseinfo.base.f_credentials"
                      :options='credentials' placeholder='证件类型'
                      close-on-select></v-select>
          </div>
          <!-- </div>

          <div class="row"> -->
          <!-- 不是身份证暂时取消验证，保留，防止以后又改 -->
          <div class="col-sm-6 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-6 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" id='userfiles-useEssInf-用户类型'>
            <label for="f_username" class="control-label">用户类型</label>
            <v-select :value.sync="baseinfo.base.f_user_type"
                      :options='usertypes' placeholder='用户类型'
                      @change="userTypeChange()"
                      close-on-select></v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-用气性质' :class="[$v.gas.required ? 'select-error' : '']">
            <label for="f_username" class="control-label">用气性质</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.gas.selectedItems"  v-validate:gas='{required: true }'>
              <v-select :value.sync="baseinfo.base.f_gasproperties" v-model="baseinfo.base.f_gasproperties"
                        :options='gasproperties' placeholder='用气性质'
                        close-on-select v-ref:gas></v-select>
            </div>
          </div>
          <div class="col-sm-3 form-group form-input-group" :class="[$v.type.required ? 'select-error' : '']">
            <label for="pricetype" class="col-sm-2 control-label">气价类型</label>
            <div class="col-sm-2">
              <v-select :value.sync="baseinfo.base.pricetype" v-model="baseinfo.base.pricetype"
                        :options='pricetypes' placeholder='气价类型'
                        close-on-select  v-ref:type>
              </v-select>
              <input type="text" v-show="false" v-model="$refs.type.selectedItems"  v-validate:type='{required: true }'>
            </div>
          </div>
          <div class="col-sm-3 form-group form-input-group" :class="[$v.name.required ? 'select-error' : '']">
            <label for="pricename" class="col-sm-2 control-label">气价名称</label>
            <div class="col-sm-2">
              <v-select :value.sync="baseinfo.base.pricename" v-model="baseinfo.base.pricename"
                        :options='getPricenames(baseinfo.base.pricetype)' placeholder='气价名称'
                        close-on-select :disabled= 'baseinfo.base.pricetype.length === 0 ' v-ref:name></v-select>
              <input type="text" v-show="false" v-model="$refs.name.selectedItems"  v-validate:name='{required: true }' >
            </div>
          </div>
          <span class= "col-sm-12" v-if="baseinfo.base.pricetype.length === 1 && gasproperties.length === 0" style="color:red;text-align:right">请确定用气性质已选择！！</span>
        </div>

        <div class="row">
          <!--<div class="col-sm-3 form-group form-input-group">
            <label for="f_username" class="control-label">缴费类型</label>
            <v-select :value.sync="baseinfo.base.f_cost_type"
                      v-model="baseinfo.base.f_cost_type"
                      :options='costtypes' placeholder='缴费类型'
                      close-on-select></v-select>
          </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 class=" col-sm-3 form-group form-input-group" :class="[$v.adjustable.required ? 'select-error' : '']">-->
          <!--<label for="f_adjustable" class="col-sm-2 control-label">调压箱</label>-->
          <!--<div class="col-sm-4">-->
          <!--<input type="text" v-show="false" v-model="$refs.adjustable.selectedItems" v-validate:adjustable='{required: true }'>-->
          <!--<v-select :value.sync="baseinfo.base.f_adjustable" :options='adjustables' placeholder='调压箱' close-on-select-->
          <!--v-model='baseinfo.base.f_adjustable' :search='true' v-ref:adjustable></v-select>-->
          <!--</div>-->
          <!--</div>-->
          <div class=" col-sm-3 form-group form-input-group">
            <label for="f_adjustable" class="col-sm-2 control-label">调压箱</label>
            <div class="col-sm-4">
              <v-select :value.sync="baseinfo.base.f_adjustable" :options='adjustables' placeholder='调压箱' close-on-select
                        v-model='baseinfo.base.f_adjustable' :search='true'></v-select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label for="f_paper_account" class="control-label ">备注</label>
            <textarea class="form-control" v-model="baseinfo.base.f_comments"></textarea>
          </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 form-group form-input-group" :class="[$v.f_bank_accopen.required ? 'has-error' : '']">
              <label for="f_username" class="control-label">银行户名</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_accopen"
                     class="form-control" id="f_username" placeholder="用户姓名" v-validate:f_bank_accopen='{required: true}'
                     v-next-el="bankaccount">
            </div>
            <div class="col-sm-3 form-group form-input-group" id=userfiles-useEssInf-银行名称>
              <label for="f_username" class="control-label ">银行名称</label>
              <!-- <input type="text"  v-model="baseinfo.bank.f_bank_name" class="form-control" id="f_username" placeholder="银行名称" v-el:costtype v-next-el="bankaccount"> -->
              <v-select :value.sync="baseinfo.bank.f_bank_name"
                        :options='banknames' placeholder='银行名称'
                        close-on-select></v-select>
            </div>
            <div class="col-sm-6 form-group form-input-group" :class="[$v.f_bank_account.required ? 'has-error' : '']">
              <label for="f_userid" class="control-label">银行账号</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_account" class="form-control"
                     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 form-group form-input-group" :class="[$v.f_bank_idnumber.identityCardValid ? 'has-error' : '']">
              <label for="f_bank_idnumber" class="control-label">身份证号</label>
              <input type="text"  v-model="baseinfo.bank.f_bank_idnumber" v-validate:f_bank_idnumber='{identityCardValid: true}' class="form-control" aria-describedby="helpBlock" placeholder="身份证号" v-el:bankidnumber>
            </div>
            <span id="helpBlock" class="help-block">银行卡所属人身份证号</span>
          </div>
        </div>
      </form>
    </validator>
  </div>
</template>

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

  let getStreetGen = async function (self, parentId) {
    console.log('区县变化查询街道')
    let condition = `f_type='街道' AND f_parentId = ${parentId}`
    let HttpReset = new HttpResetClass()
    var res =  await HttpReset.load('POST','rs/sql/singleTable_OrderBy', {data: {items: 'id,f_name',tablename: 't_address',orderitem: 'f_name' ,condition: condition}},{resolveMsg: null, rejectMsg: '获取街道失败!'})
    self.streets = []
    res.data.forEach((item) => {
      self.streets.push({label: item.f_name, value: {id: item.id, name: item.f_name}})
    })
  }

  let getResAreaGen = async function (self, parentId) {
    console.log('街道变化查询街道')
    let condition = `f_type='小区' AND f_parentId = ${parentId}`
    let HttpReset = new HttpResetClass()
    var res =  await HttpReset.load('POST','rs/sql/singleTable_OrderBy', {data: {items: 'id,f_name',tablename: 't_address',orderitem: 'f_name' ,condition: condition}},{resolveMsg: null, rejectMsg: '获取街道失败!'})
    self.residentials = []
    res.data.forEach((item) => {
      self.residentials.push({label: item.f_name, value: {id: item.id, name: item.f_name}})
    })
  }

  export default {
    title: '基本信息',
    props: ['baseinfo', 'modify', 'oldAddress'],
    data(){
      return{
        site: '',

        areas: [],
        streets: [],
        residentials: [],
        usertypes: this.$appdata.getParam('用户类型'),
        inputtores: this.$appdata.getParam('抄表员'),
        credentials: this.$appdata.getParam('证件类型'),
        costtypes: this.$appdata.getParam('缴费类型'),
        banknames: this.$appdata.getParam('银行名称'),
        userstates: this.$appdata.getParam('用户状态'),
        pricetypes: this.$appdata.getParam('气价类型'),
        gasproperties: this.baseinfo.base.f_user_type.length === 1 ? this.$appdata.getParam(this.baseinfo.base.f_user_type[0]) : []
      }
    },
    methods: {

      areaChange (val) {
        console.log('小区变化，', val)
        if (!val) {
          return
        }
        if (val.id !== this.oldAddress.f_area_id) {
          // 重新获取街道
          getStreetGen(this, val.id)
          this.oldAddress.f_area_id = val.id
          this.baseinfo.base.f_street = ''
          this.baseinfo.base.f_residential_area = ''
          this.streets = []
          this.residentials = []
          this.address()
        }
      },
      streetChange (val) {
        if (!val) {
          return
        }
        if (val.id !== this.oldAddress.f_street_id) {
          // 重新获取小区
          getResAreaGen(this, val.id)
          this.oldAddress.f_street_id = val.id
          this.baseinfo.base.f_residential_area = ''
          this.residentials = []
          this.address()
        }
      },
      resAreaChange (val) {
        if (!val) {
          return
        }
        if (val.id !== this.oldAddress.f_residential_area_id) {
          this.address()
        }
      },
      getPricenames (pricetype) {
        console.log('气价。，。。', pricetype, this.baseinfo.base.f_user_type, this.baseinfo.base.f_gasproperties)
        let rs = []
        if (this.baseinfo.base.f_user_type.length === 1 && this.baseinfo.base.f_gasproperties.length === 1 && pricetype.length === 1) {
          let params = {
            f_user_type: this.baseinfo.base.f_user_type[0],
            f_gasproperties: this.baseinfo.base.f_gasproperties[0],
            f_price_type: pricetype[0],
            filter: this.$login.f.f_fengongsi
          }
          rs = this.$GetSaleParam.getPrice(params)
        }
        if (rs.length === 0) {
          this.baseinfo.base.f_price_name = ''
        }
        return rs
      },
      userTypeChange () {
        this.gasproperties = []
        if (this.baseinfo.base.f_user_type.length === 1) {
          this.gasproperties = this.$appdata.getParam(this.baseinfo.base.f_user_type[0])
        }
      },
      onValid (res) {
        this.$dispatch('valid')
      },
      onInvalid (res) {
        this.$dispatch('invalid')
      },
      address(){
        return this.baseinfo.base.f_address =
          (this.baseinfo.base.f_area.name || '')
          +(this.baseinfo.base.f_street ? this.baseinfo.base.f_street.name : '')
          +(this.baseinfo.base.f_residential_area ? this.baseinfo.base.f_residential_area.name : '')
          +(this.baseinfo.base.f_building ?  (isNaN(this.baseinfo.base.f_building) ? this.baseinfo.base.f_building: this.baseinfo.base.f_building + '栋') : '')
          +(this.baseinfo.base.f_unit ? (isNaN(this.baseinfo.base.f_unit) ? this.baseinfo.base.f_unit : this.baseinfo.base.f_unit + '单元') : '')
          +(this.baseinfo.base.f_floor ? (isNaN(this.baseinfo.base.f_floor) ? this.baseinfo.base.f_floor : this.baseinfo.base.f_floor + '层') : '')
          +(this.baseinfo.base.f_room ? (isNaN(this.baseinfo.base.f_room) ? this.baseinfo.base.f_room : this.baseinfo.base.f_room + '室') : '')
      }
    },
    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: {
      adjustables () {
        let arr = []
        let filter = this.$login.f.f_orgids
        this.$GetSaleParam.getAdjustable(filter).forEach((item) => {
          let temp = {}
          temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
          temp.value = item.value
          arr.push(temp)
        })
        return [{label: '全部', value: ''}, ...arr]
      },
      sliceArea () {
        let rs = new Array()
        for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
          let temp = {
            label: this.$login.f.f_allArea[i].label,
            value: this.$login.f.f_allArea[i].label
          }
          rs.push(temp)
        }
        return rs
      }
    }
  }
</script>
