<template>
	<div class="money">

		<div class="content flex align-center justify-center">
			<div class="content-box">
				<div @click="goBack()" class="content-box-back flex align-center">
					<el-icon style="margin-right: 10px;" color="#1E1E1E" size="20">
						<ArrowLeft />
					</el-icon>
					企业中心
				</div>
				<!-- 顶部功能区 -->
				<div class="content-box-cz flex align-center justify-center">
					<div class="content-box-cz-box flex align-center justify-between">
						<div class="content-box-cz-box-item bg1 flex align-center justify-between">
							<div class="content-box-cz-box-item-l" style="text-align: center;color: #1E1E1E;">
								<div class="" style="font-weight: bold;font-size: 20px;">
									{{money}}
								</div>
								<div style="margin-top: 10px;font-size: 14px;">
									当前钻石
								</div>
							</div>
							<img src="/images/money/ye.png" alt="" srcset="" />
						</div>
						<div @click="getwalletList()"
							class="content-box-cz-box-item bg2 flex align-center justify-between">
							<div class="content-box-cz-box-item-l" style="color: #1E1E1E;">
								<div class="" style="font-weight: 500;font-size: 16px;">
									钻石充值
								</div>
								<div style="font-size: 14px;color: #FFB5C5;margin-top: 2px;">
									随充随到账
								</div>
								<div
									style="margin-top: 10px;font-size: 14px;padding: 4px 10px;background: linear-gradient(0deg, #FF7C99 0%, #FF587D 100%);width: fit-content;border-radius: 17px;color: #ffffff;">
									立即充值
								</div>
							</div>
							<img src="/images/money/cz.png" alt="" srcset="" />
						</div>
						<!-- @click="openVipMenber()" -->
						<div class="content-box-cz-box-item bg3 flex align-center justify-between">
							<div class="content-box-cz-box-item-l" style="color: #1E1E1E;">
								<div class="" style="font-weight: 500;font-size: 16px;">
									开通会员
								</div>
								<div style="font-size: 14px;color: #93C0F7;margin-top: 2px;">
									开通会员，尊享专属特权
								</div>
								<div style="font-size: 14px;color: #2b90fb;margin-top: 2px;">
									点击顶部开通会员
								</div>
								<!-- <div
									style="margin-top: 10px;font-size: 14px;padding: 4px 10px;background: linear-gradient(0deg, #7CC0FF 0%, #61B4FF 100%);width: fit-content;border-radius: 17px;color: #ffffff;">
									立即开通
								</div> -->
							</div>
							<img src="/images/money/hyrk.png" alt="" srcset="" />
						</div>
						<!-- @click="openTuiKuan()" -->
						<div class="content-box-cz-box-item bg4 flex align-center justify-between">
							<div class="content-box-cz-box-item-l" style="color: #1E1E1E;">
								<div class="" style="font-weight: 500;font-size: 16px;">
									快速退款
								</div>
								<div style="font-size: 14px;color: #FFC499;margin-top: 2px;">
									联系客服退款
								</div>
								<div style="font-size: 14px;color: #ff9c73;margin-top: 2px;">
									点击右下角客服联系
								</div>
								<!-- <div
									style="margin-top: 10px;font-size: 14px;padding: 4px 10px;background: linear-gradient(0deg, #FFC299 0%, #FFD19B 100%);width: fit-content;border-radius: 17px;color: #ffffff;">
									申请退款
								</div> -->
							</div>
							<img src="/images/money/kftk.png" alt="" srcset="" />
						</div>
					</div>
				</div>
				<!-- 底部充值记录 -->
				<div class="content-box-list">
					<div class="content-box-list-title">
						钻石明细
					</div>
					<div class="content-box-list-table">
						<el-table v-loading="loading" :data="list" style="width: 100%">
							<el-table-column prop="id" label="ID" />
							<el-table-column prop="money" label="金额">
								<template #default="scope">
									<div style="display: flex; align-items: center">
										<span v-if="scope.row.type == 2">-</span>
										<span v-else>+</span>
										<span>{{scope.row.money}}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="title" label="类型" />
							<el-table-column prop="createTime" label="时间" />

						</el-table>
						<div class="content-box-list-table-pages flex align-center justify-end">
							<el-pagination background layout="prev, pager, next" v-model="page"
								:default-page-size="limit" :page-count="pages" @current-change="currentChange" />
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- 充值弹窗 -->
		<el-dialog @close="close()" :destroy-on-close="true" v-model="dialogVisible" title="充值" width="40%"
			:before-close="handleClose">
			<div class="wallet">
				<div class="wallet-title">
					充值钻石
				</div>
				<div class="wallet-input">
					<el-input type="number" v-model="myMoney" placeholder="请输入充值数量">
						<template #append>钻石</template>
					</el-input>
				</div>
				<div class="wallet-title">
					可充值钻石：
				</div>
				<div class="wallet-list flex align-center justify-between flex-wrap">
					<div @click="active(item,index)" :class="tabIndex==index?'active':''"
						class="wallet-list-item flex align-center justify-center" v-for="(item,index) in wallet"
						:key="index">
						<img src="/images/money/jifenss.png" alt="" />
						{{item.price}}
					</div>
					<div class="wallet-list-item flex align-center justify-center" style="height: 0;border: none;">

					</div>
				</div>
				<div class="wallet-pay">
					<div class="wallet-pay-se">
						<el-radio-group @change="changeRadio" v-model="radio" class="ml-4">
							<el-radio :label="1" size="large" class="flex align-center">
								<img style="width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;"
									src="/images/money/weixin.png" alt="" />
								微信支付
							</el-radio>
							<el-radio :label="2" size="large">
								<img style="width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;"
									src="/images/money/zhifubao.png" alt="" />
								支付宝支付</el-radio>
						</el-radio-group>
					</div>
					<div class="wallet-pay-qr flex align-center justify-center" v-if="radio ==1 && codeUrl">
						<div class="wallet-pay-qrs">
							<VueQrcode type="image/png" :color="qrColor" :value="codeUrl" :margin="0"
								errorCorrectionLevel="quartile" :width="size" />
						</div>
					</div>
					<div v-if="radio == 2 && alPay" style="margin-top: 20px;margin-bottom: 10px;width: 100%;"
						class="flex align-center justify-center">
						<iframe :srcdoc="alPay" frameborder="no" border="0" marginwidth="0" marginheight="0"
							scrolling="no" width="160" height="160" style="overflow:hidden;"> </iframe>
					</div>
					<div v-if="codeUrl || alPay" style="width: 100%;text-align: center;color: #999999;">
						{{radio==1?'请使用微信扫码支付':'请使用支付宝扫码支付'}}
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="payMoney()">
						立即充值
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import VueQrcode from 'vue-qrcode'
	export default {
		components: {
			VueQrcode
		},
		data() {
			return {
				radio: 1, //1:微信支付 2:支付宝支付
				size: 160, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				dialogVisible: false,
				money: 0, //我的钻石
				list: [], //明细
				page: 1,
				pages: 1,
				limit: 10,
				loading: false,
				myMoney: 0, //充值钻石
				wallet: [], //充值列表
				tabIndex: -1,
				screenHeight: 0,
				codeUrl: '', //微信二维码支付URL;
				alPay: '',
				orderId: '', //支付订单号
				timer: null, //查询状态定时器
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.getMyMoney()
			this.getmoneyList()
		},
		methods: {
			close() {
				this.radio = 1
				this.cleanTimer()
				this.codeUrl = ''
				this.alPay = ''
			},
			changeRadio() {
				this.codeUrl = ''
				this.alPay = ''
			},
			//退款
			openTuiKuan() {
				ElMessageBox.confirm(
					'请点击右下角客服扫描二维码联系',
					'温馨提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(res => {

				}).catch(() => {

				})
			},
			//开通会员
			openVipMenber() {
				// popoverRef
				// console.log(this.$parent)
				ElMessageBox.confirm(
					'请点击顶部开通会员',
					'温馨提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(res => {

				}).catch(() => {

				})
			},
			//查询支付状态
			getPayStatus() {
				let data = {
					orderId: this.orderId
				}
				this.$Request.get('/app/payDetails/checkOrderStatus', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						// isPay
						if (res.data) {
							ElMessage({
								message: '支付成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.cleanTimer()
							this.dialogVisible = false
							this.getMyMoney()
							this.getmoneyList()

						}
					}
				})
			},
			//清除定时器
			cleanTimer() {
				clearInterval(this.timer)
				this.timer = null
				this.orderId = ''
			},
			//充值
			payMoney() {
				if (Number(this.myMoney) == 0) {
					ElMessage({
						message: '请输入或选择充值金额',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				if (this.radio == 1) { //微信支付
					// 微信支付
					let data = {
						classify: 6,
						money: this.myMoney,
						type: 1,
					}
					this.$Request.post('/app/wxPay/wxPayOrder', data).then(res => {
						if (res.code == 0) {
							if (res.data) {
								this.cleanTimer()
								this.codeUrl = res.data.param.code_url
								this.orderId = res.data.orderId
								this.timer = setInterval(() => {
									this.getPayStatus()
								}, 1000)

							}
						} else {
							this.cleanTimer()
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})
				} else {
					let data = {
						classify: 7,
						money: this.myMoney,
						type: 1,
					}
					this.$Request.post('/app/aliPay/payMoneyOrder', data).then(
						res => {
							if (res.code === 0) {
								if (res.data) {
									this.cleanTimer()
									this.alPay = res.data.form
									this.orderId = res.data.orderId
									this.timer = setInterval(() => {
										this.getPayStatus()
									}, 1000)
								}
							} else {
								this.cleanTimer()
								ElMessage({
									message: res.msg,
									type: 'error',
									duration: 1500,
									offset: this.screenHeight / 2
								})
							}
						});
				}

			},
			//根据列表选择充值金额
			active(e, index) {
				this.tabIndex = index
				this.myMoney = e.price
			},
			//获取充值列表
			getwalletList() {
				this.$Request.get("/app/payClassify/selectPayClassifyList").then(res => {
					if (res.code == 0) {
						this.wallet = res.data
						this.dialogVisible = true
					} else {
						this.dialogVisible = true
					}
				});
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getmoneyList()
			},
			//查询明细
			getmoneyList() {
				let data = {
					page: this.page,
					limit: this.limit,
					classify: 1
				}
				this.$Request.get("/app/userMoney/balanceDetailed", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.pages = res.data.pages
						this.list = res.data.records
					}
				})
			},
			//查询余额
			getMyMoney() {
				this.$Request.get("/app/userMoney/selectMyMoney").then(res => {
					if (res.code == 0) {
						this.money = res.data.money
					}
				})
			},
			//返回上一页
			goBack() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$margin-60: 120px;

	:deep(.el-radio__label) {
		display: flex;
		align-items: center;
	}

	.active {
		border: 1px solid #02B88F !important;
	}

	.wallet {
		width: 100%;

		.wallet-title {
			margin-top: 10px;
			font-weight: 500;
		}

		.wallet-input {
			margin-top: 10px;
		}

		.wallet-list {
			margin-top: 20px;

			.wallet-list-item {
				width: 200px;
				height: 50px;
				border-radius: 10px;
				background-color: #E7FCF5;
				margin-bottom: 20px;
				color: #02B88F;
				cursor: pointer;
				border: 1px solid #E7FCF5;

				img {
					width: 20px;
					height: 20px;
					margin-right: 20px;

				}
			}
		}

		.wallet-pay {
			width: 100%;
			margin-top: 20px;

			.wallet-pay-qr {
				width: 100%;
				margin-top: 20px;
			}

		}
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	.bg1 {
		background-color: #EFFFFA;

		img {
			width: 80px;
			height: 100px;
			margin-right: 20px;
		}
	}

	.bg2 {
		background-color: #FFF2F5;

		img {
			width: 110px;
			height: 80px;
			margin-right: 20px;
		}
	}

	.bg3 {
		background-color: #EFFBFF;

		img {
			width: 80px;
			height: 80px;
			margin-right: 20px;
		}
	}

	.bg4 {
		background-color: #FFF7EE;

		img {
			width: 110px;
			height: 80px;
			margin-right: 20px;
		}
	}

	.content {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.content-box {
			width: calc(100% - $margin-60 * 2);
			height: 100%;
		}

		.content-box-back {
			width: fit-content;
			cursor: pointer;
			color: #1E1E1E;
		}

		.content-box-cz {
			width: 100%;
			height: 150px;
			background-color: #ffffff;
			border-radius: 12px;
			margin-top: 20px;

			.content-box-cz-box {
				width: calc(100% - 40px);
				height: calc(100% - 40px);
			}

			.content-box-cz-box-item {
				width: calc((100% - 60px) / 4);
				height: 100%;
				border-radius: 12px;
				cursor: pointer;
			}

			.content-box-cz-box-item-l {
				width: 50%;
				margin-left: 30px;
			}
		}

		.content-box-list {
			margin-top: 20px;
			background-color: #ffffff;
			border-radius: 12px;
			padding: 20px;

			.content-box-list-title {
				font-size: 16px;
				font-weight: 500;
				border-left: 4px solid #00DD9A;
				padding-left: 10px;
			}

			.content-box-list-table {
				margin-top: 20px;
			}

			.content-box-list-table-pages {
				margin-top: 40px;
			}
		}
	}
</style>