<template>
	<view>
		<view class="select-date">
			<view class="caterer-user" v-if="order">取餐人：{{ order.nickname }}</view>
			<text>{{ deliveryTime }}</text>
		</view>
		<view class="order" v-if="canteenGoods.length > 0">
			<block>
				<view class="title">
					<text>食堂档口</text>
				</view>
				<view class="fenqi">
					<block v-for="(item,index) in canteenGoods" :key="index">
						<view class="item" v-if="item.totalNum > 0">
							<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">{{ item.comments }}</text>
								</view>
								<view class="goods-price">
									<text class="price">￥{{ item.goodsPrice }}</text>
									<text class="num"> x {{ item.totalNum }}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
		</view>
		<view class="order" v-if="entityGoods.length > 0">
			<block>
				<view class="title">
					<text>物品档口</text>
				</view>
				<view class="fenqi">
					<block v-for="(item,index) in entityGoods" :key="index">
						<view class="item" v-if="item.totalNum > 0">
							<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">{{ item.comments }}</text>
								</view>
								<view class="goods-price">
									<text class="price">￥{{ item.goodsPrice }}</text>
									<text class="num"> x {{ item.totalNum }}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
		</view>

		<!-- <empty v-if="canteenGoods.length == 0 && entityGoods.length == 0" tips="暂无信息" /> -->

		<view class="submit" v-if="canteenGoods.length > 0 || entityGoods.length > 0">
			<u-button type="success" :disabled="showQrCode" @click="verificationQrCode">确认核销</u-button>
		</view>

		<u-modal v-model="showQrCode" confirmText="取消" title="核销码">
			<view>
				<image :src="qrcode" class="qrcode"></image>
			</view>
		</u-modal>

		<u-calendar v-model="show" mode="date" :min-date="minDate" :max-date="maxDate" @change="changeDate">
		</u-calendar>
	</view>
</template>

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

	export default {
		components: {
			// Empty
			// Search
		},
		data() {
			return {
				totalPrice: 0,
				list: [],
				canteenGoods: [],
				entityGoods: [],
				order: null,
				orderId: null,
				orderNo: null,
				deliveryTime: null,
				record: {},
				minDate: dateFormat('YYYY-mm-dd', new Date()),
				maxDate: '2030-01-01',
				deliveryTime: dateFormat('YYYY-mm-dd',new Date()), // var startDate= new Date(new Date().toLocaleDateString());
				show: false,
				// 正在加载中
				isLoading: true,
				verification: false,
				// 当前选择的设备ID
				goodsId: null,
				agentUserId: null,
				catererUserId: null,
				catererUser: null,
				mode: 'range',
				month: 6,
				agree: true,
				price: {
					batteryRent: 300,
					batteryDeposit: 300,
					batteryInsurance: 0
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#51b2aa'
				},
				showQrCode: false,
				qrcode: ''

			}
		},
		onLoad(options) {
			this.options = options
			this.userId = options.userId
			this.dealerId = options.dealerId
			this.getUserInfo()
			this.getOrder()
		},
		onShow() {
			// this.getCatererUser()
		},
		methods: {
			// 跳转页面
			navTo(url) {
				uni.$u.route(url);
			},
			getUserInfo() {
				const { form } = this
				const app = this
				UserApi.getUser().then(res => {
					if( res.code == 0 && res.data.username != 'www') {
						app.userInfo = res.data
						res.data.roles.map(d => {
							if(d.roleCode == 'verification'){
								app.verification = true
							}
						})
					}
				})

			},
			getOrder() {
				const app = this
				const {
					deliveryTime,
					userId
				} = this

				// 核销订单查询
				OrderApi.getReceiptOrder({
					deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
					orderStatus: 10,
					userId
				}).then(res => {
					if (res.data) {
						if(res.code == 0 && res.data.length > 0){
							const goodsList = res.data[0].goodsList
							app.order = res.data[0]
							app.orderId = res.data[0].orderId
							app.orderNo = res.data[0].orderNo
							app.canteenGoods = []
							app.entityGoods = []
							app.list = goodsList.map(d => {
								if (d.gear == 10) {
									app.canteenGoods.push(d)
								}
								if (d.gear == 20) {
									app.entityGoods.push(d)
								}
							})
						}

					}
				})
			},
			// 核销
			verificationQrCode() {
				const app = this
				const { orderId, verification } = this
				console.log("verification: ",verification);
				if(verification == false){
					app.$error("没有核销权限")
					return false
				}
				OrderApi.verificationQrCode({
					orderId
				}).then(result => {
					app.$success(result.message)
					app.getOrder()
				})
			},
			// getCatererUser() {
			// 	const app = this
			// 	const catererUser = uni.getStorageSync('catererUser')
			// 	if (catererUser) {
			// 		app.catererUser = catererUser
			// 		app.catererUserId = catererUser.userId
			// 		app.agentUserId = catererUser.userId
			// 		app.getMyOrder()
			// 	}
			// },
			onClose() {
				this.showQrCode = false
			},
			onChangeStepper({
				value
			}) {
				this.month = value
			},
			change(e) {
				console.log(e);
			},
			openCalendar() {
				this.show = true
			},
			changeDate(date) {
				this.deliveryTime = date.result
				this.getMyOrder()
			},
			onInput(month) {
				this.month = month
			},
			onAgree() {
				this.agree = !this.agree
			},
			showXieyi() {
				this.$navTo('pages/help/xieyi')
			},
			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;
		}

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

					.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-around;

		.caterer-user {
			color: #ff0000;
		}

		.icon {
			margin-left: 10rpx;
		}
	}

	.on-buy {
		background-color: #804002;
	}

	.qrcode {
		margin: auto;
		display: flex;
		justify-content: center;
		width: 360rpx;
		height: 360rpx;
	}
</style>
