<template>
	<view class="add">
		<view class="add-content">
			<view class="content">
				<view class="title">提现金额</view>
				<view class="box">
					<input v-model="money" placeholder="请输入提现金额" />
					<view class="all" @click="toAll()">全部提现</view>
				</view>
				<view class="remark">
					<view class="p">可提现金额：{{Number((info.totalCoins/info.transMoneyBill).toFixed(2))+Number(info.totalMoney)}}元，包含：金币折算{{(info.totalCoins/info.transMoneyBill).toFixed(2)}}元+账户余额{{info.totalMoney}}元</view>
					<view class="p">实际到账：{{Number((info.totalCoins/info.transMoneyBill*(100-info.withdrawal)/100).toFixed(2))+Number(info.totalMoney)}}元<text>手续费({{info.withdrawal}}%)：{{(info.totalCoins/info.transMoneyBill*info.withdrawal/100).toFixed(2)}}元</text></view>
				</view>
			</view>
			<view class="content">
				<view class="title">提现方式（支付宝）</view>
				<view class="list">
					<view class="item">账号：{{userInfo.account}}</view>
					<view class="item">姓名：{{userInfo.realname}}</view>
				</view>
			</view>
			<view class="rule">
				<view class="title">提现规则：</view>
				<view class="list" v-html="content">
				<!-- 	<view class="item">1、提现收取{{info.withdrawal}}%的手续费；</view>
					<view class="item">2、金币的换算规则：{{info.transMoneyBill}}金币=1元；</view>
					<view class="item">3、每次提现，预计到账时间24小时，如有问题请联系下方客服，客服会在24小时内为您解决</view> -->
				</view>
			</view>
			<view class="content">
				<view class="title">有疑问？</view>
				<view class="chat" @click="getConfigData()">
					<image src="@/static/kefu.png"></image>
					<view class="info">
						<view class="name">在线客服</view>
						<view class="date">9:00-18:00</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-fd">
			<view class="btn" @click="toReg()">提现<text v-if="money>0">（手续费{{(money*info.withdrawal/100).toFixed(2)}}元）</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: "",
				info: {},
				userInfo: {},
				content: ""
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.userWallet();
			this.getConfigData(2)
		},
		methods: {
			toAll() {
				this.money = (Number((this.info.totalCoins/this.info.transMoneyBill*(100-this.info.withdrawal)/100).toFixed(2))+Number(this.info.totalMoney))
			},
			async userWallet() {
				const { code, data } = await this.$api.userWallet({
					userId: uni.getStorageSync("userInfo").id,
					type: 1
				})
				if(code == 200){
					this.info = data;
				}
			},
			//字典查询
			async getConfigData(type) {
				const that = this;
				if(type == 1){
					let res1 = await that.$api.getConfigData({dictType: 'CONFIG_CUSTOMER_SERVICE_USERID'});
					if(res1.data.content){
						that.toChat(res1.data.content)
					}
				}else{
					let res2 = await that.$api.getConfigData({dictType: 'CONFIG_WITHDRAWAL_RULE'});
					if(res2.data.content){
						that.content = res2.data.content
					}
				}
				
			},
			//去聊天
			async toChat(sellerId) {
				const { code, data } = await this.$api.findZegoToken({
					userId: uni.getStorageSync("userInfo").id,
					sellerId
				})
				if(code == 200){
					uni.setStorageSync("chatToken",data.token);
					uni.navigateTo({
						url: "/pages/users/chat/index?id="+sellerId+"&roomId="+data.roomId
					})
				}
			},
			async toReg() {
				const that = this;
				if(!that.money){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "提现金额不能为空！"
					})
					return ;
				}
				if(that.money <= 0){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "提现金额最低0.01元！"
					})
					return ;
				}
				if((Number((this.info.totalCoins/this.info.transMoneyBill*(100-this.info.withdrawal)/100).toFixed(2))+Number(this.info.totalMoney))<Number(that.money)){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "提现金额大于总金额！"
					})
					return ;
				}
				
				const { code, data, msg } = await that.$api.withdrawal({
					userId: uni.getStorageSync("userInfo").id,
					username: that.userInfo.realname,
					phone: that.userInfo.account,
					money: that.money,
					coins: that.info.totalCoins
				})
				if(code == 200){
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						that.userWallet();
					},2000)
				}else{
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: msg
					})
				}
			},
			tabItem(index) {
				this.tabIndex = index;
			},
			toDel(i) {
				this.imgurl.splice(i,1)
			},
		}
	}
</script>

<style scoped lang="scss">
.add{
	overflow: hidden;
	padding-bottom: 110rpx;
	&-content{
		padding: 0 25rpx;
		overflow: hidden;
		.content{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			overflow: hidden;
			.box{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #E6E6E6;
				input{
					flex: 1;
					height: 60rpx;
					font-size: 30rpx;
					color: #212121;
				}
				.all{
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}
			}
			.remark{
				.p{
					padding: 10rpx 0;
					font-weight: 500;
					font-size: 22rpx;
					color: #222222;
					text{
						margin-left: 30rpx;
					}
				}
				margin-top: 20rpx;
			}
			.chat{
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 66rpx;
					height: 66rpx;
					margin-right: 20rpx;
				}
				.info{
					.name{
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
					}
					.date{
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.list{
				.item{
					font-weight: 500;
					font-size: 30rpx;
					color: #999999;
					margin-top: 25rpx;
					&:first-child{
						border-bottom: 1px solid #E6E6E6;
						padding-bottom: 25rpx;
					}
				}
			}
		}
		.title{
			font-size: 30rpx;
			color: #333333;
		}
		.rule{
			background: #EDEEEF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			overflow: hidden;
			.list{
				.item{
					padding: 5rpx 0;
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
				}
				margin-top: 20rpx;
			}
			
		}
	}
	
	&-fd{
		background-color: #F3F4F5;
		width: 100%;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		.btn{
			width: 100%;
			line-height: 98rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 98rpx;
			text-align: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
}
</style>