<template>
	<view class="recharge">
		<u-navbar @rightClick="handlerRight" leftIconColor="#fff" bgColor="#3c96f3" :autoBack="true" title="充值" :placeholder="true" :titleStyle="titleStyle">
			<view slot="right" class="button">
				充值记录
			</view>
		</u-navbar>
		<!-- 头部 -->
		<view class="recharge-box recharge-card">
			<view class="card-title">请直接转账到以下对公账户</view>
			<view class="card-list" v-if="Accounts.length>0">
				<view class="card-list-item">
					<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon3.png" mode="" />
					<view class="card-list-text">{{Accounts[0].dictLabel}}：{{Accounts[0].dictValue}}</view>
					<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
						@click="copyCode(Accounts[0].dictValue)" />
				</view>

				<view class="card-list-item">
					<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon1.png" mode="" />
					<view class="card-list-text">{{Accounts[1].dictLabel}}：{{Accounts[1].dictValue}}</view>
					<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
						@click="copyCode(Accounts[1].dictValue)" />
				</view>

				<view class="card-list-item">
					<image class="card-list-left-img" src="@/static/indexIMG/recharge-icon2.png" mode="" />
					<view class="card-list-text">{{Accounts[2].dictLabel}}：{{Accounts[2].dictValue}}</view>
					<image class="card-list-left-img" src="@/static/indexIMG/copyImg.png"
						@click="copyCode(Accounts[2].dictValue)" />
				</view>
			</view>
			<u-empty
				:show="!Accounts.length"
			    :icon="emptyIcon"
				text="未设置收款信息"
			>
			</u-empty>
			<u-gap height="20rpx"></u-gap>
		</view>
		<!-- 上传 -->
		<view class="recharge-box recharge-upload">
			<view class="upload-title">
				<input placeholder="请输入充值金额" type="number" v-model="money">
				<view class="upload-btn" @tap="uploadImage">上传凭证</view>
			</view>
			<view class="upload-box-img">
				<image v-if="uploadIMG" class="upload-img" :src="uploadIMG" mode="aspectFit" />
				<image v-else class="upload-bg-img" :src="uploadBgIMG" mode="aspectFit" @tap="uploadImage" />
			</view>

		</view>
		<!-- 提交按钮 -->
		<button class="btn" @tap="recharGe" :loading="confirmLoading">确认充值</button>
		<!--页面加载动画-->
		<!-- <rfLoading isFullScreen :loading="loading"></rfLoading> -->
	</view>
</template>

