<template>
	<u-popup :value="showDialog" mode="center" border-radius="20" @close="$emit('close')">
		<view class="mobile-identity-dialog" :style="{width: showCell ? '1970rpx' : '1280rpx'}">
			<view class="mid-main">
				<u-icon name="close-circle" color="#353c15" class="mi-close" size="60" @click="$emit('close')" />
				<view class="mi-top">
					<image class="mit-avatar" :title="userMessage.realname||('用户'+userMessage.username)" 
					:src="fileUrl+defaultLoginAvatar" @click="toShowCell(0)"></image>
					<view class="mit-left">
						<view class="mitl-item">
							手机账号：<text>{{ userMessage.username }}</text>
						</view>
						<view class="mitl-item">
							注册日期：<text>{{ getEnrollDate }}</text>
						</view>
					</view>
					<view class="mit-right">
						<view class="mitr-btn">
							<view class="mitr-count">
								余额：<u-icon :name="diamondIcon" size="40" label-pos="left" 
								:label="diamond" label-size="32"/>
							</view>
							<u-icon class="mitr-type" name="arrow-right" color="#909090" size="28" label-pos="left"
							label="充 值 类 型" label-size="32" margin-right="10" @click="toShowCell(1)" />
						</view>
					</view>
				</view>
				<view class="mi-bottom">
					<view class="header-top">
						<view class="recharge-introduce">
							<view class="introduce-title">[充值] PIXEL.AI虚拟货币充值</view>
							<view class="introduce-price">单价：<text>￥ {{ rechargeList[0].price }} 元/颗</text></view>
							<view class="introduce-name">类型：<text>{{ rechargeList[0].name }}</text></view>
							<view class="introduce-time">有效性：<text>{{ rechargeList[0].time }}</text></view>
							<!-- <view class="introduce-time">描述：<text>{{ rechargeList[0].description }}</text></view> -->
						</view>
					</view>
					<view class="mib-count-list">
						<view class="count-item" v-for="(item,index) in options" :key="index"
						:class="selectElementIndex === index ? 'count-item-select' : ''" @click="selectOption(index)">
							<view class="ci-left">
								<text class="ci-name">钻石包</text>
								<text class="ci-count">{{ item }} 颗</text>
							</view>
							<view class="ci-right">
								￥<text>{{ item*rechargeList[0].price }}</text>
							</view>
						</view>
					</view>
					<view class="pay-btn">
						<view class="pay-text" :class=" selectElementIndex ? '' : 'pay-disabled'" @click="toShowCell(2)">
							<u-icon name="weixin-fill" color="#b2f08f" size="40" margin-left="10"
							label="微信支付" label-color="#b2f08f" label-size="32"/>
						</view>
					</view>
				</view>
			</view>
			<view class="absolute-link" v-show="showCell">
				<view class="link-block"></view>
			</view>
			<view class="mid-cell" :class="showCell?'':'mid-cell-back'">
				<view v-if="currentType === 0">
					<view class="identity-detail">
						<u-divider bgColor="#ffffff00" fontSize="35" color="#b2f08f" borderColor="#f8f9f9">
							个人资料
						</u-divider>
						<u-avatar @click="preview(fileUrl+defaultLoginAvatar)" :src="fileUrl+defaultLoginAvatar" size="200"/> 
						<view class="detail-item">
							昵称：<text>{{ userMessage.realname || '战士不留姓名~' }}</text>
						</view>
						<view class="detail-item">
							绑定电话：<text>{{ userMessage.username }}</text>
						</view>
						<view class="detail-item">
							生产日期：<text>{{ getEnrollDate }}</text>
						</view>
					</view>
				</view>
				<view v-else-if="currentType === 1">
					<u-section title="充值类型" :right="false" color="#cbe7fb"
					fontSize="34" :arrow="false" subColor="#cbe7fb" />
					<scroll-view :scrollY="true" class="recharge-list">
						<view class="recharge-item" :style="{background:item.cardBackground}" 
						v-for="(item,index) in rechargeList" @click="showCell = false" :key="index">
							<image :src="fileUrl + item.icon"></image>
							<view class="recharge-content">
								<view class="content-title" :style="{color:item.titleColor}">
									{{ item.name }}
								</view>
								<view class="content-abstract">
									<text>{{item.description}}</text>
									<u-icon name="arrow-right" size="12"></u-icon>
								</view>
								<view class="content-introduce">
									<text>有效天数：{{ item.time }}</text>
									<text>价格：<text style="font-weight: bold;">{{item.price}} 元/颗</text></text>
								</view>
							</view>
						</view>
						<u-loadmore :status="isFinish" color="#a7b6b8" marginTop="30" marginBottom="20" />
					</scroll-view>
				</view>
				<view v-else>
					<view class="pay-title">
						请使用微信支付
					</view>
					<view class="pay-code">
						<image v-loading="payLoading" :src="wechatPayCode"></image>
					</view>
					<view class="pay-btns">
						<view class="pb-cancel" @click="showCell = false">
							取消支付
						</view>
						<view class="pb-config" @click="showCell = false">
							完成支付
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
export default {
	props: {
		showDialog: {
			type: Boolean,
			default: false
		},
		userMessage: {
			type: Object,
			default: {}
		},
		diamond: {
			type: Number || String,
			default: 0
		}
	},
	data(){
		return{
			// 基础路径
			fileUrl: configService.fileUrl + 'pixel/my/',
			mobileFileUrl: configService.fileUrl + 'pixel/home/',
			diamondIcon: configService.fileUrl + 'pixel/pc/workshops/diamond.png',
			// 默认登录头像
			defaultLoginAvatar: 'login-avatar.png',
			// 测试用微信支付二维码
			wechatPayCode: configService.fileUrl + 'pixel/pc/home/wechat-pay-test-code.png',
			// 是否展示侧栏
			showCell: false,
			// 是否结束——loadmore加载更多，loading加载中，nomore无更多
			isFinish: 'nomore',
			// 充值类型列表
			rechargeList: [{
				icon: 'diamond.png',
				name: '钻石-diamond',
				description: '通用制图货币，助力高端操作~',
				time: '无限制',
				price: '0.1',
				cardBackground: 'linear-gradient( 80deg, #F9FAF3 0%, #3BE0FF 100%)',
				titleColor: '#004DB2',
			}],
			// 当前侧栏展示类型——0 个人信息、1 充值类型、2 支付
			currentType: 0,
			// 额度选项
			options: [50,100,200,300,500,1000],
			// 元素选择下标
			selectElementIndex: '',
			// 支付二维码加载
			payLoading: false
		}
	},
	computed:{
		// 注册日期
		getEnrollDate(){
			let date = new Date(this.userMessage.createtime);
			return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
		}
	},
	methods: {
		// 侧栏展开/关闭
		toShowCell(type = 0){
			// 当前侧栏打开并且展示类型相同——关闭侧栏
			if(this.showCell && type === this.currentType){
				this.showCell = false;
			// 当前侧栏打开并且展示类型不同——切换侧栏内容
			} else if(this.showCell && type !== this.currentType){
				this.showCell = false;
				setTimeout(()=>{
					// 下面判断模拟后端获取数据生成微信支付二维码
					if(type === 2){
						this.payLoading = true;
						setTimeout(()=>{this.payLoading = false;},1000)
					}
					this.showCell = true;
					this.currentType = type;
				});
			// 当前侧栏关闭——打开侧栏
			} else {
				// 下面判断模拟后端获取数据生成微信支付二维码
				if(type === 2){
					this.payLoading = true;
					setTimeout(()=>{this.payLoading = false;},1000)
				}
				this.showCell = true;
				this.currentType = type;
			}
		},
		// 预览图片
		preview(path){
			tools.methods.lookImage(0,[path]);
		},
		// 选择支付额度
		selectOption(index){
			if(this.selectElementIndex && this.selectElementIndex !== index){
				this.showCell = false;
				setTimeout(()=>{this.toShowCell(2);})
			}
			this.selectElementIndex = this.selectElementIndex === index ? '' : index;
			if(this.currentType === 2 && !this.selectElementIndex) this.showCell = false;
		}
	}
}
</script>

