<template>
	<view class="mine-container">
		<u-navbar @leftClick="handlerLeft" leftIconColor="#000" title="我的钱包" :placeholder="true"></u-navbar>
		<view class="top-box">
			<view class="top-row">
				<view class="row1-col">
					<view class="title">
						消费余额
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_10}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
				<view class="grp">
				</view>
				<view class="row1-col">
					<view class="title">
						消费券
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_9}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
				<view class="grp">
				</view>
				<view class="row1-col">
					<view class="title">
						消费金
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_9}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
			</view>
			<!-- 第二行 -->
			<view class="top-row row-next">
				<view class="row1-col">
					<view class="title">
						冻结资产
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_14}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
				<view class="row1-col">
					<view class="title">
						补贴
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_12}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
			</view>
			<view class="top-row row-next">
				<view class="row1-col">
					<view class="title">
						槟榔收益
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_13}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
				<view class="row1-col" v-if="assetMap.asset_8!=-1">
					<view class="title">
						分红额
					</view>
					<view class="price-group">
						<view class="price">
							{{assetMap.asset_8}}
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 中间的银行卡,提现申请 -->
		<view class="zhong-box">
			<view class="item" v-for="(item,i) in navList" :key="i" @click="goto(item.path)">
				<view class="item-group">
					<image :src="item.icon" mode=""></image>
					<view>
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="handle-box">
			<view class="handle-detail">
				<view class="handle-item" @click="goto(item.path)" v-for="(item,index) in otherList" :key="index">
					<view class="item-box">
						<view class="item-icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="handle-name">
							{{ item.name }}
						</view>
					</view>

					<view class="item-right">
						<image class="right" src="@/static/back.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-x">


		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialogRef" type="dialog">
			<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
				<view style="width:100%;display: flex;text-align: center;align-items: center;flex-direction: column;">
					<uni-data-checkbox v-model="cashAwardInfo.handleType" :localdata="[{
					text: '100%兑换成余额',
					value: 1
				}, {
					text: '30%槟榔果+70%余额',
					value: 2
				}]"></uni-data-checkbox>
					<uni-easyinput style="margin-top: 20rpx;" trim="all" v-model="cashAwardInfo.changeMoney"
						placeholder="请输入金额"></uni-easyinput>
					<!-- <input style="border: solid 1px red; border-radius: 5rpx;" class="uni-input" :value="cashAwardInfo.price"/> -->
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialogBankRef" type="dialog">
			<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
				<view style="width:100%;display: flex;text-align: center;align-items: center;flex-direction: column;">
					<uni-easyinput disabled style="margin-top: 20rpx;" trim="all" @click="showBank=true"
						v-model="cashInfo.bankName" placeholder="请选择开户行"></uni-easyinput>
					<uni-easyinput style="margin-top: 10rpx;" trim="all" v-model="cashInfo.changeMoney"
						placeholder="请输入金额"></uni-easyinput>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<u-action-sheet :show="showBank" :actions="bankList" title="请选择提现开户行" @close="showBank = false"
			@select="handlerBank">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		myAssetDetail,
		handleCashInteger,
		balanceCaseApply,
		caseTree2Balance,
		caseWared2Balance
	} from "@/api/system/api.js";
	import {
		getBankList
	} from '@/api/system/user.js';
	import {
		mapMutations
	} from "vuex";
	import url from "../../../common/http/url";
	export default {
		data() {
			return {
				cashAwardInfo: {
					handleType: 1,
					changeMoney: ''
				},
				assetMap: {
					"asset_8": -1,
					"asset_13": 0,
					"asset_12": 0,
					"asset_9": 0,
					"asset_15": 0,
					"asset_10": 0,
					"asset_11": 0,
					"asset_14": 0
				},
				navList: [{
						name: "银行卡",
						path: "/pages/licai/mine/account/bankList?use=2",
						icon: require("@/static/newBinLang/asset/yinhangka@2x.png"),
						bgColor: "rgb(16, 160, 244)",
					},
					{
						name: "绑定银行卡",
						path: "/pages/licai/mine/account/bindBank?use=2",
						icon: require("@/static/newBinLang/asset/bangdingyinhangka@2x.png"),
						bgColor: "rgb(16, 160, 244)",
					},
					{
						name: "提现申请",
						path: "cashBalance",
						icon: require("@/static/newBinLang/asset/tixianshenqing@2x.png"),
						bgColor: "rgb(11, 190, 60)",
					},
					{
						name: "余额转账",
						path: "/pages/licai/mine/account/change?asstype=10",
						icon: require("@/static/newBinLang/asset/yuezhuanzhang@2x.png"),
						bgColor: "rgb(11, 190, 60)",
					},
				],
				otherList: [{
						name: "资产变更记录",
						path: "/pages/home/myService/recored",
						icon: require("@/static/newBinLang/asset/zichanbiangeng@2x.png"),
						bgColor: "rgb(11, 190, 160)",
					},
					{
						name: "兑付资产转余额",
						path: "tree2Balance",
						icon: require("@/static/newBinLang/asset/duifuzichanzhuan@2x.png"),

						bgColor: "rgb(11, 190, 60)",
					}, {
						name: "补贴转余额",
						path: "caseWared2Balance",
						icon: require("@/static/newBinLang/asset/jiangjinzichanzhuan@2x.png"),

						bgColor: "rgb(11, 190, 60)",
					}
				],
				showBank: false,
				bankList: [],
				cashInfo: {
					bankName: '',
					bankId: '',
					changeMoney: ''
				},
				dialogTitle: ''
			};
		},
		async onShow() {
			await this.getAssetList()
			await this.checkToken()
		},
		onLoad() {
			this.getMyBindBank()
		},
		methods: {
			...mapMutations(["logout"]),
			//就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
			checkToken() {
				this.$http("GET", "/user/userCache").then((res) => {
					if (!res.data) {
						this.logout();
					}
				});
			},
			handlerBank(e) {
				this.cashInfo.bankId = e.id;
				this.cashInfo.bankName = e.name;
				this.$refs.inputDialogBankRef.open()
			},
			async getMyBindBank() {
				let {
					rows
				} = await getBankList();
				rows.forEach(x => {
					x.name = x.bankLabel + x.bankCardNumber
				})
				this.bankList = rows
			},
			inputDialogToggle() {
				if (this.cashType == "caseWared2Balance") {
					this.cashAwardInfo.handleType = 1
					this.cashAwardInfo.changeMoney = ''
					this.$refs.inputDialogRef.open()
				} else if (this.cashType == "cashBalance") {
					this.cashInfo = {
						bankName: '',
						bankId: '',
						changeMoney: ''
					}
					this.showBank = true
				} else {
					this.$refs.inputDialog.open()
				}
			},
			async dialogInputConfirm(val) {
				if (this.cashType == "caseWared2Balance") {
					val = this.cashAwardInfo.changeMoney
				}
				if (this.cashType == "cashBalance") {
					val = this.cashInfo.changeMoney
					if (!this.cashInfo.bankId) {
						this.$msg("请选择有效提现银行卡")
						return
					}
				}
				if (parseFloat(val).toString() == "NaN") {
					this.$msg("请填写数字")
					return
				}
				if (parseFloat(val) <= 0) {
					this.$msg("操作失败,填写错误")
					return
				}
				//判断是否金额并且判断是否积分大于
				if (parseFloat(val) > this.cashAsset) {
					this.$msg("操作失败,资产不足")
					return
				}
				if (this.cashType == "cashBalance") {
					console.log()
					await balanceCaseApply(this.cashInfo)
					this.$msg("提现申请成功，请等待审核！")
					return
				}
				if (this.cashType == "tree2Balance") {
					await caseTree2Balance({
						changeMoney: val
					})
					this.$msg("兑付成功，请稍后刷新资产明细！")
					return
				}
				if (this.cashType == "caseWared2Balance") {
					//奖金闪兑
					await caseWared2Balance(this.cashAwardInfo)
					this.$msg("兑付成功，请稍后刷新资产明细！")
					return
				}
			},
			handlerLeft() {
				// uni.navigateTo({
				// 	url: '/pages/home/zhongYiWanShangMy'
				// })
				uni.navigateBack()
			},
			goto(url) {
				if (url == "cashBalance") {
					this.cashAsset = this.getAssetValue(10)
					this.cashType = url
					this.dialogTitle = "当前消费余额：" + this.cashAsset
					this.inputDialogToggle()
					return
				}
				if (url == "tree2Balance") {
					this.cashAsset = this.getAssetValue(13)
					this.cashType = url
					this.dialogTitle = "当前槟榔收益：" + this.cashAsset
					this.inputDialogToggle()
					return
				}
				if (url == "caseWared2Balance") {
					this.cashAsset = this.getAssetValue(12)
					this.cashType = url
					this.dialogTitle = "当前补贴：" + this.cashAsset
					this.inputDialogToggle()
					return
				}
				if (url == "cashInteger") {
					this.cashAsset = this.getAssetValue(11)
					this.cashType = url
					this.dialogTitle = "当前槟榔果：" + this.cashAsset
					this.inputDialogToggle()
					return
				}
				uni.navigateTo({
					url,
				});
			},
			async getAssetList() {
				let resp = await myAssetDetail()
				console.log(resp)
				console.log("this.assetMap" + this.assetMap)
				resp.forEach(asset => {
					this.assetMap['asset_' + asset.assetType] = asset.value.toFixed(2)
				})
			},
			getAssetValue(assetType) {
				return this.assetMap['asset_' + assetType]
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background: #F5F5F5;
	}

	.top-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #77E9D2;
		border-bottom-right-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
		padding: 20rpx;

		.top-row {
			display: flex;
			justify-content: space-between;

			.grp {
				flex: 0;
				border: 1rpx solid #00D6AB;
				margin: 30rpx 0;
			}

			.row1-col {
				flex: 1;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #484848;
					margin-bottom: 30rpx;
					text-align: center;
				}

				.price-group {
					display: flex;
					align-items: center;

					.price {
						font-size: 40rpx;
						color: #000000;
						font-weight: 700;
					}

					.unit {
						margin-left: 10rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #636262;
					}
				}
			}

		}

		.row-next {
			margin-top: 20rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 16rpx;
		}
	}

	.zhong-box {
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 16rpx;

		.item {
			display: flex;
			padding: 20rpx;

			.item-group {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				view {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #484848;
				}
			}
		}
	}

	//=================
	.title-box {
		margin: 30rpx 30rpx 10rpx 30rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		border-bottom: solid #d5d5d5 5rpx;

		.title-left {
			border-left: 12rpx solid rgba(75, 178, 46, 1);
			padding-left: 20rpx;
			font-size: 35rpx;
			font-weight: 700;
		}

		.title-right {
			font-size: 28rpx;
			color: #7a7a7a;
			font-weight: 700;
		}
	}

	.asset-box {
		margin: 0rpx 30rpx 30rpx 30rpx;
		background-image: linear-gradient(to bottom,
				rgba(75, 178, 46, 1) 0%,
				rgba(75, 178, 46, 0.9) 70%,
				rgba(75, 178, 46, 0.8) 100%);
		border-radius: 10rpx;
		padding: 30rpx 30rpx;
		color: #fff;


		.detail-box {
			margin-bottom: -15rpx;

			.detail-item {
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;

				.item-name {
					display: flex;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					flex: 1;
					font-size: 28rpx;
				}

				.item-value {
					flex: 1;
					font-size: 35Arpx;
					font-weight: 700;
				}
			}
		}
	}

	.handle-box {
		margin: 0rpx 20rpx 20rpx 20rpx;

		.handle-detail {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 20rpx 0 20rpx;

			.handle-item {
				display: flex;
				justify-content: space-between;
				border-bottom: solid #00D6AB 2rpx;
				padding-bottom: 20rpx;
				margin-top: 20rpx;

				.item-box {
					font-weight: 600;
					display: flex;
					justify-content: space-between;

					.item-icon {
						border-radius: 50%;
						margin-right: 40rpx;

						image {
							width: 70rpx;
							height: 70rpx;
						}
					}

					.handle-name {
						display: flex;
						align-items: center;
					}
				}

				.item-right {
					display: flex;
					align-items: center;

					.right {
						width: 15rpx;
						height: 25rpx;
					}
				}
			}

			.handle-item:last-child {
				border-bottom: solid #fff 2rpx;
			}
		}
	}

	.bottom-x {
		height: 200rpx
	}
</style>