<template>
	<view class="page">
		<u-navbar title="提现详情" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="listxq">
				<view class="nav">
					<text class="shen">提现单号</text><text
						class="qian">{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}</text>
				</view>
				<view class="nav">
					<text class="shen">订单状态</text>
					<text class="qian" v-if="detailobj.status == 11">
						审核中
					</text>
					<text class="qian" v-if="detailobj.status == 12">
						审核通过
					</text>
					<text class="qian" v-if="detailobj.status == 13">
						已拒绝
					</text>
					<text class="qian" v-if="detailobj.status == 14">
						已打款
					</text>
					<text class="qian" v-if="detailobj.status == 15">
						打款失败
					</text>
					<text class="qian" v-if="detailobj.status == 16">
						打款中
					</text>
				</view> 
				<view class="nav">
					<text class="shen">提现金额</text><text
						class="qian">{{detailobj.money == undefined ? '--' : '¥' + detailobj.money}}</text>
				</view>
				<view class="nav">
					<text class="shen">手续费</text><text
						class="qian">{{detailobj.serviceCharge == undefined ? '--' : '¥' + detailobj.serviceCharge}}</text>
				</view>
				<view class="nav">
					<text class="shen">实际金额</text><text
						class="qian">{{detailobj.arrivalAmount == undefined ? '--' : '¥' + detailobj.arrivalAmount}}</text>
				</view>
				<view class="nav">
					<text class="shen">剩余金额</text><text
						class="qian">{{detailobj.afterBalance == undefined ? '--' : '¥' + detailobj.afterBalance}}</text>
				</view>
				<view class="nav">
					<text class="shen">提现方式</text><text class="qian">{{detailobj.channelName}}</text>
				</view>
				<view class="nav">
					<text class="shen">申请时间</text><text
						class="qian">{{detailobj.createTime == undefined ? '--' : detailobj.createTime}}</text>
				</view>
				<view class="nav">
					<text class="shen">打款时间</text><text
						class="qian">{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}</text>
				</view>
				<view class="nav">
					<text class="shen">打款方式</text><text
						class="qian">{{detailobj.withdrawType == 1 ? '线上' : '线下'}}</text>
				</view>
				<view class="nav" v-if="detailobj.payPicture">
					<text class="shen" style="padding-top: 40rpx;box-sizing: border-box;">支付凭证</text>
					<view class="">
						<view class="" v-for="(item,index) in imglist" :key="index" @click="clickImg(index)">
							<image style="width: 300rpx;height: 400rpx;" :src="item" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				billId: '',
				detailobj: {},
				imgad: '',
				maskflag: false,
				inptext: '',
				userType: {},
				userflag: false,
				imglist: []
			}
		},
		onLoad(option) {
			// console.log(uni.getStorageSync('userType'))
			this.userType = uni.getStorageSync('userType')
			if (option.billId) {
				this.billId = option.billId
				this.getlist()
			}
		},
		// 分享到好友(会话)
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			clickImg(index) {
				uni.previewImage({
					urls: this.imglist, //需要预览的图片http链接列表,多张
					current: index, // 当前显示图片的http链接,默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			getlist() {
				this.$u.get(`/mch/withdraw/${this.billId}`).then((res) => {
					if (res.code == 200) {
						this.detailobj = res.data
						if (this.detailobj.payPicture != null) {
							this.imglist = this.detailobj.payPicture.split(',')
						}
						if (res.data.mchId == this.userType.userId) {
							this.userflag = true
						} else {
							this.userflag = false
						}
						// console.log(res.data.mchId ,this.userType.userId);
					}
				})
			},
			btnad() {
				this.$u.get("/app/ad").then((res) => {
					if (res.code == 200) {
						if (res.data.urlType == 1) {
							uni.navigateTo({
								url: '/page_fenbao/webview?url=' + res.data.url
							})
						} else {
							uni.navigateTo({
								url: '/' + res.data.url
							})
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		// padding-bottom: 22rpx;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #000;
		opacity: .6;
	}

	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		// position: fixed;
		// top: 0;
		// left: 0;

		.tanc {
			width: 594rpx;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 506rpx;
			z-index: 98;

			.anniu {
				display: flex;
				justify-content: space-between;
				padding: 0 44rpx;
				box-sizing: border-box;
				margin-top: 64rpx;
				width: 100%;

				.qux {
					width: 234rpx;
					height: 80rpx;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 2rpx solid #8883F0;
					font-size: 36rpx;
					color: #8883F0;
					text-align: center;
					line-height: 80rpx;
				}

				.qd {
					width: 234rpx;
					height: 80rpx;
					background: #8883F0;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.shuzhi {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				justify-content: center;
				// padding:  0 60rpx;
				margin-top: 50rpx;
				box-sizing: border-box;

				input {
					width: 500rpx;
					height: 76rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #808080;
					padding-left: 10rpx;
					box-sizing: border-box;
					margin: 0 10rpx;
					z-index: 99 !important;
				}
			}

			.top {
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				width: 100%;
				text-align: center;
				padding-top: 40rpx;
				box-sizing: border-box;
			}

			image {
				width: 198rpx;
				height: 172rpx;
				position: absolute;
				top: 12rpx;
				right: 20rpx;
				opacity: .5;
			}
		}

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 24rpx;
			overflow: scroll;
			padding-bottom: 100rpx;
			box-sizing: border-box;

			.pic {
				width: 680rpx;
				height: 238rpx;
				margin: auto;
				margin-top: 36rpx;
				border-radius: 30rpx;
			}

			.listxq {
				width: 680rpx;
				// max-height: 100%; 
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;
				padding: 32rpx 24rpx;
				box-sizing: border-box;

				.nav {
					display: flex;
					justify-content: space-between;
					margin-top: 26rpx;

					.shen {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.qian {
						font-size: 26rpx;
						color: #808080;
					}
				}

				.xian {
					width: 630rpx;
					box-sizing: border-box;
					height: 1px;
					margin: auto;
					background-color: #F3F3F3;
					margin-top: 48rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>