<template>
	<view class="wallet-page">
		<!-- 顶部导航栏 -->
		<custom-navbar title="我的钱包" :showBack="true" titleColor="#fff" backgroundColor="transparent" borderBottom="none"
			leftImg="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d37f08d8-4399-4a5b-ba17-e7675c905b4b"></custom-navbar>
		<view class="wallet-content">
			<view class="wallet-content-title">
				<view class="wallet-content-title-text1">总金额 <text>(元)</text></view>
				<view class="wallet-content-title-text2">
					<image src="/static/images/wallet/wallet.png" class="wallet-content-title-icon"></image>
					总金额=可提现金额+提现中金额
				</view>
			</view>
			<view class="wallet-content-price">
				{{ userInfo.money ? formatBalance(userInfo.money) : "0.00" }}
			</view>
			<view class="wallet-content-cash">
				<view class="wallet-content-cash-left" style="width: 50%;">
					<view class="wallet-content-cash-title">可提现<text>(元)</text></view>
					<view class="wallet-content-cash-left-text">{{
            userInfo.usable_money
              ? formatBalance(userInfo.usable_money)
              : "0.00"
          }}</view>
				</view>
				<view class="wallet-content-cash-right">
					<view class="wallet-content-cash-title">
						提现中<text>(元)</text>
						<image src="/static/images/wallet/tip.png" class="wallet-content-cash-title-icon"
							@click="openTip"></image>
					</view>
					<view class="wallet-content-cash-right-text">
						{{
              userInfo.other_money
                ? formatBalance(userInfo.other_money)
                : "0.00"
            }}
					</view>
				</view>
			</view>
			<view class="wallet-content-btn" @click="goCash">去提现</view>
		</view>
		<view class="wallet-detail">
			<scroll-view scroll-x class="wallet-detail-tabs" :show-scrollbar="false">
				<view :class="[`wallet-detail-line`,`walletDetailTab`,{tabActive: tabsIndex == 0}]" @click="changeTab(0)">余额变动
									</view>
									<view :class="[`walletDetailTab`,{tabActive: tabsIndex == 1}] " @click="changeTab(1)">提现记录
									</view>
			</scroll-view>

			<view class="wallet-detail-content">
				<CommonList ref="groupRef" :apiUrl="tabsList[tabsIndex].url"
					:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 820}rpx)`">
					<template #listData="{ list }">
						<view class="lists">
							<view v-if="tabsIndex == 0" class="lists-item" :style="{
                  'border-bottom': list[index + 1] && '1rpx solid #F5F5F5',
                  paddingBottom: '20rpx',
                }" v-for="(item, index) in list" :key="index">
								<view class="lists-item-title">{{ getDescriptionByNumber(item.type) }}</view>
								<view class="lists-item-content">
									<view class="lists-item-text1">{{ item.order_num }}</view>
									<view class="lists-item-text2">{{ item.inorde == 1 ? "+" : "-" }}{{ item.money }}
									</view>
								</view>
								<view class="lists-item-content">
									<view class="lists-item-text1">{{ item.add_time }}</view>
									<view class="lists-item-text1">余额：{{ formatPriceNumber(item.after_money) }}</view>
								</view>
							</view>
							<view v-if="tabsIndex == 1" class="lists-item" :style="{
                  'border-bottom': list[index + 1] && '1rpx solid #F5F5F5',
                  paddingBottom: '20rpx',
                }" v-for="(item, index) in list" :key="index" @click="openCahPop(item)">
								<view class="lists-item-title"> {{ item.cash_outbizno }} </view>
								<view class="lists-item-content">
									<view class="lists-item-text1">提现状态</view>
									<view class="lists-item-text3">{{
                    getTabName(item.cash_state)
                  }}</view>
								</view>
								<view class="lists-item-content">
									<view class="lists-item-text1">{{ item.cash_add_time }}</view>
									<view class="lists-item-text1">金额：{{ item.cash_money }}</view>
								</view>
							</view>
						</view>
					</template>

					<!-- 空数据状态 -->
					<template #empty>
						<noData></noData>
					</template>
				</CommonList>
			</view>
		</view>

		<!-- 提示弹窗 -->
		<uni-popup mask-background-color="rgba(0,0,0,0.5)" ref="popup">
			<view class="popup-content">
				<view class="popup-content-title"> 温馨提示 </view>
				<view class="popup-content-text">
					提交申请后，提现的金额将会在最多5个工作日内到账
				</view>
				<view class="popup-content-btn" @click="closeTip"> 好的 </view>
			</view>
		</uni-popup>

		<!-- 记录弹窗 -->
		<cashPop v-model="popShow" :cashObj="cashObj"></cashPop>
	</view>
</template>

<script>
	import cashPop from "./components/cashPop.vue";
	import request from "@/utils/request";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		components: {
			CommonList,
			cashPop,
		},
		data() {
			return {
				tabsList: [{
						name: "余额变动",
						id: 0,
						url: "/user/balancechangelist",
					},
					{
						name: "提现记录",
						id: 1,
						url: "/user/getcashrecord",
					},
				],
				popShow: false, // 控制弹窗显示隐藏
				cashObj: {},
				tabsIndex: 0,
				statusBarHeight: 0,
				artisanType: getApp().globalData.artisanType,
				userInfo: {},
				listQuery: {},
			};
		},
		async onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			if (this.artisanType) {
				this.listQuery.user_type = this.artisanType;
				this.listQuery.cash_type = this.artisanType;
				await this.getUserInfo();
				this.search();
			}
		},
		computed: {},
		methods: {
			getDescriptionByNumber(num) {
				// 创建数字与描述的映射关系
				const descriptionMap = {
					1: "提现",
					2: "订单分账入账",
					3: "余额消费",
					4: "余额退款",
					5: "工时订单分帐入帐",
					6: "工位订单分帐入帐",
					11:"自营订单分帐入帐",
				};

				// 检查输入是否为有效数字且在映射范围内
				if (typeof num !== "number" || !descriptionMap.hasOwnProperty(num)) {
					return "未知类型";
				}

				return descriptionMap[num];
			},
			goCash() {
				uni.navigateTo({
					url: "/pages/wallet/withdrawCash",
				});
			},
			openCahPop(item) {
				this.cashObj = item;
				this.popShow = true;
			},
			openTip() {
				this.$refs.popup.open("center");
			},
			closeTip() {
				this.$refs.popup.close();
			},
			// 根据提现状态返回对应文字
			getTabName(id) {
				const stateMap = {
					1: '审核中',
					2: '审核中',
					3: '已打款',
					4: '已驳回',
					5: '已驳回'
				};
				// 若传入非1-5的值，返回空字符串或自定义提示（根据业务需求调整）
				return stateMap[id] || '';
			},
			// 切换tab
			changeTab(index) {
				if (this.tabsIndex === index) return;
				this.tabsIndex = index;
				this.$nextTick(() => {
					this.$refs.groupRef.clearList();
					this.$refs.groupRef.manualRefresh(this.listQuery);
				});
			},
			async getUserInfo() {
				const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : "";
				const result = await request.post("/sj/user/getuser", {
					type
				});
				this.userInfo = result.data;
				this.listQuery.user_id = this.userInfo.id;
				this.listQuery.cash_user_id = this.userInfo.id;
			},
			search() {
				// 触发列表刷新
				this.$refs.groupRef.manualRefresh(this.listQuery);
			},

			// 格式化余额，添加千位分隔符
			formatBalance(value) {
				return value.toLocaleString("en-US", {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2,
				});
			},
		},
	};
</script>

<style lang="less">
	// page {
	//   background-color: #fff;
	// }
	.wallet-page {
		background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d43afda1-6e28-4649-98d6-e52806073151");
		background-size: contain;
		background-position: center top;
		background-repeat: no-repeat;
		height: 100vh;
		width: 100%;
		position: relative;

		//
		.wallet-content {
			border-radius: 40rpx;
			padding: 40rpx;
			background-image: url("/static/images/wallet/bj2.png");
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			margin: 60rpx 20rpx 0 20rpx;

			.wallet-content-title {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.wallet-content-title-text1 {
					display: flex;
					align-items: center;
					gap: 8rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.wallet-content-title-text2 {
					display: flex;
					align-items: center;
					background: rgba(235, 61, 51, 0.06);
					border-radius: 18rpx;
					padding: 6rpx 12rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #925a57;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}

				.wallet-content-title-icon {
					width: 21rpx;
					height: 23rpx;
					margin-right: 6rpx;
				}
			}

			.wallet-content-price {
				font-family: DINPro, DINPro;
				font-weight: 500;
				font-size: 72rpx;
				color: #333333;
				line-height: 93rpx;
				text-align: left;
				font-style: normal;
			}

			.wallet-content-cash {
				margin-top: 34rpx;
				display: flex;

				// justify-content: space-between;
				.wallet-content-cash-left {
					.wallet-content-cash-left-text {
						font-family: DINPro, DINPro;
						font-weight: 500;
						font-size: 36rpx;
						color: #e8101e;
						line-height: 46rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.wallet-content-cash-right {
					.wallet-content-cash-right-text {
						font-family: DINPro, DINPro;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						line-height: 46rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.wallet-content-cash-title {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					display: flex;
					align-items: center;
					gap: 4rpx;

					.wallet-content-cash-title-icon {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.wallet-content-btn {
				margin: 0 auto;
				margin-top: 69rpx;
				width: 614rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		//记录列表样式
		.wallet-detail {
			margin: 20rpx 20rpx 0 20rpx;
			width: 710rpx;
			background: #ffffff;
			border-radius: 36rpx;

			.wallet-detail-tabs {
				// display: flex;
				// justify-content: space-between;
				border-bottom: 2rpx solid #faf8f8;
				position: relative;

				.walletDetailTab {
					display: inline-block;
					position: relative;
					margin-top: 30rpx;
					margin-bottom: 33rpx;
					width: 350rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 45rpx;
					text-align: center;
					font-style: normal;
				}

				.wallet-detail-line {
				        &::before {
				          content: "";
				          position: absolute;
				          right: 0;
				          top: 0;
				          width: 4rpx;
				          border-radius: 4rpx;
				          height: 100%;
				          background: #eaeaea;
				        }
				      }

				.tabActive {
					font-weight: 500;
					color: #e8101e;
				}

				.walletDetailTab.tabActive::after {
					content: "";
					width: 56rpx;
					height: 8rpx;
					background: #e8101e;
					border-radius: 5rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -13rpx;
				}
			}
		}

		//提示弹窗样式
		.popup-content {
			margin: 0 84rpx;
			width: 582rpx;
			height: 526rpx;
			background-image: url("/static/images/wallet/tipBj.png");
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;

			.popup-content-title {
				padding-top: 161rpx;
				font-weight: 500;
				font-size: 38rpx;
				color: #333333;
				line-height: 53rpx;
				text-align: center;
				font-style: normal;
			}

			.popup-content-text {
				margin-top: 42rpx;
				padding: 0 47rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.popup-content-btn {
				margin: 50rpx 76rpx 0 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 430rpx;
				height: 86rpx;
				background: linear-gradient(181deg, #f52540 0%, #e8101e 100%);
				border-radius: 43rpx;
				font-weight: 400;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.lists {
		display: flex;
		flex-wrap: wrap;
		gap: 50rpx;

		.lists-item {
			width: 100%;

			.lists-item-title {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.lists-item-text1 {
				margin-top: 4rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}

			.lists-item-text2 {
				font-family: DINPro, DINPro;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}

			.lists-item-text3 {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}

			.lists-item-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	// .wallet-page::before {
	//   content: "";
	//   position: fixed;
	//   top: 0;
	//   left: 0;
	//   right: 0;
	//   height: 600rpx !important;
	//   background-image: url("/static/images/wallet/bj.png");
	//   background-size: contain;
	//   background-position: center top;
	//   background-repeat: no-repeat;
	//   z-index: 1;
	// }
</style>