<template>
	<view class="container">
		<view class="select-date">
			<view class="arrow-left" @click="previous">
				<u-icon class="icon" name="arrow-left"></u-icon>
				<text>前一天</text>
			</view>
			<view class="agent-user" v-if="agentUser" @click="navTo('pages/menu/select-user/select-user')">
				<span>{{ agentUser.nickname }}</span>
				<u-icon class="icon" name="arrow-down-fill"></u-icon>
			</view>
			<view class="delivery-time" @click="openCalendar">
				<span>{{ deliveryTime }}</span>
				<u-icon class="calendar" name="calendar"></u-icon>
			</view>
			<view class="arrow-right" @click="next">
				<text>后一天</text>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<u-calendar v-model="show" mode="date" :default-date="minDate" :min-date="minDate" :max-date="maxDate"
				@change="changeDate"></u-calendar>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<!-- {{ new Date(deliveryTime).getTime() }} == {{ now }} -->
			<view class="order">
				<view class="title" v-if="item.categoryId == 25">
					<text>早餐</text>
					<view>
						<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
							@click="onCancel(item)">取消</u-button>
					</view>
				</view>
				<view class="title" v-if="item.categoryId == 26">
					<text>午餐</text>
					<view>
						<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
							@click="onCancel(item)">取消</u-button>
					</view>
				</view>
				<view class="title" v-if="item.categoryId == 27">
					<text>晚餐</text>
					<view>
						<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
							@click="onCancel(item)">取消</u-button>
					</view>
				</view>

				<view class="fenqi">
					<block>
						<view class="item">
							<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="goods-info">
								<view class="goods-name">
									<text class="name">{{ item.goodsName }}</text>
									<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
									<text class="selling-point" v-if="item.gear == 20">物品档口</text>
								</view>
								<view class="goods-price">
									<text class="price">￥{{ item.goodsPrice }}</text>
									<text class="num"> x {{ item.totalNum }}</text>
									<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</block>
		<!-- 临时报餐 -->
		<block v-if="temporary && !agentUser">
			<view class="order">
				<view class="title">
					<text>临时报餐</text>
				</view>

				<view class="fenqi">
					<block v-for="(item,index) in temporary.goodsList" :key="index">
						<view class="item">
							<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="goods-info">
								<view class="goods-name">
									<text class="name">{{ item.goodsName }}</text>
									<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
									<text class="selling-point" v-if="item.gear == 20">物品档口</text>
									<text class="selling-point" v-if="item.categoryId == 25">早餐</text>
									<text class="selling-point" v-if="item.categoryId == 26">午餐</text>
									<text class="selling-point" v-if="item.categoryId == 27">晚餐</text>
								</view>
								<view class="goods-price">
									<text class="price">￥{{ item.goodsPrice }}</text>
									<text class="num"> x {{ item.totalNum }}</text>
									<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</block>

		<empty v-if="list.length == 0" tips="暂无信息" />
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<!-- <u-tabbar v-model="current" :list="tabbar"></u-tabbar> -->
	</view>
</template>

