<template>
	<view class="withdraw-view">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="提现" titleColor="#333333" :border-bottom="false" title-bold>
		</u-navbar>
		<view class="withdraw-content">
			<view v-if="!submit">
				<view class="withdraw-content-main">
					<view class="amount-title">可提现金额</view>
					<view class="amount-text"><text class="amount-symbol">￥</text>{{amount}}</view>
					<u-button type="primary" shape="circle" :custom-style="buttonStyle" @click="handleClick">全部提现</u-button>
				</view>
				<view class="line-view"></view>
				<view class="rule-title">提现规则说明</view>
				<view class="rule-content">1.提现金额：提现金额是指已完工订单通过平台审核后且达到合同账期的订单费用之总和。</view>
				<view class="rule-content">2.提现到账时间具体以银行结果为准</view>
			</view>
			<view v-else class="submited-view">
				<image class="success-image" :src="imageUrl"></image>
				<view>您已提交提现申请</view>
				<view class="submited-button">
					<u-button type="primary" shape="circle" :custom-style="buttonStyle" @click="handleClickSure">我知道了</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				submit: false
			}
		},
		computed: {
			buttonStyle() {
				return {
					width: "400rpx",
					height: "104rpx",
					"font-size": "32rpx",
					"font-weight": "bold",
				};
			},
			imageUrl() {
				return process.uniEnv.qn_base_url + 'chenggong.png'
			},
		},
		onLoad() {
			getApp().trackPage('钱包提现页')
			this.loadAssets()
		},
		methods: {
			async handleClick() {
				let self = this
				if(self.amount) {
					let res = await self.$u.api.workerApplyPay()
					if(res && res.code == 200) {
						self.submit = true
					} else {
						self.$u.toast(res.message || '系统异常，提现失败！');
					}
				}
			},
			async loadAssets() {
				let self = this
				let res = await self.$u.api.getAssets()
				if(res && res.code == 200) {
					self.amount = res.data && res.data.canApplyAmount
				}
			},
			handleClickSure() {
				this.$u.route({type: 'back'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw-view {
		height: 100vh;
		background-color: #F4F5F7;

		.withdraw-content {
			border-radius: 12rpx;
			background-color: #FFFFFF;
			padding: 100rpx 30rpx;
			margin: 10rpx 30rpx 30rpx 30rpx;
			
			.withdraw-content-main {
				text-align: center;
				margin-bottom: 200rpx;
				.amount-title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
				}
				
				.amount-text {
					font-size: 72rpx;
					font-weight: bold;
					color: #2272FF;
					margin-top: 60rpx;
					margin-bottom: 60rpx;
					.amount-symbol {
						font-size: 36rpx;
					}
					
				}
			}
			.line-view {
				padding: 0 30rpx;
				background-color: #F4F5F7;
				height: 2rpx;
			}

			.rule-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 60rpx;
				margin-bottom: 30rpx;
			}

			.rule-content {
				font-size: 24rpx;
				color: #666666;
				margin-bottom: 20rpx;
				line-height: 40rpx;
			}
				
			.submited-view {
				text-align: center;
				color: #2272FF;
				font-size: 40rpx;
				font-weight: bold;
				.success-image {
					width: 224rpx;
					height: 224rpx;
					margin-top: 80rpx;
				}
			}
			.submited-button {
				margin-top: 100rpx;
				margin-bottom: 100rpx;
			}
		}

	}
</style>