<style scoped lang="scss">
.mobile-identity-dialog{
	width: 1280rpx;
	height: 1060rpx;
	display: flex;
	transition: 0.2s;
	background-color: #ffffff00 !important;
	.mid-main{
		z-index: 1;
		display: flex;
		flex-direction: column;
		position: relative;
		min-width: 1280rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 40rpx #eee;
		overflow: hidden;
		background-color: #fff;
		.mi-close{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			z-index: 1;
			cursor: pointer;
			&:hover{
				opacity: 0.8;
			}
			&:active{
				opacity: 0.6;
			}
		}
		.mi-top{
			height: 310rpx;
			width: 100%;
			background: linear-gradient(to right top, #bbf388 0%, #a6ec96 100%);
			box-shadow: 0 0 20rpx #bfbfbf;
			padding: 130rpx 50rpx 20rpx;
			display: flex;
			.mit-avatar{
				width: 130rpx;
				height: 130rpx;
				border-radius: 100%;
				border: 4rpx solid rgba(230, 230, 230, 0.6);
				box-shadow: 0 0 14rpx #bfbfbf;
				transition: 0.4s;
				margin-right: 40rpx;
				cursor: pointer;
				&:hover{
					box-shadow: 0 0 14rpx #eee;
				}
				&:active{
					opacity: 0.8;
				}
			}
			.mit-left{
				height: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.mitl-item{
					display: flex;
					align-items: center;
					color: #909090;
					font-size: 36rpx;
					text{
						color: #14151e;
					}
				}
			}
			.mit-right{
				flex: 1;
				height: 116rpx;
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				.mitr-btn{
					display: flex;
					flex-direction: column;
					.mitr-type{
						cursor: pointer;
						&:hover{
							margin-bottom: -2rpx;
							::v-deep .u-icon__icon{
								color: #14151e !important;
							}
							::v-deep .u-icon__label{
								color: #14151e !important;
								border-bottom: 2rpx solid #14151e;
							}
						}
						&:active{
							opacity: 0.6;
						}
					}
					.mitr-count{
						font-size: 32rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
		.mi-bottom{
			padding: 20rpx 120rpx;
			.header-top{
				display: flex;
				// justify-content: center;
				.recharge-introduce{
					display: flex;
					flex-direction: column;
					font-size: 32rpx;
					.introduce-title{
						font-weight: bold;
						font-size: 40rpx;
						margin-bottom: 14rpx;
					}
					.introduce-price{
						text{
							font-weight: bold;
						}
						margin-bottom: 14rpx;
					}
					.introduce-name{
						text{
							color:#005fd2;
						}
						margin-bottom: 14rpx;
					}
					.introduce-time{
						margin-bottom: 14rpx;
					}
				}
			}
			.mib-count-list{
				margin-top: 16rpx;
				flex: 1;
				width: 100%;
				display: grid;
				grid-gap: 26rpx;
				grid-template-columns: repeat(3,1fr);
				.count-item{
					background-color: #fafafb;
					border-radius: 20rpx;
					border: 2rpx solid #eef1f1;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					height: 160rpx;
					padding: 30rpx 0;
					cursor: pointer;
					opacity: 0.7;
					.ci-left{
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;
						.ci-name{
							font-size: 36rpx;
							color: #12131e;
							font-weight: 500;
						}
						.ci-count{
							color: #909090;
						}
					}
					.ci-right{
						margin-left: 10rpx;
						color: #ff4848;
						font-size: 30rpx;
						font-weight: bold;
						// margin-bottom: 10rpx;
						text{
							font-size: 60rpx;
						}
					}
					&:hover{
						opacity: 1;
						border-color: #ff9803;
					}
				}
				.count-item-select{
					opacity: 1;
					border-color: #ff9803;
				}
			}
			.pay-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				.pay-text{
					cursor: pointer;
					border-radius: 16rpx;
					width: 300rpx;
					height: 84rpx;
					background-color: #12131e;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 0 10rpx #b0f89e;
					&:hover{
						opacity: 0.8;
					}
					&:active{
						opacity: 0.6;
					}
				}
				.pay-disabled{
					cursor: default;
					opacity: 0.6;
					box-shadow: none;
					&:hover{
						opacity: 0.6;
					}
					&:active{
						opacity: 0.6;
					}
				}
			}
		}
	}
	.absolute-link{
		width: 20rpx;
		display: flex;
		height: 76%;
		align-items: flex-end;
		.link-block{
			width: 100%;
			height: 120rpx;
			background-color: #181929;
		}
	}
	.mid-cell{
		border-radius: 20rpx;
		background-color: #12131e;
		padding: 50rpx 40rpx;
		animation-duration: 0.2s;
		animation-fill-mode: both;
		animation-name: fadeInLeft;
		::v-deep .uni-scroll-view{
			overflow: scroll !important;
		}
		.identity-detail{
			// margin: 10rpx 30rpx;
			height: 960rpx;
			background: linear-gradient(rgba(113, 113, 113, 0.4), rgba(0, 0, 0, 0.1));
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 25rpx 0rpx;
			.u-avatar{
				margin-top: 30rpx;
				border: 2rpx solid #fff;
				cursor: pointer;
				&:hover{
					box-shadow: 0 0 20rpx #eee;
				}
				&:active{
					opacity: 0.8;
				}
			}
			.detail-item{
				margin-top: 50rpx;
				width: 90%;
				font-size: 32rpx;
				background-image: linear-gradient(to right, #c9fe76 0%, #669437 100%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.recharge-list{
			margin: 30rpx 0;
			width: 100%;
			height: calc(100% - 60rpx);
			.recharge-item{
				display: flex;
				align-items: center;
				height: 200rpx;
				border-radius: 16rpx;
				width: 100%;
				color: #000;
				font-size: 24rpx;
				padding: 36rpx;
				margin-bottom: 20rpx;
				cursor: pointer;
				&:hover{
					opacity: 0.9;
				}
				&:active{
					opacity: 0.8;
				}
				image{
					width: 126rpx;
					height: 126rpx;
					margin-right: 32rpx;
				}
				.recharge-content{
					display: flex;
					height: 100%;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;
					.content-title{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 36rpx;
						font-weight: bold;
					}
					.content-abstract{
						display: flex;
						justify-content: space-between;
						align-items: center;
						overflow: hidden;
						text{
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.content-introduce{
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
		.pay-title{
			margin-top: 156rpx;
			text-align: center;
			font-weight: bold;
			font-size: 48rpx;
			background-image: linear-gradient(to right, #c9fe76 0%, #a6ec95 60%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.pay-code{
			margin-top: 60rpx;
			text-align: center;
			image{
				border-radius: 20rpx;
				width: 340rpx;
				height: 340rpx;
			}
		}
		.pay-btns{
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			.pb-cancel,.pb-config{
				border-radius: 10rpx;
				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
				&:active{
					opacity: 0.6;
				}
			}
			.pb-cancel{
				color: #fbfbfb;
				border: 2rpx solid #fbfbfb;
				margin-right: 40rpx;
			}
			.pb-config{
				color: #12131e;
				background-color: #a6ec95;
				border: 2rpx solid #b4ffa1;
			}
		}
	}
	.mid-cell-back{
		animation-name: fadeOutLeft !important;
	}
}
::v-deep .u-mode-center-box{
	background-color: #ffffff00;
	overflow: unset !important;
}
::v-deep .uni-scroll-view{
	overflow: unset !important;
}
@keyframes fadeInLeft {
    from {
		width: 0;
		opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    50% {
		opacity: 0.2;
	}
    to {
		width: 670rpx;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeOutLeft {
    from {
		width: 670rpx;
        opacity: 1;
    }
	50% {
		opacity: 0.2;
	}
    to {
		width: 0;
		display: none;
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
</style>