<template>
    <view>
        <nav-shadow></nav-shadow>
         <loading-view v-if="isFirstLoading"></loading-view>
        <view class="text-center text-txBase text-xl pt-80rpx font-extrabold">请填写银行卡信息</view>
        <view class="px-60rpx ">
          <view class="flex items-center text-txBase text-lg mt-60rpx">
              <view class="w-120rpx">持卡人</view>
               <input :disabled="is_edited" v-model="real_name"  placeholder-class="text-txGray" class="inputHeight rounded-lg"  type="text" placeholder="持卡人">
          </view>
          <view v-if="!is_edited" class="text-right text-sm text-hex-D43030">*持卡人名称仅修改一次</view>
          <view class="flex items-center text-txBase text-lg mt-60rpx">
              <view class="w-120rpx">银行卡</view>
               <input v-model="bank_number"  placeholder-class="text-txGray" class="inputHeight rounded-lg" maxlength="25"  type="number" placeholder="请填写银行卡号">
          </view>
          <view @tap="bankShow=true" class="flex items-center  text-lg mt-60rpx">
              <view class="w-120rpx">银行</view>
              <view v-if="bank_name" class="inputHeight rounded-lg text-txBase leading-80rpx ">{{bank_name}}</view>
              <view v-else class="inputHeight rounded-lg leading-80rpx text-txGray">请选择所属银行</view>
          </view>
          <view class="flex items-center text-txBase text-lg mt-60rpx">
              <view class="w-120rpx">开户行</view>
               <input v-model="bank_description"  placeholder-class="text-txGray" class="inputHeight rounded-lg"  type="text" placeholder="请填写开户行">
          </view>
          <view class="text-center text-txGray text-md mt-60rpx">提示：请认真填写，避免发生错误！</view>
          <view class="mt-50rpx">
            <view class="login-btn" @tap="onSubmit"> 保存 </view>
          </view>
        </view>
       <u-select @confirm="BankConfirm" label-name="name" v-model="bankShow" confirm-color="#378264"  :list="banks"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
              isFirstLoading:true,
              bankShow:false,
              bankList:[],
              real_name:'',//真实姓名,
              bank_number:'',//卡号,
              bank_name:'',//银行名称
              bank_description:'',//开户行
              is_edited:false
            };
        },
        computed:{
          banks(){
            const arr=[]
            this.bankList.forEach((item,index)=>{
              let obj={}
              obj.name=item
              arr.push(obj)
            })
            return arr
          }
        },
        onLoad() {
          this.getDate()
          this.getBank()
        },
        methods:{
          //查询银行卡信息
          async getDate(){
            let resDate=await this.$api.get('/v1/user-bank',{})
            if(resDate.real_name){
              this.real_name=resDate.real_name,
              this.bank_number=resDate.bank_number,
              this.bank_name=resDate.bank_name,
              this.bank_description=resDate.bank_description,
              this.is_edited=resDate.is_edited
            }
             this.isFirstLoading = false
          },
          //获取银行信息
          async getBank(){
            let resDate=await this.$api.get('/v1/banks-options',{})
            this.bankList=resDate.banks
          },
          //选择的银行
          BankConfirm(e){
            this.bank_name=e[0].label
          },
          async onSubmit(){
            let obj={
              real_name:this.real_name,
              bank_number:this.bank_number,
              bank_name:this.bank_name,
              bank_description:this.bank_description
            }
            if(!obj.real_name)return this.$u.toast("请填写持卡人姓名")
            if(!this.$u.test.rangeLength(obj.bank_number, [16, 25]))return this.$u.toast("银行卡格式不正确")
            if(!obj.bank_name)return this.$u.toast("请选择所属银行")
            if(!obj.bank_description)return this.$u.toast("请填写开户行")
            try{
                let resDate=await this.$api.put('/v1/user-bank',obj,{custom: {loading: true}})
                this.$u.toast("提交成功")
                setTimeout(()=>{
                  uni.navigateBack()
                   this.eliminate()
                },300)
            }catch(err){}
          },
          //清除数据
          eliminate(){
            this.real_name='',
            this.bank_number='',
            this.bank_name='',
            this.bank_description=''
          }
        }
    }
</script>
<style>
  page{
      height: 100vh;
      background: #FFFFFF;
  }
</style>
<style lang="scss" scoped>

.inputHeight{
     @apply h-80rpx flex-1  border border-txBorder px-base ml-40rpx text-lg ;
}
</style>
