<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">订单管理</view>
			</view>
		</u-navbar>
		<view class="search">
			<u-search placeholder="搜索订单号、车牌号、顾客姓名等..." :showAction="false" @search="search" bgColor="#FAF7F6"
				:animation="false" v-model="field">
			</u-search>
		</view>
		<view class="search_filter">
			<view class="filter" @click="isShowStartTime = true">
				<view>
					<view class="txt">{{(beginTime && endTime)?(beginTime +' - ' +endTime):'开始时间-结束时间'}}</view>
					<!-- <text
						@click="startshow = true">{{timestampToYMD(startvalue)?timestampToYMD(startvalue):'开始时间'}}</text>
					-
					<text @click="endshow = true">{{timestampToYMD(endvalue)?timestampToYMD(endvalue):'结束时间'}}</text> -->
				</view>
				<u-icon name="calendar" size="28"></u-icon>
				<!-- <image class="img" src="../../static/tabar/ic_edit.png"></image> -->
			</view>
			<view class="tvfilter" @click="filterfn">筛选</view>
		</view>



		<view class="tab">
			<view class="gxflex">
				<view class="item" :class="{active:curent ==item.id}" v-for="(item,index) in list" :key="index"
					@click="getItem(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="bgMains">
			<view class="afterSelesList" @click="afterSeles(item.id)" v-for="(item,index) in dataList">

				<view class="afterItem">
					<view class="afterinfo">
						<view>
							<image class="img" :src="item.goodsImage"></image>
						</view>
						<view class="goodsInfo">
							<view class="title">{{item.goodsName}}</view>

							<view class="price">
								<view class="currentPrice">￥{{item.actualAmount}}</view>
								<view class="originalPrice">￥{{item.orderAmount}}</view>
							</view>
						</view>
					</view>
					<view class="left">
						<view class="state">{{item.status==1?"待处理":item.status==2?"已处理":"已取消"}}</view>
						<view></view>
					</view>
				</view>
			</view>
			<view v-if="dataList.length == 0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</view>
		</view>

		<u-datetime-picker v-model="currenTime" title="选择开始时间" @close="closeIsShow" @cancel="closeIsShow"
			@confirm="confirmStart" ref="datetimePicker" :show="isShowStartTime" :maxDate="minDate" mode="date"
			:formatter="formatter"></u-datetime-picker>
		<u-datetime-picker v-model="currenTime" title="选择结束时间" @close="closeIsShow" @cancel="closeIsShow"
			@confirm="confirmEnd" ref="datetimePicker" :show="isShowEndTime" :maxDate="minDate" mode="date"
			:formatter="formatter"></u-datetime-picker>
		<!-- <u-datetime-picker @confirm="startconf" :show="startshow" v-model="startvalue" mode="date"></u-datetime-picker>
		
		<u-datetime-picker @confirm="endconf" :show="endshow" v-model="endvalue" mode="date"></u-datetime-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startshow: false,
				endshow: false,
				startvalue: "",
				endvalue: "",

				dataList: [],
				pageNum: 1,
				total: 0,
				beginTime: "",
				endTime: "",
				field: "",
				status: 1,
				id: '',
				list: [{
					id: 1,
					name: "待处理"
				}, {
					id: 2,
					name: '已处理'
				}, {
					id: 3,
					name: '已取消'
				}],
				curent: 1,
				isShowStartTime: false,
				isShowEndTime: false,
				minDate: Number(new Date()),
				currenTime: Number(new Date())
			}
		},
		onLoad() {
			this.getAfterSalesOrderList();
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getAfterSalesOrderList()
		},
		onReachBottom() {
			console.log(this.total, this.dataList.length);
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getAfterSalesOrderList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			closeIsShow() {
				this.isShowStartTime = false
				this.isShowEndTime = false
			},

			confirmStart(e) {
				this.beginTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.isShowStartTime = false
				this.isShowEndTime = true
				// this.closeIsShow()
			},

			confirmEnd(e) {
				this.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.closeIsShow()
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

			filterfn() {
				this.pageNum = 1;
				this.getAfterSalesOrderList();
			},
			timestampToYMD(timestamp) {
				if (timestamp == "") {
					return ""
				}
				const date = new Date(timestamp); // 将时间戳转换成毫秒
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`;
			},
			startconf(e) {
				console.log(e)
				console.log(this.timestampToYMD(e.value))
				// this.startvalue = this.timestampToYMD(e.value);
				this.startshow = false;
			},
			endconf(e) {
				console.log(e)
				console.log(this.timestampToYMD(e.value))
				// this.endvalue = this.timestampToYMD(e.value);
				this.endshow = false;
			},
			afterSeles(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/afterSalesOrder/afterSalesDetails?id=' + id
				})
			},

			getAfterSalesOrderList(flag) {
				this.$http.post("/api/store/personalCenter/afterSalesOrderList", {
					pageNum: this.pageNum,
					pageSize: '20',
					beginTime: this.beginTime,
					endTime: this.endTime,
					status: this.status,
					field: this.field
				}).then(res => {
					if (res.code == 200)
						console.log(res.data.rows)
					this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
					this.total = res.data.total

				})
			},
			getItem(e) {
				// 1-待处理 2-已退款 3-已拒绝
				this.curent = e
				this.status = this.curent;

				this.getAfterSalesOrderList()

			},
			//搜
			search() {
				this.getAfterSalesOrderList()
			}
		}
	}
</script>

<style lang="scss">
	.bgMains {
		background: #f9f6f4;
		padding: 20rpx;
		min-height: 100vh;
	}
	
	.afterSelesList {

		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.afterItem {
			display: flex;
			justify-content: space-between;
			padding: 24rpx;

			.left {
				text-align: right;
				font-size: 24rpx;
				color: #999999;

				position: relative;

				.state {
					top: 0%;
				}

				.team {
					padding-top: 36rpx;
					padding-bottom: 27rpx;
				}
			}

			.afterinfo {
				display: flex;

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

				.goodsInfo {
					padding-left: 10rpx;

					.price {
						display: flex;
						padding-top: 15rpx;

						.currentPrice {
							font-size: 28rpx;
							color: #FF4502;
							font-weight: 800;
						}

						.originalPrice {
							text-decoration-line: line-through;
							font-size: 24rpx;
							padding-left: 5rpx;
							color: #999999;

						}
					}

					.num {
						padding-top: 13rpx;
						display: flex;

						.teamSize {
							font-weight: 400;
							font-size: 24rpx;
						}

						.number {
							color: #A8A8A8;
							padding-left: 5rpx;
							font-size: 24rpx
						}
					}
				}
			}

		}

		.img {
			width: 156rpx;
			height: 156rpx;
		}
	}

	.tab {
		padding-top: 25rpx;
		font-size: 32rpx;
		color: #999999;
		padding-bottom: 20rpx;
		display: flex;
		padding-left: 25rpx;

		.gxflex {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.item {
			background: #FFFFFF;
			text-align: center;
			padding-left: 30rpx;
		}

		.active {
			background: #FFFFFF;
			color: #FF4502 !important;
		}
	}

	.search_filter {
		text-align: center;
		display: flex;
		padding-left: 24rpx;

		.tvfilter {
			font-size: 28rpx;
			color: #FF4502;
			padding-left: 30rpx;
			padding-top: 20rpx;
		}

		.filter {
			padding: 15rpx;
			justify-content: space-between;
			display: flex;
			background: #FAF7F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 28rpx;
			color: #999999;
			width: 600rpx;
			display: flex;
			align-items: center;

			.img {
				width: 32rpx;
				height: 32rpx;
				text-align: center;
			}
		}
	}

	.search {
		padding: 24rpx;
	}

	.verified {
		padding-left: 55rpx;
	}
</style>