<script>
	import {
		getUser
	} from '@/api/user.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	import {
		createOrderNo
	} from '@/utils/util.js'
	import store from '@/store';
	import Empty from '@/components/empty'
	import {
		payQuery
	} from '@/api/payment.js'
	import * as OrderApi from '@/api/order.js'
	import * as OrderGoodsApi from '@/api/order-goods.js'

	export default {
		components: {
			Empty
			// Search
		},
		data() {
			return {
				tabbar: [{
						iconPath: "static/tabbar/home.png",
						selectedIconPath: "static/tabbar/home-active.png",
						text: '首页',
						isDot: true,
						customIcon: true,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '报餐',
						customIcon: false,
					},
					// {
					// 	iconPath: "play-right",
					// 	selectedIconPath: "play-right-fill",
					// 	text: '消息',
					// 	customIcon: false,
					// },
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				disabled: false,
				totalPrice: 0,
				list: [],
				temporary: null,
				agentUserId: null,
				agentUser: null,
				canteenGoods: [],
				entityGoods: [],
				orderId: null,
				record: {},
				minDate: '2023-04-01',
				maxDate: dateFormat('YYYY-mm-dd', new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
					60 * 1000 * 7)),
				deliveryTime: dateFormat('YYYY-mm-dd',
					new Date()), // var startDate= new Date(new Date().toLocaleDateString());
				now: new Date().getTime(),
				daynow: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
				today: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
				show: false,
				dateFormat,
				// 正在加载中
				isLoading: true,
				// 当前选择的设备ID
				goodsId: null,
				mode: 'range',
				month: 6,
				agree: true,
				price: {
					batteryRent: 300,
					batteryDeposit: 300,
					batteryInsurance: 0
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#51b2aa'
				},
				isShowCancel: true

			}
		},
		onLoad(option) {
			const app = this
			app.orderId = option.orderId
			if (option.deliveryTime) {
				app.deliveryTime = option.deliveryTime
			}
		},
		onShow() {
			// 是否代理报餐
			this.getAgentUser()
			// 是否已下过单
			this.getMyOrder()
			this.isCancel()
			// 查询临时报餐明细
			this.getTemporaryFood()
		},
		methods: {
			isCancel() {
				const today = new Date().getTime()
				// console.log("this.isShowCancel: ",this.isShowCancel);
				// console.log(this.deliveryTime + '=========' + today);
				// console.log(Date.parse(this.deliveryTime) + '=======' + today);

				if (Date.parse(this.deliveryTime) <= today) {
					this.isShowCancel = false
				} else {
					this.isShowCancel = true
				}
			},
			isDisabled(item) {
				console.log("isDisabled: ", item);
			},
			getTemporaryFood() {
				const app = this
				const {
					deliveryTime
				} = this

				console.log("deldeliveryTime: ",deliveryTime);
				OrderApi.getTemporaryOrder({
					isTemporary: 1,
					deliveryTime
				}).then(res => {
					app.temporary = res.data
					console.log("res: ", res.data);
				}).catch(err => {
					console.log("err: ",err);
				})
			},
			// getToday(){
			// 	this.today = dateFormat('YYYY-mm-dd',new Date())
			// },
			// getOrder(){
			// 	const app = this
			// 	const { orderId } = this
			// 	OrderApi.getOrder(orderId).then(res => {
			// 		app.record = res.data
			// 		app.deliveryTime = dateFormat('YYYY-mm-dd',new Date(res.data.deliveryTime))
			// 		OrderGoodsApi.listOrder({orderId}).then(res => {
			// 			console.log("res.data: ",res.data);
			// 			app.list = [];
			// 			app.list = res.data.map(d => {
			// 			if(d.gear == 10){
			// 				app.canteenGoods.push(d)
			// 			}
			// 			if(d.gear == 20){
			// 				app.entityGoods.push(d)
			// 			}
			// 		})
			// 		})
			// 	})
			// },
			getAgentUser() {
				const app = this
				const agentUser = uni.getStorageSync('agentUser')
				if (agentUser) {
					app.agentUser = agentUser
					app.agentUserId = agentUser.userId
				}
			},
			getMyOrder() {
				const app = this
				const {
					orderId,
					deliveryTime,
					agentUserId
				} = this
				app.list = []
				// app.canteenGoods = [];
				// app.entityGoods = [];
				// 加载今天报餐明细
				OrderApi.getMyOrder({
					orderId,
					deliveryTime,
					agentUserId
				}).then(res => {
					if (res.data) {
						console.log("res.data: ", res.data.orderId);
						const goodsList = res.data.goodsList
						app.list = goodsList.filter(d => d.totalNum > 0)
						app.orderId = res.data.orderId
						// app.list = goodsList.map(d => {
						// 	if(d.gear == 10){
						// 		app.canteenGoods.push(d)
						// 	}
						// 	if(d.gear == 20){
						// 		app.entityGoods.push(d)
						// 	}
						// })
					}
				})
			},
			// 取消单个菜品
			onCancel(item) {
				console.log("item.orderGoodsId: ", item.orderGoodsId);
				OrderGoodsApi.cancelfood(item).then(res => {
					this.$toast(res.message)
					this.getAgentUser()
					// 是否已下过单
					this.getMyOrder()
				})
			},
			cancelOrder() {
				const {
					orderId
				} = this
				console.log("orderId: ", orderId);
				OrderApi.cancelOrder({
					orderId
				}).then(res => {
					this.$toast(res.message)
					this.getMyOrder()
				}).catch(err => {
					this.$toast(err.message)
				})
			},
			onChangeStepper({
				value
			}) {
				this.month = value
			},
			change(e) {
				console.log(e);
			},
			openCalendar() {
				this.show = true
			},
			changeDate(date) {
				this.deliveryTime = date.result
				this.getMyOrder()
				this.isCancel()
			},
			onInput(month) {
				this.month = month
			},
			onAgree() {
				this.agree = !this.agree
			},
			// 跳转页面
			navTo(url) {
				uni.$u.route(url);
			},
			showXieyi() {
				this.$navTo('pages/help/xieyi')
			},
			previous() {
				// 前一天
				this.today = this.today - 24 * 60 * 60 * 1000
				this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
				this.getAgentUser()
				this.getMyOrder()
				this.getTemporaryFood()
			},
			next() {
				// 后一天
				// console.log("this.today: ",this.today);
				this.today = this.today + 24 * 60 * 60 * 1000
				// console.log("this.today-------: ",this.today);
				this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
				// console.log("this.deliveryTime: ",this.deliveryTime);
				this.getAgentUser()
				this.getMyOrder()
				this.getTemporaryFood()
			},
			// 比较时间大小
			compare() {
				// 预定开始时间
				const deliveryTime = new Date(this.deliveryTime).getTime()
				// 今天开始时间
				const todayStartTime = new Date(dateFormat('YYYY-mm-dd', new Date(this.daynow))).getTime()
				if (todayStartTime > deliveryTime) {
					return true
				} else {
					return false
				}
			},
			copyCode(text) {
				// #ifndef H5
				console.log("text: ", text);
				uni.setClipboardData({
					text: text,
					success: (result) => {
						this.$success("复制成功")
					}
				})
				// #endif
				// #ifdef H5
				let textarea = document.createElement("textarea")
				textarea.value = text
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, info.length)
				uni.showToast({ //提示
					title: '复制成功'
				})
				result = document.execCommand("copy")
				textarea.remove()
				// #endif
			}

		}
	}
