<template>
	<view class="oliout">
		<cu-custom style="" class="main-totextbar bg-main-oil" :backCard = 'true' :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">油卡转出</block>
		</cu-custom>
		<view class="olibgclass"></view>
		<view :style="'background-image: url('+imgURL+ ');'" class="new_card">
			<view class="new_card_flexone">
				<text>外请公司油卡</text>
			</view>
			<view class="new_card_flexone">
				<text style="font-size: 44rpx; ">{{handle(cardData.accountCardCode)}}</text>
			</view>
			<view style="" class="new_card_flexone company">
				<text>{{cardData.companyName}}</text>
			</view>
			<view style="position: relative;" class="new_card_flexone">
				<text style="">账户余额： <text style="font-size: 36rpx;font-weight: 600;">{{cardData.balance}}</text>
					元</text>
			</view>
		</view>
		<view class="card_body" style="">
			<view class="company_phone" style="">
				<view class="new_input">
					<text style="margin-right: 10rpx;" class="cuIcon-search"></text>
					<input v-model="seachPhone" style="width: 80%;" placeholder="请输入对方手机号" type="number" />
				</view>
				<text @click="searchFn">搜索</text>
			</view>
			<view>
				<view v-if="tip" class="card_tiop">请认真核对对方手机号码姓名，一旦转出无法追回</view>
				<view v-if="!tip" style="color: red;" class="card_tiop">请输入正确手机号格式</view>
				<view class="name_card" style="">
					<view v-if="giveData!==null" class="company_user"
						:style="'background-image: url('+(giveData.headPhoto?giveData.headPhoto:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png')+ ');'">
					</view>
					<view v-if="giveData!==null" style="margin-left: 20rpx;">
						<view class="newcard_title">{{giveData.userName}} <text
								v-if="giveData.createUser">（{{giveData.createUser}}）</text> </view>
						<view>{{giveData.phone}}</view>
					</view>
					<view style="margin: 0 auto; color:#999999;" v-if="giveData===null">{{seachText}}</view>
				</view>
				<view style="padding: 15rpx  15rpx; 0 15rpx">
					<view class="newcard_title">转出金额</view>
					<view style="display: flex; align-items: center; ">
						<text style="font-size: 80rpx;">
							￥
						</text>
						<input v-model="sendData.occurAmount" class="card_input" style=" margin-left: 10rpx;"
							:placeholder=" '最多可以转出'+ cardData.balance + '元'" type="digit" />
					</view>
				</view>
			</view>
		</view>
		<view style="width: 90vw; margin: 0 auto;">
			<view class="newcard_title zc">
				转出说明
				<view class="tiao"></view>
			</view>
			<view class="text" style="">1、转出油费实时到账，本页非任何法律文件，转出钱请认真核对
				转出人，转出金额，如遇纠纷问题，请联系当事人解决处理。 </view>
		</view>
		<button @click="open" class="oliout_butten" style="">立即转出</button>
		<!-- 弹窗 uini ui -->
		<uni-popup @change='changefn' ref="popup" type="center">
			<view v-if="giveData!==null" class="poput_tip">
				<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view>
				<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机 {{phoneHandle(this.phone)}}</view>
				<xt-verify-code class="code" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
				<button @click="send" class="oliout_butten"
					style="width:60%; border-radius: 50rpx;">{{time===0?'重新发送验证码':time+'S'}}
					</button>
			</view>
		</uni-popup>
		<uni-popup ref="popupt" type="center">
			<view class="poput_tip">
				<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">温馨提示</view>
				<view style="margin: 20rpx auto;width: 90%;text-align: center;">
					<view class="container_img">
						<image class="success_img" src="../../../static/img/success.png"></image>
					</view>
					转出成功!
				</view>
				<button @click="close" class="oliout_butten" style="width:60%; border-radius: 50rpx;">确认</button>
			</view>
		</uni-popup>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
				@confirm="dialogClose">{{errText}}</uni-popup-dialog>
		</uni-popup>
		<!-- 	<uni-popup ref="tip" type="dialog">
			<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
				@confirm="dialogClose">发送成功</uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import accountApi from '@/api/account.js'
	export default {
		data() {
			return {
				imgURL: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/card.png',
				popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png',
				seachText: "",
				verifyCode: '',
				value: '',
				time: 0,
				seachPhone: '',
				userPhone: '',
				balance: 980.50,
				errText:'',
				cardData: '',
				giveData: null,
				tip: true,
				phone:'',
				sendData: {
					giveCustomerId: '', //赠送司机ID （与givePhone二选一必填）
					givePhone: '', //赠送司机手机（与giveCustomerId二选一必填）
					companyId: '', //公司id
					code: '', //短信验证码
					verifyCodeToken: '', //验证码Token
					occurAmount: '' ,//交易金额（不得小于定义最小金额）,
					createSource:'XOIL_DRIVER_WECHAT_APPLET',
					billType:'OIL_DONATION',
					payerCustomerId:''
				}
			}
		},
		onLoad(card) {
			if (card) {
				this.cardData = JSON.parse(card.card)
				console.log(this.cardData,'-------------------')
			}
			this.phone =  uni.getStorageSync('user').userPhone
		},
		methods: {
			/*
			this.$refs.(弹窗绑定的ref).open() 打开
			this.$refs.(弹窗绑定的ref).close() 关闭
			*/
			//校验手机号
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					if (poneInput == '') {
						this.tip = true
					}
					return false;
				} else {
					this.tip = true
					return true;
				}
			},
			//搜索函数
			searchFn() {
				/*
				this.giveData绑定的值
				this.giveData.globalEnabl 0 是已停用
				this.seachText 提示文字
				this.seachPhone 搜索的手机号
				*/
				//校验手机号
				if (this.isPoneAvailable(this.seachPhone)) {
					//搜索前清空
					this.giveData = null
					//手机号没问题请求接口
					accountApi.getByPhone(this.seachPhone).then(res => {
						console.log(res, '---')
						//赠送对象赋值
						if (res.data === null) {
							//如果返回的是null  在下一步发送转账请求的时候 后台会自动创建 一个账号 前台做一个假数据 给赠送对象一些默认值
							this.giveData = {}
							this.giveData.userName = '将为您创建一个新的账号'
							this.giveData.phone = this.seachPhone
							this.giveData.headPhoto =
								'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png'
						} else {
							// 如果有数据 给数据绑定的值 赋值，设置提示 如果停用，清空搜索对象，修改提示文字
							this.giveData = res.data
							if (this.giveData.globalEnable === 0) {
								this.seachText = '用户已停用'
								this.giveData = null
							} 
							else {
								this.seachText = '亲暂无搜索记录哦~~'
							}
						}
					})
				} else {
					//如果手机号校验不通过 清空搜索对象
					this.giveData = null
					this.tip = false
				}
			},
			//卡号数据格式处理函数
			handle(e) {
				return e.replace(/(.{4})/g, '$1 ')
			},
			//手机号处理函数
			phoneHandle(e) {
				return e.substr(0,3)+"****"+e.substr(7);
			},
			//关闭弹窗函数
			dialogClose() {
				this.$refs.dialog.close()
			},
			//监听弹窗状态函数
			changefn(e) {
				console.log(e, '监听')
			},
			//开始记时函数
			timefn() {
				/*
				this.time  时间值
				this.time --
				*/
				if (this.time !== 0) {
					this.time--
					setTimeout(() => {
						this.timefn()
					}, 1000)
				}
			},
			//发送验证码函数
			send() {
				//如果计时器不等于 0 back 否则进入下一步
				if (this.time === 0) {
					this.verifyCode = ''
					this.sendData.verifyCodeToken=''
					let phone = uni.getStorageSync('user').userPhone
					// 调用接口
					accountApi.giveCard({
						phone: phone
					}).then(res => {
						// 接口返回2000 正常 表明验证码已经发送
						// if (res.code === 20000) {
							// 开启设置计时器时间
							console.log(res,'验证')
							this.time = 60
							//获取验证码token
							this.sendData.verifyCodeToken = res.data.verifyCodeToken
							// 开启计时器
							this.timefn()
							//  打开提示
							this.$refs.popup.open('center')
						// }else{
						// 	this.$refs.popup.open('center')
						// }
					})

				} else {
					uni.showToast({
						title: '请等待'+this.time+'秒后再转账',
						icon: "none"
					})
					return
				}
			},
			// 校验 验证码 发送转账请求
			givefn(e) {
				/*
				userData : 登录用户数据;
				giveData : 转出对象参数;
				cardData:卡参数
				拿到需要的值 companyId accountCardCode code 
				拷贝一份 发送的参数 因为不拷贝一份数据，第二次会报错
				 合并数据
				 回显数据
				*/
			   console.log(e,'givefn')
				let userData = uni.getStorageSync('user')
				console.log(this.giveData, '转出对象参数')
				console.log(userData, '用户数据参数')
				console.log(this.cardData, '卡参数')
				// 拷贝
				let sen = JSON.parse(JSON.stringify(this.sendData));
				// 合并数据
				({companyId:sen.companyId,accountCardCode:sen.accountCardCode} = this.cardData);
				({id:sen.payerCustomerId}=userData);
				// 数据key的操作
				if(this.giveData.id===undefined){
					sen.givePhone = this.giveData.phone
					delete sen.giveCustomerId
				}else{
					sen.giveCustomerId = this.giveData.id
					delete sen.givePhone
				}
				console.log('处理好的对象',sen)
				accountApi.oilCustomerAccountRecord(sen).then(res=>{
						if(res.code===20000){
							this.$refs.popup.close()
							this.$refs.popupt.open('center')
							this.time=0
							accountApi.getUserAccount().then(res=>{
								// 回显
								res.data.forEach(itme=>{
									if(this.cardData.id===itme.id){
										this.cardData = Object.assign(this.cardData,itme)
									}
								})
							})
						}
				})
				// this.sendData.code = e
				// this.sendData.companyId = this.cardData.companyId
				// this.giveData
				// 
			},
			//打开弹窗 转number
			open() {
				/*
				this.sendData.occurAmount  交易金额（不得小于定义最小金额）
				this.giveData 转出对象参数
				判断 金额不能为空，金额为数字，金额不为为0，金额不能大于余额，转出人不能为空
				this.errText 报错提示
				*/
				console.log( Number(this.sendData.occurAmount))
				if(this.sendData.occurAmount === ''|| Number(this.sendData.occurAmount)<5){
					this.errText = '转出金额不能为空或不能低于五元'
					this.$refs.dialog.open()
					return
				}
				if(isNaN(Number(this.sendData.occurAmount))){
					this.errText = '请输入正确金额'
					this.$refs.dialog.open()
					return
				}
				if(Number(this.cardData.balance)<Number(this.sendData.occurAmount)){
					this.errText = '转出金额不能大于卡余额'
					this.$refs.dialog.open()
					return
				}
				if(this.giveData == null){
					this.errText = '转出人不能为空'
					this.$refs.dialog.open()
					return
				}
				if(this.seachPhone!==this.giveData.phone){
					this.errText = '检测到搜索手机号有变动，请先确认转出人'
					this.$refs.dialog.open()
					this.searchFn()
					return
				}
				//条件符合转number
				this.sendData.occurAmount = Number(this.sendData.occurAmount)
				// 打开发送验证码弹窗
				this.send()

			},
			//验证码填写完毕的回调
			confirm(e) {
				// this.givefn(e)
				console.log('confirm',e)
				if(this.sendData.verifyCodeToken===''){
					this.verifyCode=''
					return
				}else{
					this.sendData.code = e
					this.givefn(e)
				}
				
			},
			//关闭弹窗
			close() {
				this.$refs.popupt.close()
			}
		}
	}
