<template>
  <div>
    <validator name='v'  @valid="$emit('valid')"  @invalid="$emit('invalid')">
    <form class="form-horizontal">
      <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.required ? 'has-error' : '']">
          <label for="f_user_phone" class="font_normal_body">单位电话</label>
          <input type="text"  v-model="baseinfo.base.f_user_phone" v-validate:f_user_phone="{required: true }" class="input_search" style="width:60%" placeholder="用户电话" v-el:phone v-next-el="area">
        </div>

        <div class="col-sm-3" :class="[$v.area.required ? 'select-error' : '']">
          <label for="area" class="font_normal_body">区/县</label>
            <input type="text" v-show="false" v-model="$refs.area.selectedItems" v-validate:area='{required: true }'>
            <v-select :value.sync="baseinfo.base.f_area" :options='areas' placeholder='区/县' close-on-select
              v-model='baseinfo.base.f_area' v-ref:area></v-select>
        </div>

        <div class="col-sm-3" :class="[$v.slice.required ? 'select-error' : '']">
          <label for="slice" class="font_normal_body">片区</label>
          <input type="text" v-show="false" v-model="$refs.slice.selectedItems" v-validate:slice='{required: true }'>
          <v-select :value.sync="baseinfo.base.f_slice_area" :options='sliceArea' placeholder='片区/管理站' close-on-select
            v-model='baseinfo.base.f_slice_area' v-ref:slice></v-select>
        </div>

      </div>
      <div class="row">
        <div class="col-sm-3"  :class="[$v.f_street.required ? 'has-error' : '']">
          <label for="f_street" class="font_normal_body">街道名称</label>
          <input type="text"  v-model="baseinfo.base.f_street" v-validate:f_street='{required: true }'
          class="input_search" style="width:60%" placeholder="街道名称" v-el:street v-next-el="areaname">
        </div>

        <div class="col-sm-9" :class="[$v.f_address_detail.required ? 'has-error' : '']">
          <label for="f_address" class="font_normal_body">详细地址</label>
          <div class="flex-row">
            <input type="text" v-model="address" class="input_search" style="width:60%" id="f_address" readonly >
            <input type="text" v-model= "baseinfo.base.f_address_detail" class="input_search" style="width:60%" v-validate:f_address_detail='{required: true }' placeholder="详细地址" v-el:address v-next-el="idnumber">
          </div>
        </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_contract_id" class="input_search" style="width:60%" placeholder="合同编号">
        </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-6" > <!-- 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 class="col-sm-6" :class="[$v.f_idnumber.identityCardValid ? 'has-error' : '']" 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" v-validate:f_idnumber='{identityCardValid: true}' class="input_search" style="width:60%" placeholder="证件号码" v-el:idnumber>
      </div> -->


      </div>
      <div class="row">
        <div class="col-sm-3" id='userfiles-useEssInf-用户类型' >
          <label for="f_username" class="font_normal_body">用户类型</label>
          <v-select :value.sync="baseinfo.base.f_user_type" placeholder='用户类型'
              :options='usertypes' v-model="baseinfo.base.f_user_type"
              close-on-select :disabled="!modify"></v-select>
        </div>
        <div class="col-sm-3" id='userfiles-useEssInf-用气性质' :class="[$v.gas.required ? 'select-error' : '']">
          <label for="f_username" class="font_normal_body">用气性质</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" :class="[$v.type.required ? 'select-error' : '']">
          <label for="pricetype" class="col-sm-2 font_normal_body">气价类型</label>
          <div class="col-sm-2">
            <input type="text" v-show="false" v-model="$refs.type.selectedItems"  v-validate:type='{required: true }'>
            <v-select :value.sync="baseinfo.base.pricetype" v-model="baseinfo.base.pricetype"
                      :options='pricetypes' placeholder='气价类型'
                      close-on-select  v-ref:type>
            </v-select>
          </div>
        </div>
        <div class="col-sm-3" :class="[$v.name.required ? 'select-error' : '']">
          <label for="pricename" class="col-sm-2 font_normal_body">气价名称</label>
          <div class="col-sm-2">
            <input type="text" v-show="false" v-model="$refs.name.selectedItems"  v-validate:name='{required: true }' >
            <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>
          </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">
          <label for="f_username" class="font_normal_body">缴费类型</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">
          <label for="f_username" class="font_normal_body">用户状态</label>
          <v-select :value.sync="baseinfo.base.f_user_state" v-model="baseinfo.base.f_user_state"
                    :options='userstates' placeholder='用户状态'
                    close-on-select disabled="true"></v-select>
        </div>
        <div class="select-overspread col-sm-4">
          <label for="f_adjustable" class="font_normal_body">调压箱</label>
          <div class = "col-sm-3" :class="[$v.adjustable.required ? 'select-error' : '']">
            <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>


      <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>
            <!-- <input type="text"  v-model="baseinfo.bank.f_bank_name" class="input_search" style="width:60%" 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" :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>

export default {
  title: '基本信息',
  props: ['baseinfo', 'modify'],
  data () {
    return {
      imgdefault: '/images/mainicon/biaopan.png'
    }
  },
  methods: {
    getPricenames (pricetype) {
      console.log('气价获取', this.baseinfo.base.f_user_type, this.baseinfo.base.f_gasproperties, pricetype)
      console.log('获取气价的参数。。。。', this.baseinfo.base.f_user_type)
      let rs = []
      console.log('获取气价的参数。。。。', this.baseinfo.base.f_user_type.length)
      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
        }
        console.log('获取气价的参数。。。。', params)
        rs = this.$GetSaleParam.getPrice(params)
      }
      if (rs.length === 0) {
        this.model.f_price_name = ''
      }
      return rs
    },
    onValid (res) {
      this.$dispatch('valid')
    },
    onInvalid (res) {
      this.$dispatch('invalid')
    }
  },
  watch: {
    // 重置验证结果，当证件类型切换时，验证结果不能立即刷新，需要重置

    'baseinfo.base.f_credentials[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: {
    usertypes () {
      return this.$appdata.getParam('用户类型')
    },
    inputtores () {
      return this.$appdata.getParam('抄表员')
    },
    credentials () {
      return this.$appdata.getParam('证件类型')
    },
    costtypes () {
      return this.$appdata.getParam('缴费类型')
    },
    areas () {
      let rs = []
      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
    },
    sliceArea () {
      let rs = []
      if (this.baseinfo.base.f_area.length > 0) {
        for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
          if (this.$login.f.f_allArea[i].label === this.baseinfo.base.f_area[0]) {
            rs = this.$login.f.f_allArea[i].value
          }
        }
      }
      console.log('获取小区片区。。。。', rs)
      return rs
    },
    gasproperties () {
      let rs = []
      if (this.baseinfo.base.f_user_type.length === 1) {
        rs = this.$appdata.getParam(this.baseinfo.base.f_user_type[0])
      }
      return rs
    },
    banknames () {
      return this.$appdata.getParam('银行名称')
    },
    userstates () {
      return this.$appdata.getParam('用户状态')
    },
    pricetypes () {
      return this.$appdata.getParam('气价类型')
    },
    adjustables () {
      let arr = []
      let filter = this.$login.f.orgid
      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]
    },
    address () {
      let strAddress = `${this.baseinfo.base.f_area.length > 0 ? this.baseinfo.base.f_area[0] + '-' : ''}${this.baseinfo.base.f_street ? this.baseinfo.base.f_street + '' : ''}`
      this.baseinfo.base.f_address = strAddress
      return strAddress
    }
  }
}
</script>