</script>

<style lang="scss" scoped>
	// .goods-info {
	// 	background-color: #ffffff;
	// 	border-radius: 12rpx;
	// 	width: 700rpx;
	// 	margin: 20rpx auto;

	// 	.goods {
	// 		padding: 20rpx;
	// 		display: flex;

	// 		image {
	// 			width: 220rpx;
	// 			height: 220rpx;
	// 			margin: 20rpx;
	// 		}

	// 		.info {
	// 			display: flex;
	// 			flex-direction: column;
	// 			padding: 20rpx;

	// 			.goods-name {
	// 				font-size: 34rpx;
	// 				margin-bottom: 10rpx;
	// 			}
	// 			.goods-desc {
	// 				font-size: 28rpx;
	// 				color: #999999;
	// 			}
	// 			.selling-point{
	// 				padding: 5px 0;
	// 				color: #e6760e;
	// 			}
	// 		}
	// 	}

	// 	.between-time {
	// 		width: 500rpx;
	// 		margin: auto;
	// 		padding-bottom: 20rpx;
	// 		text-align: center;

	// 		.select-slider {
	// 			line-height: 2em;
	// 			color: #e6760e;
	// 		}
	// 	}
	// }

	.order {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.title2 {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx;
			display: flex;
			color: #ff0000;
			justify-content: space-between;
		}

		.xieyi {
			padding: 20rpx;
			font-size: 26rpx;
		}
	}

	.submit {
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;
	}

	.xieyi-text {
		color: #0000ff;
	}

	.fenqi {
		padding: 30rpx;
		border-top: 1px solid #eee;

		.item {
			display: flex;
			padding: 20rpx 0;

			.image {
				width: 160rpx;
				height: 120rpx;
			}

			.goods-info {
				width: 460rpx;
				margin-left: 10rpx;
				display: flex;
				justify-content: space-between;

				.goods-name {
					text-align: left;
					display: flex;
					flex-direction: column;

					.name {
						font-weight: 500;
						max-width: 300rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.selling-point {
						max-width: 300rpx;
						color: #999999;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 1; //行数
						line-clamp: 1;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}
				}

				.goods-price {
					display: flex;
					flex-direction: column;

					.price {
						color: #ff0000;
						display: flex;
						justify-content: right;
					}

					.num {
						text-align: right;
						color: #cccccc;
					}
				}
			}

		}
	}

	.select-date {
		text-align: center;
		line-height: 2.4rem;
		background-color: #ffffff;
		border-bottom: 15rpx solid #f3f3f3;
		display: flex;
		justify-content: space-between;

		.agent-user {
			color: #ff0000;
		}

		.icon {
			font-size: 34rpx;
		}

		.arrow-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 20rpx;

			text {
				padding: 0 5px;
			}
		}

		.arrow-right {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 12rpx;

			text {
				padding: 0 5px;
			}
		}

		.delivery-time {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.calendar {
			margin: 0 5rpx;
		}
	}

	.on-buy {
		background-color: #804002;
	}
</style>
