<template>
	<view class="container">
		<view class="content-list">
			<view class="content-card">
				<view class="bank-info">
					<image src="@/static/img/bankCard.png" mode="widthFix" class="bank-card"></image>
					<view class="money-box">
						￥{{userInfo.accountBalance}}
					</view>
				</view>
				<view class="search-box">
					<view class="input-wrap">
						<u-input color="#fff" clearable placeholder="请输入提现金额"  maxlength="10" border="none"
							v-model="money">
							<template slot="suffix">
								<view class="withdrawal-all" @click="handleWithdrawalAll">提现全部</view>
							</template>
						</u-input>
					</view>
				</view>
				<view class="immediate-withdrawal" @click="handleWithdrawal">
					<view class="btn-box">立即提现</view>
				</view>
			</view>
			<view class="withdrawal-record">
				<view class="list-text">
					提现记录
				</view>
				<view class="select-box" @click="handleSelectDate(0)">
					{{selectDate}}
					<image src="@/static/img/select.png" mode="widthFix"
						class="select-img"></image>
				</view>
				<view class="select-box" @click="handleSelectDate(1)">
					{{endTimeDate}}
					<image src="@/static/img/select.png" mode="widthFix"
						class="select-img"></image>
				</view>
			</view>
			<view class="list-wrap">
				<z-paging ref="paging" :fixed="false" v-model="list" @query="getList" :auto="false">
					<view class="list-item" v-for="(item,index) in list" :key="index">
						<view class="list-top">
							<view class="list-top-left">提现-{{item.memberWithdrawNo}}</view>
							<view class="list-top-left">{{item.checkStatus==0?'审核中':item.checkStatus==1?'审核通过':item.checkStatus==2?'审核拒绝':''}}</view>
							
							<view class="list-top-right">-{{item.money}}</view>
							<view v-if="item.withdrawStatus!=1&&item.checkStatus==1" @click="hanldeStartWithdraw(item.memberWithdrawId)">
									<u-button type="primary" color="#FE42C2" text="确定" size="mini"></u-button>
							</view>
						</view>
						<view class="list-bottom">
							<view class="list-bottom-info">业绩总额：￥{{item.accountBalance}}</view>
							<view class="list-top-left">{{item.withdrawStatus==0?'提现中':item.withdrawStatus==1?'提现成功':item.withdrawStatus==2?'提现失败':''}}</view>
							<view class="list-bottom-info">{{item.createTime}}</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
		<u-datetime-picker @cancel="handleCancel" @confirm="handleConfirm" :formatter="formatter" :minDate="minDate"
			:maxDate="maxDate" :show="showSelectDate" v-model="dateInfo" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';

	export default {
		data() {
			return {
				money: '',
				selectDate: '选择开始日期',
				endTimeDate:'选择结束日期',
				showSelectDate: false,
				dateInfo: Number(new Date()),
				maxDate: Number(new Date()),
				minDate: '',
				list: [],
				userInfo:{},
				timeInfo:'',
				startTime:'',
				endTime:''
			}
		},
		onLoad() {
			this.getUserInfo()
			
		},
		onShow() {
			this.getList()
			this.init()
		},
		methods: {
			hanldeStartWithdraw(memberWithdrawId){
				console.log(memberWithdrawId)
				const params = {
					url: '/app/memberWithdraw/startWithdraw',
					method: "POST",
					data: {
						memberWithdrawId
					}
				}
				this.$request(params).then(res => {
							console.log(res,'参数')
							wx.requestMerchantTransfer({
							    mchId: '1701288257',
							    appId: 'wxb33442e062ef0995',
							    package:res.msg,
							    success: (res) => {
							      // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
							      console.log('success:', res);
								  uni.showToast({
								  	title: '提现成功',
								  	icon: 'none',
								  	duration: 2000 // 持续时间，单位ms
								  });
							    },
							    fail: (res) => {
									uni.showToast({
										title: '提现失败',
										icon: 'none',
										duration: 2000 // 持续时间，单位ms
									});
							      console.log('fail:', res);
							    }
				})
				})
			},
			getUserInfo() {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
			
					this.userInfo = res.data
				})
			},
			init() {
				let date = new Date()
				let year = date.getFullYear() - 2
				this.minDate = Number(new Date(`${year}-01-01`)
				);
			},
			handleWithdrawalAll(){
				this.money=this.userInfo.accountBalance
			},
			handleWithdrawal() {
				if (!this.money) {
					uni.showToast({
						title: '请先输入金额',
						icon: 'none',
						duration: 2000 // 持续时间，单位ms
					});
					return
				}
				if (this.money == 0) {
					uni.showToast({
						title: '提现金额不能为0元',
						icon: 'none',
						duration: 2000 // 持续时间，单位ms
					});
					this.money = ''
					return
				}
				if(Number(this.money)>Number(this.accountBalance)){
					uni.showToast({
						title: '提现金额不能超过业绩总额',
						icon: 'none',
						duration: 2000 // 持续时间，单位ms
					});
					this.money = ''
					return
				}
				this.applayWithdraw()
			},
			//提现金额
			applayWithdraw(){
				const params = {
					url: '/app/memberWithdraw/applayWithdraw',
					method: "POST",
					data: {
						money:this.money
					}
				}
				this.$request(params).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration: 2000 // 持续时间，单位ms
						});
						this.money=''
						this.getUserInfo()
						this.getList()
						this.init()
					}else{
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration: 2000 // 持续时间，单位ms
						});
					}
				})
			}, 
			// 获取列表
			getList(pageNo, pageSize) {
				const params = {
					url: '/app/memberWithdraw/searchMemberWithdrawPageList',
					method: "GET",
					data: {
						pageNum:pageNo || 1,
						pageSize:pageSize || 10,
						startTime:this.startTime,
						endTime:this.endTime
					}
				}
				this.$request(params).then(res => {
					if(res.code==200){
						this.list=res.rows
						this.$refs.paging.complete(this.list)
						
					}else{
						this.$refs.paging.complete([])
					}
				})
			},
			// 取消
			handleCancel() {
				if(this.timeInfo==0){
					this.showSelectDate = false
					this.selectDate = '选择开始日期'
					this.startTime=''
				}else{
					this.showSelectDate = false
					this.endTimeDate = '选择结束日期'
					this.endTime=''
				}
			
			},
			handleConfirm(info) {
				let { value } = info
				let res = this.getCurrentTime(value)
				if(this.timeInfo==0){
					this.selectDate = res
					this.startTime=res
				}else{
					
					
					if(!this.startTime){
						uni.showToast({
							title: '请先选择开始日期',
							icon: 'none',
							duration: 2000 // 持续时间，单位ms
						});
						this.showSelectDate = false
						return
					}
					this.endTimeDate = res
					this.endTime=res
					let startDate=new Date(this.startTime).getTime()
					let endDate=new Date(this.endTime).getTime()
					if(startDate>endDate){
						uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none',
							duration: 2000 // 持续时间，单位ms
						});
						this.endTimeDate='选择结束日期'
						this.endTime=''
						return
					}
					this.getList()
				}
				this.showSelectDate = false
			},
			getCurrentTime(time) {
				const date = new Date(time)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : (date.getMonth() + 1)
				const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
				const h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':'
				const m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes() + ':'
				const d = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
				return `${year}-${month}-${day}`
			},
			formatter(type, value) {
				if (type === "year") {
					return `${value}年`;
				}
				if (type === "month") {
					return `${value}月`;
				}
				if (type === "day") {
					return `${value}日`;
				}
				return value;
			},
			handleSelectDate(val) {
				this.timeInfo=val
				this.showSelectDate = true
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
	}

	.content-list {
		padding: 24rpx;
	}

	.content-card {
		background: #252525;
		border-radius: 20rpx;

	}

	.bank-info {
		position: relative;
	}

	.bank-card {
		width: 100%;
		position: relative;
	}

	.money-box {
		font-weight: 600;
		font-size: 52rpx;
		color: #6F7E3C;
		position: absolute;
		bottom: 65rpx;
		left: 50rpx;
		z-index: 99;
	}

	.search-box {
		padding: 48rpx 30rpx;
	}

	.suffix-box {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.input-wrap {
		background: #414141;
		border-radius: 10rpx;
		padding: 30rpx;
	}

	.withdrawal-all {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.immediate-withdrawal {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0 68rpx;
	}

	.btn-box {
		width: 60%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #91A54A;
		border-radius: 48rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.withdrawal-record {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
	}

	.list-text {
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.select-box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #878787;
		width: 263rpx;
		height: 74rpx;
		background: #414141;
		border-radius: 45rpx;
	}

	.select-img {
		width: 30rpx;
		height: 20rpx !important;
		margin-left: 20rpx;
	}

	.selectrotate {
		width: 30rpx;
		height: 20rpx !important;
		margin-left: 20rpx;
		transform: rotate(180deg);
		transition: 0.5s ease-in-out;
	}

	.list-wrap {
		height: 40vh;
	}

	.list-item {
		background: #252525;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.list-top {
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin-bottom: 20rpx;
	}

	.list-bottom {
		display: flex;
		justify-content: space-between;
	}

	.list-top-left {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.list-top-right {
		font-weight: 600;
		font-size: 32rpx;
		color: #FE42C2;
	}

	.list-bottom-info {
		font-weight: 400;
		font-size: 24rpx;
		color: #878787;
	}
</style>