<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">
			</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="orderList" @click="clickItem(item.goodsId,item.orderId)" v-for="(item, index) in dataList">
				<view class="order">
					<view class="orderId">订单号：{{item.orderNo}}</view>
					<view class="orderStatus">{{item.orderStatus == 2 ?'待核销':item.orderStatus == 6? "已结算": "已核销" }}
					</view>
				</view>
				<view class="orderItem">
					<view>
						<image class="img" :src="item.goodsImage"></image>
					</view>
					<view class="goodsInfo">
						<view class="orderGoodsName">{{item.goodsName}}</view>
						<view class="orderGoodsType">{{item.goodsType}}</view>
						<view class="price">
							<view class="orderPrice">￥{{item.goodsPrice}}</view>
							<view class="goodsNum">×{{item.goodsNum}}</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 @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>
		 -->

		<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>
	</view>
</template>

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



				dataList: [],
				pageNum: 1,
				total: 0,
				beginTime: "",
				endTime: "",
				field: "",
				goodsId: "",
				orderStatus: 2,
				list: [{
					id: 0,
					name: '待核销'
				}, {
					id: 1,
					name: '已结算'
				}, {
					id: 2,
					name: '已核销'
				}],

				curent: 0,
				isShowStartTime: false,
				isShowEndTime: false,
				minDate: Number(new Date()),
				currenTime: Number(new Date())
			}
		},
		onLoad(op) {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.staffId) {
				this.list = [{
					id: 2,
					name: '已核销'
				}]
			} else {
				this.list = [{
					id: 0,
					name: '待核销'
				}, {
					id: 1,
					name: '已结算'
				}, {
					id: 2,
					name: '已核销'
				}]
			}
			if (op.type) {
				this.getItem(op.type)
			} else {
				this.getOrderList();
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1,
				this.getOrderList()
		},
		onReachBottom() {
			console.log(this.total, this.dataList.length);
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getOrderList(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.getOrderList();
			},

			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;
			},
			clickItem(goodsId, orderId) {
				console.log(goodsId)
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?goodsId=' + goodsId + "&orderId=" + orderId
				})
			},
			getOrderList(flag) {
				this.$http.post("/api/store/personalCenter/orderList", {
					pageNum: this.pageNum,
					pageSize: '20',
					beginTime: this.beginTime,
					endTime: this.endTime,
					orderStatus: this.orderStatus,
					field: this.field
				}).then(res => {
					if (res.code == 200)
						console.log(res.data.rows)
					// this.dataList = res.data.rows

					this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
					this.total = res.data.total

				})
			},
			getItem(e) {
				this.curent = e
				if (this.curent == 0) {
					this.orderStatus = 2;
				} else if (this.curent == 1) {
					this.orderStatus = 6;
				} else {
					this.orderStatus = 3;
				}
				this.getOrderList()
				console.log(this.curent)
			}
		}
	}
</script>

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

	.orderList {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin-top: 20rpx;

		.orderItem {
			display: flex;
			padding-top: 10rpx;

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

			.goodsInfo {
				padding-left: 10rpx;
				flex: 1
			}

			.orderGoodsType {
				font-size: 24rpx;
				color: #999999;
			}

			.price {
				display: flex;
				justify-content: space-between;
				padding-top: 30rpx;

				.orderPrice {
					font-size: 32rpx;
					color: #FF4502;
					font-weight: 800;
				}

				.goodsNum {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.order {
			justify-content: space-between;
			display: flex;

			.orderId {
				font-size: 24rpx;
				color: #999999;
			}

			.orderStatus {
				font-size: 24rpx;
				color: #FF4502;
			}
		}

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

	.verified {
		padding-left: 55rpx;
	}

	.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;
	}
</style>