<template>
  <h-view class="public-style partner-mainten" title="客户信息">
    <!--<h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">客户信息</div>
      <div slot="right" class="h-header-btn" @click="scanCard()">
        <i class="icon ion-qr-scanner" style="font-size: 0.4rem"/>
      </div>
    </h-header>-->
    <s-tab class="" @tabClick="changeData">
      <tab-item>基本信息</tab-item>
      <tab-item>银行信息</tab-item>
    </s-tab>
    <h-content>
      <section v-show="tabIndex[0]">
        <list-item>
          <item>
            <section slot="name">客户名称</section>
            <section slot="content">
              \{{ bpMaster.bp_name }}
            </section>
          </item>
          <item>
            <section slot="name">客户类型</section>
            <section slot="content">
              \{{ bpMaster.bp_type_n }}
            </section>
          </item>
          <item>
            <section slot="name">客户分类</section>
            <section slot="content">
              \{{ bpMaster.bp_class_n }}
            </section>
          </item>
        </list-item>
        <list-item>
          <item>
            <img slot="left-icon" src="@/assets/image/bpMaster/user@2x.png" class="left-icon">
            <section slot="name">证件信息</section>
          </item>
          <item :show-arrow="true">
            <section slot="name" class="required">证件类型</section>
            <input
              slot="content" v-model="bpMaster.id_type_n" type="text" placeholder="请选择"
              readonly @click="selectIdType()">
          </item>
          <item>
            <section slot="name" class="required">证件号码</section>
            <input
              slot="content" v-model="bpMaster.id_card_no" type="text" required
              placeholder="请输入证件号码">
          </item>
          <item>
            <section slot="name" class="required">证件地址</section>
            <input
              slot="content" v-model="bpMaster.address_on_resident_booklit" type="text" required
              placeholder="请输入证件地址">
          </item>
        </list-item>

        <list-item>
          <item>
            <img slot="left-icon" src="@/assets/image/bpMaster/details@2x.png" class="left-icon">
            <section slot="name">工作信息</section>
          </item>
          <item>
            <section slot="name" class="">详细地址</section>
            <input slot="content" v-model="bpMaster.living_address" type="text" placeholder="请输入详细地址">
          </item>
          <item>
            <section slot="name" class="">工作单位</section>
            <input
              slot="content" v-model="bpMaster.work_unit" type="text" required
              placeholder="请输入工作单位">
          </item>
          <item :show-arrow="true">
            <section slot="name" class="">职务</section>
            <input
              slot="content" v-model="bpMaster.position_n" type="text" placeholder="请选择"
              readonly @click="selectPosition()">
          </item>
          <item>
            <section slot="name" class="">单位电话</section>
            <input slot="content" v-model="bpMaster.work_unit_phone" type="tel" placeholder="请输入单位电话">
          </item>
        </list-item>
      </section>
      <section v-show="tabIndex[1]">
        <list-item>
          <item>
            <img slot="left-icon" src="@/assets/image/bpMaster/bank-card@2x.png" class="left-icon">
            <section slot="name">银行信息</section>
          </item>
          <item>
            <section slot="name" class="">账号名称</section>
            <input slot="content" v-model="bpAccount.bank_account_name" type="text" placeholder="请输入账号名称">
          </item>
          <item>
            <section slot="name" class="">银行账号</section>
            <input
              slot="content" v-model="bpAccount.bank_account_num" type="text" placeholder="请输入银行账号">
          </item>
          <item>
            <section slot="name" class="">银行名称</section>
            <input slot="content" v-model="bpAccount.bank_full_name" type="text" placeholder="请输入银行名称">
          </item>
          <item>
            <section slot="name" class="">支行名称</section>
            <input slot="content" v-model="bpAccount.bank_branch_name" type="text" placeholder="请输入支行名称">
          </item>
        </list-item>
      </section>
    </h-content>
    <bottom-tab>
      <tab-button @click.native="save">
        保存
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
export default {
  name: 'PartnerMainten',
  data () {
    return {
      index: 0,
      idType: '',
      bcard: false,
      tabIndex: [1, 0],
      idCardCheckFlag: true,
      bpMaster: {
        bp_id: '',
        bp_code: '',
        bp_name: '',
        bp_type: '',
        bp_type_n: '',
        bp_class: '',
        bp_class_n: '',
        bp_category: '',
        bp_category_n: '',
        province_id: null,
        province_id_n: null,
        city_sp: null,
        city_sp_n: null,
        id_card_no: '',
        work_unit: '',
        id_type: '',
        id_type_n: '',
        address_on_resident_booklit: '',
        living_address: '',
        position: '',
        position_n: '',
        work_unit_phone: '',
        work_unit_address: '',
      },
      bpAccount: {
        bp_id: null,
        bank_account_id: null,
        bank_account_name: null,
        bank_account_num: null,
        bank_full_name: null,
        bank_branch_name: null,
      },
      positionList: [],
      idTypeList: [],
    }
  },
  watch: {
    'bpMaster.id_card_no': {
      handler (val, oldval) {
        let vm = this
        vm.idCardCheckFlag = true
        if (vm.bpMaster.id_type === 'ID_CARD') {
          vm.checkIdCard()
        }
      },
    },
  },
  mounted () {
    this.bpAssign()
    this.load()
  },
  methods: {
    bpAssign () {
      let vm = this
      Object.assign(vm.bpMaster, vm.$route.params.bpData)
    },
    changeData (index) {
      let vm = this
      vm.index = index
      vm.tabIndex = [0, 0]
      vm.tabIndex[index] = 1
    },

    /**
       * 检验身份证号
       */
    checkIdCard () {
      let vm = this
      if (vm.bpMaster.id_type === 'ID_CARD') {
        if (vm.timeout) {
          clearTimeout(vm.timeout)
        }
        vm.timeout = setTimeout(() => {
          vm.idCardCheckFlag = true
          let result = vm.hlsUtil.isCardID(vm.bpMaster.id_card_no.toString())
          if (result) {
            vm.hlsPopup.showLongBottom(result)
            vm.idCardCheckFlag = false
          }
        }, 1000)
      }
    },

    /**
       * 加载时调用
       */
    load () {
      let vm = this
      let url = $config.basePath + 'bp_mod_checkbox_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          // 岗位
          vm.positionList = res.position_list
          // 证件类型
          vm.idTypeList = res.id_type_list
        }
      })
      /**
         * 加载商业伙伴
         * 和银行信息
         */
      if (vm.bpMaster.bp_id) {
        let url1 = $config.basePath + 'query_bp_master'
        let param1 = {
          'bp_id': vm.bpMaster.bp_id,
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.hlsHttp.post(url1, param1).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            // 商业伙伴
            vm.bpMaster = Object.assign(vm.bpMaster, res.bpMaster_list[0])
            // 如果有银行信息则赋值
            if (res.account_list.length !== 0) {
              vm.bpAccount = Object.assign(vm.bpAccount, res.account_list[0])
            }
          }
        })
      }
    },

    // 保存函数
    save () {
      let vm = this
      if (!vm.idCardCheckFlag) {
        vm.hlsPopup.showLongBottom('身份证号格式不对!')
      } else {
        if (!vm.bpMaster.address_on_resident_booklit || !vm.bpMaster.id_type || !vm.bpMaster.id_card_no) {
          vm.hlsPopup.showLongBottom('必输字段不能为空!')
        } else {
          let url = $config.basePath + 'bp_master_save'
          vm.bpMaster.user_id = window.localStorage.user_id
          let param = {
            master: vm.bpMaster,
          }
          vm.hlsPopup.showLoading('请稍候')
          vm.hlsHttp.post(url, param).then(function (res) {
            if (res.result === 'S') {
              vm.bpMaster.bp_id = res.resp_master[0].bp_id
              vm.bpAccount.bp_id = res.resp_master[0].bp_id
              // 调用银行信息保存;
              vm.saveBpAccount(vm.bpAccount)
              // hlsPopup.hideLoading();
            }
          })
        }
      }
    },

    /**
       * 保存商业伙伴银行信息
       */
    saveBpAccount (account) {
      let vm = this
      let url = $config.basePath + 'bp_master_account_save'
      account.user_id = window.localStorage.user_id
      let param = {
        account: account,
      }
      hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.bpAccount.bank_account_id = res.resp_account[0].bank_account_id
          vm.hlsPopup.showLongBottom('保存成功')
        }
      })
    },

    selectIdType () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.idTypeList,
        code: 'id_type',
        object: vm.bpMaster,
        returnItem: function (index, obj) {
          vm.bpMaster = obj
          vm.idType = vm.idTypeList[index].code
        },
      })
    },

    selectPosition () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.positionList,
        code: 'position',
        object: vm.bpMaster,
        returnItem: function (index, obj) {
          vm.bpMaster = obj
        },
      })
    },
  },
}
</script>

<style lang="less">
  .partner-mainten {
    .hls-switch-tab-top {
      position: relative;
    }
    .content{
      padding-bottom: 100px;
    }
    .bottom-tab-button {
      background-color: @headerColor;
      color: #fff;
    }
  }

</style>
