<template>
	<view class="recharge_subgiftcard">
		<view class="recharge_cardBg">
			<image :src="card" class="card" mode="widthFix"> </image>
		</view>
		<view :class="['recharge_subgift_detail',!current?'topFooterSty':'']">
			<view>
				<view :class="['recharge_subgift_tit','topSty'] ">
					<text>转赠方式</text>
				</view>
				<view class="recharge_type">
					<view class="recharge_type_item" v-for="(item,index) in rechargeTypeArr" :key="index"
						@click="tabChange(index)">
						<text>{{item}}</text>
						<image :src="selIcon" class='selIcon' v-if="current==index"></image>
						<text :class="['selectIcon']" v-else></text>
					</view>
				</view>
			</view>
			<view>
				<view :class="['recharge_subgift_tit','topSty'] ">
					<text>转赠种类</text>
				</view>
				<view class="recharge_type">
					<view class="recharge_type_item">
						<text>邀请码转赠</text>
						<image :src="selIcon" class='selIcon'></image>
					</view>
				</view>
			</view>
			<view class="vip_money_content">
				<view class="vip_money">
					<text class="vip_money_detail">输入邀请码</text>
					<u-input :border="typeLine" v-model="codeVal" @change="change" @blur="changeBlur" :clearable="clearable"
						class="vip_input" placeholder="请输入接收人邀请码" placeholderClass="placeSty">
					</u-input>
					<text class="code_user" v-show="code_user">用户昵称：{{code_user}}</text>
				</view>
			</view>
			<view class="vip_money_content" v-if="current==1">
				<view class="vip_money">
					<text class="vip_money_detail">转赠钻石数量(个)</text>
					<u-input :border="typeLine" v-model="cardNum" :type="digit" :clearable="clearable" class="vip_input"
						placeholder="请输入转赠钻石数量" placeholderClass="placeSty">
					</u-input>
				</view>
			</view>
		</view>
		<view v-if="current==1">
			<view class="cardNumSty">
				<text>卡内钻石数量(个)：{{ 100 }}</text>
				<image :src="selIcon" class='selIcon'></image>
			</view>
			<view class="noticeSty">
				注：一张超级vip消费补贴卡可拆分成100个钻石，拆分后请到我的钻石中查看。
			</view>
		</view>
		<view :class="['footer_btn', 'topFooterSty']" @click="invitationShare">
			确认转赠
		</view>
		<rechareModal @knowClick="knowClick" :showModal="showModal" />
	</view>
</template>