</script>

<style>
	.poput_tip {
		width: 85vw;
		height: 40vh;
		background-color: #F8F8F8;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.success_img {
		height: 100%;
		width: 100%;
	}

	.container_img {
		height: 100rpx;
		width: 100rpx;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 50rpx;
		margin-bottom: 25rpx;
	}

	.xt__verify-code .xt__input-ground .xt__box-box.data-v-e4b72d00 {
		height: 100rpx !important;
	}

	.xt__verify-code {
		width: 90% !important;
		margin: 0 auto !important;

	}

	.popup_header {
		height: 20%;
		width: 100%;
		background-color: #FE0505;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: 100% 30vh;
	}

	.text {
		color: #666666;
		font-size: 23rpx;
		margin-top: 15rpx;
	}

	.oliout_butten {
		width: 90vw;
		margin: 0 auto;
		background-color: #FE0505;
		margin-top: 60rpx;
		color: #F0F0F0;
	}

	.card_input {
		width: 80%;
		height: 80rpx;
		font-size: 40rpx;
		font-weight: 600;
	}

	.company_user {
		width: 80rpx;
		height: 80rpx;
		background-color: #FF6D6E;
		border-radius: 50rpx;
		background-size: 100% 100%;
	}

	.company_phone {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.company {
		display: flex;
		justify-content: space-between;
	}

	.oliout .bg-main-oil {
		background-color: #FE0505 !important;
	}

	.name_card {
		display: flex;
		height: 250rpx;
		align-items: center;
		padding: 15rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.tiao {
		height: 5px;
		width: 100%;
		background: -webkit-linear-gradient(left, rgb(254, 5, 5, 1), rgb(254, 5, 5, .2), rgb(254, 5, 5, 0));
	}

	.zc {
		width: max-content;
		/* border-image: linear-gradient(to left, rgb(254,5,5,0),rgb(254,5,5,.2),rgb(254,5,5,1)) 1; */

	}

	.newcard_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.card_tiop {
		border-bottom: 1px solid #F0F0F0;
		padding: 20rpx 15rpx;
		color: #999999;
		font-size: 25rpx;
	}

	.card_body {
		width: 90vw;
		margin: 30rpx auto;
		border: 1px solid #F0F0F0;
		border-radius: 20rpx;
		box-shadow: 0 0 5px 3px #F0F0F0;
		padding: 25rpx;
	}

	.new_input {
		width: 80%;
		display: flex;
		align-items: center;
		border: 1px solid #f0f0f0;
		padding: 15rpx;
	}

	.new_card_flexone {
		width: 100%;
		height: max-content;
	}

	.new_card {
		width: 90vw;
		height: 20vh;
		position: relative;
		background-color: #FE0505;
		margin: 0 auto;
		margin-top: 50rpx;
		z-index: 99;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 50rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx;
		color: #FFFFFF;
	}

	.olibgclass {
		position: absolute;
		z-index: 1;
		background-color: #FE0505;
		width: 100vw;
		height: 12vh;
		border-radius: 0 0 35% 35%;
	}
</style>
