<template>
	<view :style="{transform:`translateX(${ isShow? '0px':'calc(100vw - 90rpx)'})`,borderRadius:`${isShow? '0px':' 20rpx 0 0 20rpx'}`,padding:isShow?'':'0px'}" class="suspensionWindow">
		<view v-if="!isShow" @click="showFn(true)" class="icon-conter">
			<uni-icons style="transform: rotate(180deg);" color="#ffffff"  custom-prefix="iconfont" type="iconyuechi" size="20"></uni-icons>
		</view>
		<view v-else class="suspensionWindow_content">
			<view class="suspensionWindow_title">授权操作码</view>
			<view class="suspensionWindow_code">
				<view  @click="copy(operationCode)" class="suspensionWindow_code_text">{{operationCode}}</view> 
				<view  v-if="operationCode" style="font-size: 20rpx;">点击复制</view>
				<view @click="showFn(true)" v-else style="font-size: 30rpx;">重新获取</view>
			</view>
			<view class="suspensionWindow_time">
				<view v-if="countdown">剩余 {{countdown}} 秒</view>
				<view v-if="!countdown">已过期</view>
			</view>
			<uni-icons @click=" showFn(false)" style="position: absolute;right: 10rpx;" color="#ffffff" type="clear" size="30"></uni-icons>
		</view>
	</view>
</template>
<script>
	import account from '@/api/oilAccount'
	export default{
		props:{
			// operationCode:{
			// 	type:String,
			// 	default:''
			// }
		},
		data(){
			return{
				countdown:0,
				operationCode:'',
				timer:null,
				isShow:false,
			}
		},
		onUnload() {
			console.log('逐渐监听')
		},
		methods:{
			//显示控制
			showFn(e){
				clearInterval(this.timer);//清除定时器
				this.timer = null;//赋值为null
				this.operationCode = ''; //清除操作码
				//如果要打开判断 操作码和计时器状态
				if(e){
					this.getCode()
				}else{
					this.isShow = e
				}
			},
			//计时器
			countdownFn(e){
				this.countdown = e //计数器
				this.timer = setInterval(()=>{
					if(!this.countdown){//计数器到0
						clearInterval(this.timer);//清除定时器
						this.timer = null;//赋值为null
						this.operationCode = '' //清除操作码
					}else{
						console.log('11')
						this.countdown-=1
					}
				},1000)
			},
			copy(text) {
				uni.setClipboardData({
					data: `${text}`,
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			//获取操作码
			getCode(e=false){
				account.getRechargeCode({type:3}).then(res=>{
					(res.code==20000)&&(this.operationCode = res.data.code);//操作码赋值
					this.isShow = true//打开浮窗
					this.countdownFn(120)//打开定时器
				})
			},
			isShowFn(){
				
			}
		}
	}
</script>

<style scoped>
	.suspensionWindow_time{
		/* flex: 1; */
		min-width: 140rpx;
		text-align: right;
	}
	.suspensionWindow_code_text{
		color: #FFFFFF;
		font-size: 44rpx;
		font-weight: 700;
	}
	.suspensionWindow_code{
		/* height: 140rpx; */
		position: relative;
		transition: all .3s;
		text-align: center;
		
	}
	.suspensionWindow_title{
		color: #FFFFFF;
		font-size: 28rpx;
		/* flex: 1; */
	}
	.suspensionWindow_content{
		display: flex;
		/* justify-content: space-around; */
		width: 100%;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
	}
	.icon-conter{
		width: 90rpx;
		height:100% ;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.suspensionWindow{
		position: fixed;
		width: 100vw;
		height: 110rpx;
		bottom: env(safe-area-inset-bottom);
		background-color: #FF4A4A;
		display: flex;
		align-items: center;
		/* transform: translateX(calc(100vw - 90rpx)); */
		transition: all .3s;
		border-radius:  20rpx 0 0 20rpx ;
		/* padding: 0 60rpx; */
		/* justify-content: center; */
		padding-right: 90rpx;
		padding-left: 90rpx;
		
	}
</style>