<script>
	import {
		toCkInvitation,
		vipCardShare,
		vipCardSplitShare
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin.js'


	export default {
		mixins: [mixin],
		data() {
			return {
				card: 'https://img.agrimedia.cn/vipCard2.png',
				rightArrow: 'https://img.agrimedia.cn/right-arrow.png',
				selIcon: 'https://img.agrimedia.cn/selIcon.png',
				codeVal: "",
				clearable: false,
				typeLine: 'bottom',
				number: 'number',
				rechargeTypeArr: [
					'整卡转赠',
					'拆分转赠'
				],
				current: 0,
				balance: "",
				code_user: "",
				isWechat: getApp()['globalData']['parameters']['isWechat'],
				isFlag: false,
				cardNum: "",
				digit: 'digit',
				showModal: false,
				card_id: "",

			};
		},

		onLoad(parameters) {
			this.card_id = parameters.id
		},
		methods: {
			//跳转到转赠记录
			toSubgiftList() {
				uni.navigateTo({
					url: '/pages/pages-recharge/subgiftTotal/index'
				});
			},

			tabChange(index) {
				this.current = index
				this.codeVal = ""
				this.code_user = ""
				this.cardNum = ''

			},

			//确认转赠
			invitationShare() {
				console.log(uni.$u.test.digits(this.cardNum), this.cardNum <= 0)
				if (!this.codeVal) {
					uni.showToast({
						title: "请输入邀请码",
						icon: 'none'
					});
					return
				}
			

				uni.$u.debounce(async () => {
				 
					if (!this.current) {
						   await this.shareSubgift()
							} else {
								await this.splitShare()
							}
				}, 1000, true)
			},

			//邀请码验证
			ckCode() {
                if(!this.codeVal){
                    return 
				}
				// let codeValue = this.codeVal.split('(')[0]
				toCkInvitation({
					invite_code: this.codeVal
				}).then((res) => {
					if (res) {
						const {
							code,
							data
						} = res
						if (code == 200 && data.ck == 1) {
							// let codeValue1 = this.codeVal.split('(')[0]
							this.code_user = data.name
							// this.codeVal = `${codeValue1}(${this.code_user})`
						

						} else {
							uni.showToast({
								title: "邀请码不存在",
								icon: 'none'
							});
						}
					}

				}).catch((error) => {

				})
			},
			//整卡转赠
			shareSubgift() {
				uni.showLoading({
					title: '转赠中'
				});
	 
				const params = {
					invite_code: this.codeVal,
					card_id: this.card_id
				}
				vipCardShare({
					...params
				}).then((res) => {
					const {
						code
					} = res
					if (code == 200) {
						this.showModal = true
						uni.hideLoading()
					}
				}).catch((error) => {
					this.codeVal = ""
					this.code_user = ""
					uni.hideLoading();
				})

			},
			//拆分转赠
			splitShare() {
				if (this.current) {
					       var reg = /^[1-9]\d*$/
					if (!reg.test(this.cardNum)) {
						uni.showToast({
							title: "请输入正确的转赠钻石数量",
							icon: 'none'
						});
						return
					}
					if (Number(this.cardNum)>100) {
						uni.showToast({
							title: "转赠钻石数量不得超过卡内钻石数量",
							icon: 'none'
						});
						return
					}
				}
				uni.showLoading({
					title: '转赠中'
				});
	 
				const params = {
					invite_code: this.codeVal,
					card_id: this.card_id,
					num: this.cardNum
				}
				vipCardSplitShare({
					...params
				}).then((res) => {
					const {
						code
					} = res
					if (code == 200) {
						uni.hideLoading();
						this.showModal = true
					}
				}).catch((error) => {
					console.log(error, "错误")
					this.codeVal = ""
					this.cardNum = ""
					this.code_user = ""
					uni.hideLoading();
				})

			},

			change(e) {
				console.log(e)
				// this.codeVal=e
				this.code_user = ""
			// 	uni.$u.debounce(async () => {
            //    this.ckCode()
			//  }, 1000, true)
			},
			changeBlur(){
				if (!this.codeVal) {
					uni.showToast({
						title: "请输入邀请码",
						icon: 'none'
					});
					return
				}
			   this.ckCode()
			},
			knowClick() {
				this.showModal = false
				uni.navigateBack({
							 delta: 1
			       }); 
				// if(!this.current){
				
				// }else{
				// 	uni.navigateTo({
				// 	url: '/pages/pages-recharge/myDiamond/index'
				// });
				// }
					}

		},

	};
</script>

<style lang="scss" scoped>
	page {
		background: #F8F8F8;
	}

	.recharge_subgiftcard {
		background: #F8F8F8;

		.selIcon {
			width: 32rpx;
			height: 32rpx;
		}

		.topSty {
			margin-top: 20rpx;
		}

		.topFooterSty {
			margin-bottom: 290rpx;
		}

		.selectIcon {
			width: 32rpx;
			height: 32rpx;
			border: 2rpx solid #DEDEDE;
			border-radius: 50%;
		}

		.selectActive {
			border: 1px solid #FF7700;
			position: relative;
			width: 36rpx;
			height: 36rpx;

			&:after {
				position: absolute;
				content: "";
				width: 20rpx;
				height: 20rpx;
				background: #FF7700;
				left: 50%;
				top: 50%;
				margin-left: -10rpx;
				margin-top: -10rpx;
				border-radius: 50%
			}

		}

		/deep/ .u-border-bottom {
			border-bottom: 2rpx solid #EDEDED;
		}

		/deep/ .u-input__content__field-wrapper__field {
			height: 60rpx;
			line-height: 60rpx;
		}

		.recharge_cardBg {
			background: #F8F8F8;
			margin: 20rpx 24rpx 0 24rpx;
			height: 168rpx;
			position: relative;

			.card {
				border-radius: 0 20rpx 0 0;
				height: 168rpx !important;
				width: 100%;
			}


		}

		.recharge_subgift_detail {
			padding: 20rpx 26rpx;
			box-shadow: 0 -2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
			background: #fff;


			.recharge_subgift_tit {
				display: flex;
				justify-content: space-between;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.recharge_subgift_icon {
					display: flex;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999
					}

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-top: 4rpx;
						margin-left: 8rpx;
					}
				}

			}

			.recharge_type {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.recharge_type_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 50%;
					height: 116rpx;
					line-height: 116rpx;
					border-radius: 20rpx;
					border: 2rpx solid #EDEDED;
					padding-left: 20rpx;
					padding-right: 20rpx;

					text:nth-child(1) {
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #666666;
					}


				}

				.recharge_type_item:nth-child(2) {
					margin-left: 20rpx;
				}
			}

			.vip_money_content {
				.vip_money {
					position: relative;
					margin-top: 24rpx;

					.vip_money_detail {
						position: absolute;
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						display: inline-block;
						top: 24rpx
					}

					.code_user {
						display: block;
						text-align: right;
						color: red;
						font-size: 28rpx;
					}

					.vip_input {
						/deep/ .uni-input-input {
							font-size: 52rpx;
							font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
							font-weight: 800;
							color: #333333;
							text-align: right;

						}
					}

					/deep/ .placeSty {
						text-align: right;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

				}

				.vip_notice {
					color: red;
					font-size: 28rpx;
					margin-top: 40rpx;
				}
			}

		}

		.cardNumSty {
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 24rpx;
			padding: 24rpx 20rpx;

			text:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333
			}

		}

		.noticeSty {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #DF2D2D;
			padding: 20rpx 26rpx 114rpx 26rpx;
		}

		.footer_btn {
			margin: 0 26rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
			border-radius: 20rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}

	}
</style>
