<template>
	<view class="">
		<view id="header-id">
			<view class="header-content flex-y-center">
				<view class="flex-y-center header">
					<icon type="search" size="15" style="margin-right: 10rpx;"></icon>
					<input type="text" value="" @input="onInput" @confirm="search" confirm-type="search" placeholder="输入订单编号查询"  />
				</view>
			</view>
			<view class="tabs">
				<liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
			</view>
		</view>

		<view class="hg226"></view>

		<view class="home">
			<view class="box-pack-between total">
				<text class="price-color ft32">总计：¥{{total_money}}</text>
				<view class="total-right flex-y-center">
					<picker :range="type_arr" @change="bindCge">
						<view class="flex-y-center">
							{{type_arr[type_index]}}
							<image src="../static/images/san.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view style="height:100rpx;"></view>
			<no-none v-if='list.length<=0'></no-none>
			<block v-else>
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="box-pack-between top">
						<text>{{item.out_trade_no}}</text>
						<view class="flex-center stutas">
							<image :src="item.pay_type==1?pay_type:pay_type1" mode=""></image>
							{{item.order_status=='SUCCESS'?'支付成功':'未支付'}}
						</view>
					</view>
					<view class="text-color ft28 center">
						付款时间：<text>{{item.pay_time}}</text>
					</view>
					<view class="text-color ft28">
						付款金额：<text class="price-color ft28">{{item.pay_price}}</text>
					</view>
				</view>
				<loading :is_load="is_load" :is_load_more='is_load_more'></loading>
			</block>
		</view>

		<uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
			<view class="model">
				<view class="flex-y-center box-pack-between model-date">
					<view class="model-item " :class="act_index==1?'act':''">
						<picker mode='date' :value="start" :start="startDate" :end="endDate" @change="bindDateChange1" data-index="1">
							<view class="flex-center">
								<text>{{start}}</text>
							</view>
						</picker>
					</view>
					<text>至</text>
					<view class="model-item" :class="act_index2==2?'act':''">
						<picker mode='date' :value="end" :start="startDate" :end="endDate" @change="bindDateChange2" data-index="2">
							<view class="flex-center">
								<text>{{end}}</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="model-btn flex-center" @click="sure">
					确定
				</view>
			</view>
		</uni-popup-top>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
	export default {
		components: {
			uniPopupTop,
			liuyunoTabs
		},
		data() {
			return {
				tabs: [
					"今日",
					"昨日",
					"本周",
					"筛选"
				],
				defaultIndex: 0,
				startDate: "2020-10-01",
				endDate: "2030-10-01",
				start: "开始时间",
				end: "结束时间",
				act_index: 0,
				act_index2: 0,
				type_arr: [
					"全部", "微信", "支付宝",
				],
				type_index: 0,
				list: [],
				page: 1,
				is_load: false,
				is_load_more: false,
				total_money: 0,
				time: "",
				pay_type: "../static/images/wx.png",
				pay_type1: "../static/images/ali.png",
				keywords:"",
				top:"226rpx",
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': "226rpx",
					'left': 0,
					'right': 0,
					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
				},
			}
		},
		onLoad() {
			this.http();
		},
		onReady() {},
		onReachBottom() {
			console.log("dddd")
			if (!this.is_load) {
				this.page = this.page + 1;
				this.http();
			}
		},
		methods: {
			tabClick(e) {
				this.defaultIndex = e;
				if (e == 3) {
					this.$refs.popup.open();
					return
				} else {
					this.act_index = 0;
					this.act_index2 = 0;
					this.start = "开始时间";
					this.end = "结束时间";
					this.time = "";
					this.clear();
				}
				this.$refs.popup.close();
			},

			clear() {
				this.page = 1;
				this.list = [];
				this.http();
			},

			bindDateChange1(e) {
				this.act_index = e.currentTarget.dataset.index;
				this.start = e.target.value;
			},

			bindDateChange2(e) {
				this.act_index2 = e.currentTarget.dataset.index;
				this.end = e.target.value;
			},

			sure(e) {
				this.time = this.start + " - " + this.end;
				this.clear();
				this.$refs.popup.close();
			},

			bindCge(e) {
				console.log(e, "e")
				this.type_index = e.detail.value;
				this.clear();
			},
			search(e){
				this.keywords=e.detail.value;
				this.clear();
			},
			onInput(e)
			{	
				if(!e.detail.value){
					this.keywords="";
					this.clear();
				}
			},
			http() {
				let type = this.defaultIndex,
					pay_type = this.type_index;
				this.request({
					url: "user/getList",
					data: {
						token: uni.getStorageSync('token'),
						page: this.page,
						limit: 5,
						time: this.time,
						paytime: type == 0 ? "today" : type == 1 ? "yesterday" : type == 2 ? "week" : "",
						pay_type,
						keywords:this.keywords,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
					
						if (res.data.data.length == 0) {
							this.is_load = true,
								this.is_load_more = true,
								setTimeout(() => {
									this.is_load_more = false
								}, 1e3);
							return
						}
						
						this.total_money += res.data.total_money;
						this.is_load = false;
						this.list = this.list.concat(res.data.data);
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	$yellow: #FFA024;

	page {
		background: #F5F7FA;
	}

	#header-id {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	.hg226 {
		height: 226rpx;
	}

	.header-content {
		background: #FFFFFF;
		height: 126rpx;

		.header {
			width: 670rpx;
			height: 70rpx;
			opacity: 1;
			background: #f5f6f9;
			border-radius: 4rpx;
			font-size: 28rpx;
			padding: 0 30rpx;
			margin: 0 auto;
		}
	}

	.tabs {
		font-size: 32rpx;
	}

	.price-color {
		color: $yellow;
	}

	.text-color {
		color: #99A0AD
	}

	.home {
		width: 670rpx;
		margin: 0 auto;
		position: relative;

		.total {
			padding: 24rpx 0;
			position: fixed;
			width: 670rpx;
			background: #F5F7FA;
			z-index: 99;

			.total-right {
				font-size: 28rpx;
				color: #666666;

				image {
					width: 15rpx;
					height: 10rpx;
					margin-left: 10rpx;
				}
			}
		}

		.list {
			width: 670rpx;
			height: 227rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 8rpx;
			box-shadow: 0px 6rpx 10rpx 0px rgba(213, 213, 213, 0.04);
			margin: 0 auto;
			padding: 20rpx 32rpx;
			margin-bottom: 20rpx;

			.top {
				margin-bottom: 43rpx;
			}

			.center {
				margin-bottom: 22rpx;
			}

			.stutas {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.model {
		width: 100%;
		z-index: 155;
		background: #FFFFFF;
		padding-bottom: 20rpx;

		.model-date {
			width: 100%;
			padding: 20rpx 80rpx;
			border-bottom: 1rpx solid #F1F1F1;

			.model-item {
				width: 225rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
				position: relative;
				padding: 10rpx 0;
				text-align: center;
				border-radius: 8rpx;
				border: 1rpx solid #999;
			}

			.act {
				color: #FFFFFF;
				background: #FFBE2C;
				border: 1rpx solid #FFBE2C;
			}
		}

		.model-btn {
			text-align: center;
			color: #FFFFFF;
			height: 80rpx;
			border-radius: none;
			width: 80%;
			opacity: 1;
			background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
			border-radius: 8rpx;
			box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}
</style>