<script>
	import {
		upload,
		rechargeMoney,
    getBlBankAccount
	} from "@/api/system/user.js"
	import { toast } from '@/utils/common.js'
	export default {
		data() {
			return {
				assetType:5,
				Accounts: [],
				loading: false,
				confirmLoading: false,
				money: "",
				emptyIcon: require('@/static/empty.png'),
				uploadBgIMG: require('@/static/indexIMG/upload.png'),
				uploadIMG: "",
				cardList: [{
						leftIcon: require('@/static/indexIMG/recharge-icon1.png'),
						rightIcon: require('@/static/indexIMG/copyImg.png'),
						title: "公司账号",
						content: "110946777910101",
					},
					{
						leftIcon: require('@/static/indexIMG/recharge-icon2.png'),
						rightIcon: require('@/static/indexIMG/copyImg.png'),
						title: "开户银行",
						content: "招商银行北京分行十里河支行",
					},
					{
						leftIcon: require('@/static/indexIMG/recharge-icon3.png'),
						rightIcon: require('@/static/indexIMG/copyImg.png'),
						title: "公司名称",
						content: "中亿华商有限公司",
					},

				],
				titleStyle: {
					fontWeight: '700',
					color: '#fff'
				}
			}
		},
		onLoad(options) {
			if(options && options.assetType){
				this.assetType = options.assetType
			}
			this.getTopUpAccount()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.$store.dispatch('fetchAsset', {
				that: this
			})
			setTimeout(() => {
				// uni.stopPullDownRefresh();
			}, 500)
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			console.log(e, 'eee')
		},
		// #endif
		methods: {
			handlerRight () {
				uni.navigateTo({
					url: '/pages/licai/mine/recharge/recored?assetType='+this.assetType
				})
			},
			// 获取收款信息
			async getTopUpAccount() {
				const res = await getBlBankAccount()
				if (res.code == 200) this.Accounts = res.data
			},
			// 充值
			async recharGe() {

				const _this = this;
				if (!_this.money) {
					return toast('请填写充值金额');
				}
				if (!_this.uploadIMG) {
					return toast('请上传充值凭证');
				}
				this.confirmLoading = true
				await rechargeMoney({
						price: _this.money,
						credentials: _this.uploadIMG,
						assetType:this.assetType
					})
					.then(r => {
						console.log(r, "rr");
						toast('充值申请已提交');
						this.confirmLoading = false
						_this.money = ''
						_this.uploadIMG = ''
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					});
			},
			// 上传头像
			uploadImage() {

				// 从相册选择图片
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: function(res) {
						uni.showLoading({title:"上传中"})
						_this.handleUploadFile(res.tempFilePaths);
					},
					fail:function() {
						uni.hideLoading()
					}
				});
			},
			// 上传凭证
		   async handleUploadFile(data) {
				const _this = this;
				const filePath = data.path || data[0];
				let res = await upload(filePath)
				console.log(res)
				_this.uploadIMG = res.msg
				// _this.profileInfo.head_portrait = r.url;
				// _this.handleUpdateInfo(_this.profileInfo);
				uni.hideLoading()

			},
			// 复制邀请码
			copyCode(data1) {
				// #ifdef H5
				let tempInput = document.createElement("input");
				tempInput.type = "text";
				tempInput.id = "copyTempInput";
				tempInput.value = data1;
				tempInput.style.width = "1px";
				tempInput.style.height = "1px";
				tempInput.style.opacity = 0.1;
				document.body.appendChild(tempInput);
				tempInput.select();
				document.execCommand("Copy");
				uni.showToast({
					title: "复制成功",
				});
				setTimeout(() => {
					tempInput.remove();
				}, 2000);
				// #endif
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				let content = data1

				uni.setClipboardData({
					data: data1,
					success: function() {
						uni.showToast({
							title: "复制成功",
						});
					},
					fail: function(err) {
						console.log(err, 'err')
					}
				});
				//#endif
			},

		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		height: calc(100vh - 40px);
		padding: 22upx;
		background-color: #F0F0F1;

		.recharge-box {
			background: #FFFFFF;
			box-shadow: 0upx 3upx 15upx 1upx rgba(201, 208, 220, 0.3);
			border-radius: 20upx 20upx 20upx 20upx;
		}

		// 头部卡片
		.recharge-card {
			.card-title {
				width: 100%;
				text-align: center;
				font-size: 38upx;
				font-weight: 700;
				color: #333333;
				padding: 22upx 0;
				border-bottom: 1upx solid #F0F0F1;
				;
			}

			.card-list {
				padding: 20upx 24upx;

				.card-list-item {
					padding-bottom: 18upx;

					&:last-child {
						padding-bottom: 0;
					}

					display: flex;
					align-items: center;

					.card-list-left-img {
						width: 18px;
						height: 18px;
					}

					.card-list-text {
						flex: 1;
						padding-left: 12upx;
						font-size: 30upx;
						font-weight: 400;
						color: #333333;
					}

					.card-list-right-img {
						width: 18px;
						height: 18px;
					}

				}
			}

		}

		// 上传
		.recharge-upload {
			margin-top: 20upx;
			text-align: center;
			padding-bottom: 20upx;

			.upload-title {
				position: relative;
				text-align: left;
				padding: 20upx;

				input {
					background: #F2F4F8;
					border-radius: 50upx 50upx 50upx 50upx;
					font-size: 32upx;
					height: 90upx;
					padding-right: 200upx;
					padding-left: 35upx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.upload-btn {
					z-index: 99;
					position: absolute;
					right: 35upx;
					top: 50%;
					transform: translateY(-50%);
					border-radius: 90upx 90upx 90upx 90upx;
					border: 1upx solid #0076FF;
					font-size: 32upx;
					padding: 8upx 25upx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #0076FF;
				}
			}

			.upload-box-img {
				margin: 0 20upx;
				background: #F8F9FB;
				border-radius: 20upx 20upx 20upx 20upx;
				// padding: 220upx 0;
			}

			.upload-img {
				width: 100%;
				height: 380px;
			}

			.upload-bg-img {
				width: 100px;
				height: 68px;
				margin: 245upx 0;
			}
		}

		// 充值按钮
		.btn {
			margin-top: 20upx;
			background: #0076FF;
			border-radius: 40upx;
			font-size: 32upx;
			text-align: center;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

			.uni-button:after {
				border: none;
			}
		}

	}
	.button {
		color: #FFFFFF;
	}
</style>
