<!-- 提现记录 -->
<template>
	<!-- 记录卡片 -->
	<view>
		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">提现记录</tn-nav-bar>
		</view>
		<view class="z_tabs" :style="{marginTop: tobheight+'px'}"></view>
		<!-- 无提现记录 -->
		<view class="" v-if="withdrawList.length==0">
			<empty style="margin-top: 50%;"></empty>
		</view>

		<!-- 有提现记录 -->


		<view class="wallet-log-box u-p-b-30" v-else>
			<view class="log-list" v-for="(item,index) in withdrawList" :key="item.id" @click="toWithdrawRes(item)">
				<view class="head u-flex u-col-center u-row-between">
					<view class="title">{{item.title}}</view>
					<view class="num">{{item.amount}}元</view>
				</view>
				<view class="status-box item  u-flex u-col-center u-row-between">
					<view class="item-title">申请状态</view>
					<view class="status-text">
						{{item.status==0?'待审核':item.status==1?'审核通过':'已拒绝'}}
					</view>
				</view>
				<view v-if="item.status==2" class="status-box item  u-flex u-col-center u-row-between">
					<view class="item-title">拒绝原因</view>
					<view class="status-text" style="color: #c0c0c0;">
						{{item.feedback_reason }}
					</view>
				</view>

				<view class="" v-if="item.method==1">
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">开户行</text>
						<view class="time">{{item.bank_name }}</view>
					</view>
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">银行卡号</text>
						<view class="time">{{item.card_num }}</view>
					</view>
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">真实姓名</text>
						<view class="time">{{hideName(item.real_name) }}</view>
					</view>
				</view>

				<view class="" v-if="item.method==2">
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">微信二维码</text>
						<!-- <view class="time">{{item.wx_qrcode_url }}</view> -->
						<image @click.stop="preImg(item.wx_qrcode_url)" style="width: 80rpx;height: 80rpx;"
							:src="item.wx_qrcode_url" mode=""></image>
					</view>
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">真实姓名</text>
						<view class="time">{{hideName(item.real_name)}}</view>
					</view>
				</view>

				<view class="" v-if="item.method==3">
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">支付宝二维码</text>
						<image @click.stop="preImg(item.ali_qrcode_url)" style="width: 80rpx;height: 80rpx;"
							:src="item.ali_qrcode_url" mode=""></image>
					</view>
					<view class="time-box item  u-flex u-col-center u-row-between">
						<text class="item-title">真实姓名</text>
						<view class="time">{{hideName(item.real_name)}}</view>
					</view>
				</view>

				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">申请时间</text>
					<view class="time">{{item.created_at}}</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import {
		withdrawLog
	} from '@/api/my/index.js'

	import empty from '@/components/empty/empty.vue'
	export default {
		data() {
			return {
				isLoading: true,
				tobheight: 45,
				platform: this.$platform.get(),
				withdrawLog: [
					// {apply_type_text:'微信零钱',money:100,status:1,status_text:'已到账',apply_info:'51455454',apply_sn:'651515',charge_money:'0.8',createtime:'1676428876'},{apply_type_text:'微信零钱',money:100,status:1,status_text:'已到账',apply_info:'51455454',apply_sn:'651515',charge_money:'0.8',createtime:'1676428876'}
				],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				isEmpty: false,
				stausMap: {
					0: '#999',
					1: '#EFAF41',
					2: '#70C140',
					'-1': '#ED5B56'
				},


				withdrawList: []
			};
		},
		computed: {
			...mapGetters(['appInfo', 'isLogin', 'userInfo'])
		},
		filters: {


			applyInfoFilter: function(value) {
				if (!value) return '-';
				return Object.values(value).join(' | ');
			}
		},
		async onLoad() {
			let res = await withdrawLog()
			console.log('提现记录返回值', res);
			if (res.code == 0) {
				this.withdrawList = res.data.data
			}


			const that = this;
			// this.getLog();
		},
		// 触底加载更多
		// onReachBottom() {
		// 	if (this.currentPage < this.lastPage) {
		// 		this.currentPage += 1;
		// 		this.getLog();
		// 	}
		// },
		methods: {
			hideName(name) {
				let flag = ''
				for (let i = 0; i < name.length - 1; i++) {
					flag += '*'
				}
				return name[0] + flag
			},
			//点击预览图片
			preImg(item) {
				uni.previewImage({
					current: item,
					urls: [item], //存放图片的数组
					loop: true,
					indicator: 'default'
				})
			},
			toWithdrawRes(item) {
				getApp().withDrawRes = item
				uni.navigateTo({
					url: 'pages/user/withdrawRes/index'
				})
			},
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					limit: pageSize,
					// level: this.level,
				};
				this.$http('commission.cashoutLog', params).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						this.$refs.paging.complete(res.data.data);
						this.isLoading = false;
					}
				});
			},
			// 确认提交表单
			getLog() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('commission.cashoutLog', {
					// page: that.currentPage
				}).then(res => {
					if (res.code === 0) {
						that.withdrawLog = [...that.withdrawLog, ...res.data.data];
						that.isEmpty = !that.withdrawLog.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' :
							'nomore';
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 记录卡片
	.log-list {
		min-height: 213rpx;
		background: #ffffff;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
				color: #7063d2;
			}
		}

		.item {
			padding: 0 30rpx 10rpx;

			.item-icon {
				color: #c0c0c0;
				font-size: 36rpx;
				margin-right: 8rpx;
			}

			.item-title {
				width: 180rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}

			.status-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #05c3a1;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
		}
	}
</style>