<template>
	<div class="getMoney">
		<div @click="goBack()" class="back flex align-center">
			<el-icon>
				<ArrowLeft />
			</el-icon>
			返回
		</div>
		<div class="content flex justify-between">
			<!-- 左边提现区 -->
			<div class="left flex justify-center">
				<div class="left-box">
					<div class="left-box-money">
						<div class="left-box-money-title">
							可提现金额
						</div>
						<div class="left-box-money-inp"
							style="margin-left: 20px;font-size: 22px;margin-top: 10px;font-weight: 500;">
							{{money}}元
						</div>
					</div>
					<div class="left-box-money" style="margin-top: 20px;">
						<div class="left-box-money-title">
							提现金额
						</div>
						<div class="left-box-money-inp">
							<el-input v-model="moneyNum" placeholder="请输入提现金额" />
						</div>
					</div>
					<div v-if="placeholder" class="left-box-tips">
						{{placeholder}}
					</div>
					<!-- 提现方式 -->
					<div class="left-box-type flex align-center">
						<div @click="bindToindex(1)" :class="current==1?'active':''"
							class="left-box-type-item flex align-center justify-center ">
							<img src="../../../public/images/money/zhifubao.png" alt="" />
							支付宝
							<el-icon v-if="current==1" class="left-box-type-item-icon" color="#00DD9A" size="20">
								<SuccessFilled />
							</el-icon>
						</div>
						<div @click="bindToindex(2)" :class="current==2?'active':''"
							class="left-box-type-item flex align-center justify-center">
							<img src="../../../public/images/money/weixin.png" alt="" />
							微信
							<el-icon v-if="current==2" class="left-box-type-item-icon" color="#00DD9A" size="20">
								<SuccessFilled />
							</el-icon>
						</div>
					</div>
					<!-- 立即提现 -->
					<div @click="cashMoney()" class="left-box-btn flex align-center justify-center">
						立即提现
					</div>
					<!-- 提现账号/微信收款码 -->
					<div class="left-box-zh flex align-center justify-between">
						<div @click="showZfb = true" class="left-box-zh-i flex align-center justify-between">
							<div class="left-box-zh-i-l flex align-center">
								<img src="../../../public/images/setting/txzh.png" alt="" srcset="" />
								提现账号
							</div>
							<el-icon class="left-box-zh-i-r" color="#00DD9A" size="20">
								<ArrowRight />
							</el-icon>
						</div>
						<div @click="showwx = true" class="left-box-zh-i flex align-center justify-between">
							<div class="left-box-zh-i-l flex align-center">
								<img src="../../../public/images/setting/wxsk.png" alt="" srcset="" />
								微信收款码
							</div>
							<el-icon class="left-box-zh-i-r" color="#00DD9A" size="20">
								<ArrowRight />
							</el-icon>
						</div>

					</div>
				</div>
			</div>
			<!-- 右边记录列表 -->
			<div class="right">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="钱包明细" name="first">
						<el-table v-loading="loading" :data="list" style="width: 100%">
							<el-table-column prop="userId" label="编号" />
							<el-table-column prop="createTime" label="时间" />
							<el-table-column prop="title" label="操作" />
							<el-table-column prop="money" label="金额">
								<template #default="scope">
									<div style="display: flex; align-items: center">
										<span v-if="scope.row.type==1">+</span>
										<span v-else>-</span>
										{{scope.row.money}}
									</div>
								</template>
							</el-table-column>

						</el-table>
						<!-- 分页 -->
						<div v-if="pages>0" style="width: 100%;margin-top: 20px;" class="flex align-center justify-end">
							<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
								:default-page-size="limit" background layout="prev, pager, next" />
						</div>
					</el-tab-pane>
					<el-tab-pane label="提现记录" name="second">
						<el-table v-loading="loading" :data="list" style="width: 100%">
							<el-table-column prop="userId" label="编号" />
							<el-table-column prop="classify" label="提现类型">
								<template #default="scope">
									<div style="display: flex; align-items: center">
										<span v-if="scope.row.classify==1">支付宝</span>
										<span v-else>微信</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="state" label="提现状态">
								<template #default="scope">
									<div style="display: flex; align-items: center">
										<span v-if="scope.row.state==0">提现中</span>
										<span style="color: green;" v-if="scope.row.state==1">提现成功</span>
										<span style="color: red;" v-if="scope.row.state==-1">提现失败</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="createAt" label="提现时间">
							</el-table-column>
							<el-table-column prop="outAt" label="成功时间">
							</el-table-column>
							<el-table-column prop="refund" label="失败原因">
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<div v-if="pages>0" style="width: 100%;margin-top: 20px;" class="flex align-center justify-end">
							<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
								:default-page-size="limit" background layout="prev, pager, next" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>


		<!-- 绑定支付宝账号弹窗 -->
		<el-dialog @close="getUserInfo()" v-model="showZfb" title="支付宝账号" width="30%" destroy-on-close>
			<div class="zfb-item flex align-center">
				<div class="zfb-item-title">收款人姓名：</div>
				<el-input v-model="zhifubaoName" placeholder="请输入收款人姓名" />
			</div>
			<div class="zfb-item flex align-center">
				<div class="zfb-item-title">支付宝账号：</div>
				<el-input v-model="zhifubao" placeholder="请输入支付宝账号" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showZfb = false">取消</el-button>
					<el-button type="primary" @click="bindZfb()">
						绑定
					</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 绑定微信收款码 -->
		<el-dialog @close="getUserInfo()" v-model="showwx" title="微信收款码" width="30%" destroy-on-close>
			<div class="bindWx flex align-center justify-center">
				<div class="bindWx-box">
					<el-upload class="bindWx-box-upload" :action="action" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="wximg" :src="wximg" class="bindWx-box-img" />
						<el-icon v-else class="bindWx-box-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</div>
			</div>
			<div v-if="wximg" class="" style="width: 100%;text-align: center;margin-top: 20px;">
				点击修改微信收款码
			</div>
			<div v-else class="" style="width: 100%;text-align: center;margin-top: 20px;">
				点击上传微信收款码
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showwx = false">取消</el-button>
					<el-button type="primary" @click="bindwx()">
						绑定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import {
		ROOTPATH
	} from '../../../comment/httpUrl.js'
	export default {
		data() {
			return {
				action: ROOTPATH + '/alioss/upload', //上传图片地址
				showwx: false,
				showZfb: false,
				loading: false,
				list: [],
				page: 1,
				pages: 1,
				limit: 5,
				moneyNum: '',
				current: 1, //提现类型
				activeName: 'first',
				placeholder: '', //提现手续费
				charge: 0, //提现手续费
				maxMoney: 0, //最高提现额度
				minMoney: 0, //最低提现额度
				money: 0, //可提现金额
				zhifubaoName: '', //支付宝名称
				zhifubao: '', //支付宝账号
				wximg: '', //微信收款码
				screenHeight: 0,
				sp: 0,
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.getUserInfo()
			this.getCharge()
			this.getList();
		},
		methods: {
			cashMoney() {
				//支付宝提现
				if (this.current == 1) {
					if (!/^\d+$/.test(this.moneyNum)) {
						ElMessage({
							type: 'info',
							message: '请输入正确金额,不能包含中文,英文,特殊字符和小数',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}
					if (Number(this.money) < Number(this.moneyNum)) {
						ElMessage({
							type: 'info',
							message: '可提现金额不足',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}

					if (Number(this.moneyNum) < Number(this.minMoney)) {
						ElMessage({
							type: 'info',
							message: '提现金额不能小于' + this.minMoney + '元',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}

					if (Number(this.moneyNum) > Number(this.maxMoney)) {
						ElMessage({
							type: 'info',
							message: '提现金额不能大于' + this.maxMoney + '元',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}

					if (!this.zhifubao && !this.zhifubaoName) {
						ElMessage({
							type: 'info',
							message: '请先绑定提现账号',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.showZfb = true
						return
					}
					this.sp = (this.moneyNum * this.charge).toFixed(2)
					ElMessageBox.confirm(
						'本次提现' + this.moneyNum + '元，服务费' + this.sp + '元，是否确认提现？',
						'提示', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					).then(() => {
						let data = {
							money: this.moneyNum,
							classify: 1
						}
						this.$Request.get("/app/cash/cashMoney", {
							params: data
						}).then(res => {
							if (res.code == 0) {
								ElMessage({
									type: 'success',
									message: res.msg,
									duration: 1500,
									offset: this.screenHeight / 2
								})
								this.moneyNum = ''
							} else {
								ElMessage({
									type: 'error',
									message: res.msg,
									duration: 1500,
									offset: this.screenHeight / 2
								})
							}
							this.getUserInfo()
						});
					}).catch(() => {})

				} else {
					if (!/^\d+$/.test(this.moneyNum)) {
						ElMessage({
							type: 'info',
							message: '请输入正确金额,不能包含中文,英文,特殊字符和小数',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}
					if (Number(this.money) < Number(this.moneyNum)) {
						ElMessage({
							type: 'info',
							message: '可提现金额不足',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}

					if (Number(this.moneyNum) < Number(this.minMoney)) {
						ElMessage({
							type: 'info',
							message: '提现金额不能小于' + this.minMoney + '元',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}

					if (Number(this.moneyNum) > Number(this.maxMoney)) {
						ElMessage({
							type: 'info',
							message: '提现金额不能大于' + this.maxMoney + '元',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						return;
					}
					if (!this.wximg) {
						ElMessage({
							type: 'info',
							message: '请上传微信收款码',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.showwx = true
						return;
					}
					this.sp = (this.moneyNum * this.charge).toFixed(2)
					ElMessageBox.confirm(
						'本次提现' + this.moneyNum + '元，服务费' + this.sp + '元，是否确认提现？',
						'提示', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					).then(() => {
						let data = {
							money: this.moneyNum,
							classify: 2
						}
						this.$Request.get("/app/cash/cashMoney", {
							params: data
						}).then(res => {
							if (res.code == 0) {
								ElMessage({
									type: 'success',
									message: res.msg,
									duration: 1500,
									offset: this.screenHeight / 2
								})
								this.moneyNum = ''
							} else {
								ElMessage({
									type: 'error',
									message: res.msg,
									duration: 1500,
									offset: this.screenHeight / 2
								})
							}
							this.getUserInfo()
						});
					}).catch(() => {})
				}
			},
			//时间转换
			extractDate(datetime) {
				// 创建一个新的Date对象，它将根据输入的日期时间字符串解析日期和时间  
				let date = new Date(datetime);

				// 使用toISOString方法将日期和时间转换为字符串，然后使用substring方法截取日期部分  
				let dateString = date.toISOString().substring(0, 10);

				return dateString;
			},
			//切换等级
			handleClick(e) {
				this.page = 1
				if (e.props.name == 'first') {
					this.getList();
				} else {
					this.getMoney()
				}
			},
			//提现记录
			getMoney() {
				//可以提现金额查询预估收入查询
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.loading = true
				this.$Request.get("/app/cash/selectPayDetails", {
					params: data
				}).then(res => {
					res.data.list.map(item => {
						if (item.outAt) {
							item.outAt = this.extractDate(item.outAt)
						}
						item.createAt = this.extractDate(item.createAt)
					})
					this.pages = res.data.totalPage
					this.loading = false
					if (res.code === 0 && res.data) {
						this.list = res.data.list;
					}
				});

			},
			//收益明细列表
			getList() {
				let data = {
					page: this.page,
					limit: this.limit,
					classify: 3
				}
				this.loading = true
				this.$Request.get('/app/userMoney/balanceDetailed', {
					params: data
				}).then(res => {
					res.data.records.map(item => {
						item.createTime = this.extractDate(item.createTime)
					})
					this.pages = res.data.pages
					this.loading = false
					if (res.code === 0) {
						this.list = res.data.records;
					}
				});
			},
			//绑定微信收款码
			bindwx() {
				let data = {
					wxImg: this.wximg
				}
				this.$Request.post('/app/user/updateUser', data, {
					type: 'json'
				}).then(res => {
					ElMessage({
						type: 'success',
						message: '绑定成功',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					this.getUserInfo()
					this.showwx = false
				});
			},
			//上传微信收款二维码
			handleAvatarSuccess(res) {
				this.wximg = res.data

			},
			//绑定支付宝账号
			bindZfb() {
				if (!this.zhifubaoName) {
					ElMessage({
						type: 'info',
						message: '请输入收款人姓名',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				if (!this.zhifubao) {
					ElMessage({
						type: 'info',
						message: '请输入支付宝账号',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				let data = {
					zhiFuBao: this.zhifubao,
					zhiFuBaoName: this.zhifubaoName
				}
				this.$Request.post('/app/user/updateUser', data, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						ElMessage({
							type: 'success',
							message: '绑定成功',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.getUserInfo()
						this.showZfb = false
					} else {
						ElMessage({
							type: 'error',
							message: res.msg,
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.getUserInfo()
						this.showZfb = false
					}
				})

			},
			//获取用户信息
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.money = res.data.balance // 我的余额
						this.zhifubaoName = res.data.zhiFuBaoName
						this.zhifubao = res.data.zhiFuBao
						this.wximg = res.data.wxImg
					}
				});
			},
			// 提现手续费
			getCharge() {
				this.$Request.get("/app/common/type/112").then(res => {
					if (res.code == 0) {
						this.minMoney = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});
				this.$Request.get("/app/common/type/152").then(res => {
					if (res.code == 0) {
						this.charge = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});
				this.$Request.get("/app/common/type/153").then(res => {
					if (res.code == 0) {
						this.maxMoney = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});

			},
			//分页
			currentChange(e) {
				this.page = e
				this.getList();
			},
			//返回上一页
			goBack() {
				this.$router.go(-1)
			},
			//选择提现类型
			bindToindex(e) {
				this.current = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		border-color: #00DD9A !important;
	}

	.bindWx {
		width: 100%;

		.bindWx-box {
			width: 200px;
			height: 200px;
			border: 1px dashed var(--el-border-color);
			border-radius: 6px;
		}

		.bindWx-box-upload {
			width: 200px;
			height: 200px;
		}

		.bindWx-box-img {
			width: 200px;
			height: 200px;
			border-radius: 6px;
		}

		.bindWx-box-icon {
			font-size: 30px;
			width: 200px;
			height: 200px;
			text-align: center;
			color: #8c939d;
		}
	}

	.zfb-item {
		margin-top: 20px;
	}

	.zfb-item-title {
		width: 140px;
	}

	.back {
		width: fit-content;
		color: #999999;
		cursor: pointer;
		font-size: 14px;
	}

	.content {
		width: 100%;
		align-items: flex-start;
		margin-top: 20px;
	}

	.left {
		width: 60%;
		border-right: 1px solid #EBEBEB;

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

		.left-box-money {
			width: 100%;
			height: 100px;
			background-color: #FAFAFA;
			border-radius: 12px;
			font-size: 14px;
			color: #333333;

			.left-box-money-title {
				width: fit-content;
				padding-top: 20px;
				margin-left: 20px;
				font-weight: 500;
			}

			.left-box-money-inp {
				margin: 0 10px;
				margin-top: 20px;

				:deep(.el-input__wrapper) {
					background-color: #FAFAFA !important;
					box-shadow: none !important;
				}
			}
		}

		.left-box-tips {
			color: #FF1919;
			font-size: 13px;
			margin-top: 17px;
		}

		.left-box-type {
			margin-top: 17px;

			.left-box-type-item {
				width: 160px;
				height: 40px;
				border-radius: 4px;
				border: 1px solid #EBEBEB;
				background-color: #ffffff;
				font-size: 14px;
				margin-right: 34px;
				cursor: pointer;
				position: relative;

				.left-box-type-item-icon {
					position: absolute;
					top: -5px;
					right: -5px;

				}

				img {
					width: 26px;
					height: 26px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}
		}

		.left-box-btn {
			width: 100%;
			height: 44px;
			background-color: #00DD9A;
			color: #ffffff;
			border-radius: 26px;
			margin-top: 20px;
			font-weight: 500;
			cursor: pointer;
		}

		.left-box-zh {
			margin-top: 20px;

			.left-box-zh-i {
				width: calc((100% - 20px) / 2);
				height: 60px;
				background-color: #E5FCF5;
				border-radius: 12px;
				font-size: 14px;
				cursor: pointer;
			}

			.left-box-zh-i-l {
				margin-left: 20px;

				img {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}
			}

			.left-box-zh-i-r {
				margin-right: 20px;
			}
		}
	}

	.right {
		width: 40%;
		padding: 0 20px;
	}
</style>