<template>
	<view class="content">
		<u-navbar :is-back="false" title="云食堂" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<!-- <u-icon name="camera-fill" color="#000000" size="48"></u-icon> -->
				</view>
			</view>
		</u-navbar>
		<u-grid :col="3" :border="false">
			<u-grid-item @click="onPay">
				<image src="/static/booking.png" class="img-icon"></image>
				<view class="grid-text">预定</view>
			</u-grid-item>
			<u-grid-item @click="onStore">
				<image src="/static/shoping.png" class="img-icon"></image>
				<view class="grid-text">消费</view>
			</u-grid-item>
			<u-grid-item @click="onMenu">
				<image src="/static/menu.png" class="img-icon"></image>
				<!-- <u-icon name="hourglass" :size="46"></u-icon> -->
				<view class="grid-text">菜单</view>
			</u-grid-item>
		</u-grid>
		<!-- <view class="text-area">
			<text class="title">
				云食堂 ~ 每天都有新滋味
			</text>
		</view> -->
		<view v-show="jcTitle" class="u-text-left " style="color:#F36835;height:30px;text-align: left;">
		    <text>{{jcTitle}}</text>
		</view>
		<view class="meal-qrcode-panel">
			<view class="codeLine">
				<view class="prompt-container" v-if="prompt.hidden==5">
					<view class="prompt-message">
						<image class="prompt-icon" src="/static/bg1.jpg" style="width:205px;height:205px;margin-bottom:40rpx;"></image>
						<view class="prompt-title" style="color:#F6835B;font-size:19px;">明天见！</view>
					</view>
				</view>
				<view class="prompt-container" v-if="prompt.hidden==1">
					<view class="prompt-message">
						<image class="prompt-icon" src="/static/bg0.jpg" style="width:205px;height:205px;margin-bottom:40rpx;"></image>
						<view class="prompt-title" style="color:#F6835B;font-size:14px;">未找到当前食堂的合适订单</view>
						<view class="prompt-title" style="color:#F6835B;font-size:19px;">请预定!</view>
					</view>
				</view>
				<view class="prompt-container" v-if="prompt.hidden==2">
					<view class="prompt-message">
						<image class="prompt-icon" src="/static/bg3.jpg" style="width:205px;height:205px;margin-bottom:40rpx;"></image>
						<view class="prompt-title" style="color:#F6835B;font-size:14px;">当前已有订单</view>
						<view class="prompt-title" style="color:#F6835B;font-size:19px;">请等待就餐！</view>
					</view>
				</view>
				<view class="prompt-container" v-if="prompt.hidden==3">
					<view class="prompt-message">
						<image class="prompt-icon" src="/static/bg2.jpg" style="width:205px;height:205px;margin-bottom:40rpx;"></image>
						<view class="prompt-title" style="color:#F6835B;font-size:14px;">未找到当前食堂的合适订单</view>
						<view class="prompt-title" style="color:#F6835B;font-size:19px;">请下单！</view>
					</view>
				</view>
				<view class="img-box" v-if="prompt.hidden==4">
					<tki-qrcode  cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
					<view class="weui-cell__ft meal-hd" v-if="codeHide==1">
						<span class="meal-title">{{number}}份</span>
						<span class="meal-money">¥ {{money}}</span>
					</view>
					<view style="text-align:center;box-sizing:border-box;padding-top:100rpx" v-if="codeHide==2">
						<view>
							<icon size="150" type="success"></icon>
						</view>
						<view style="margin-top:20rpx;">消费成功</view>
					</view>
				</view>
			</view>
		</view>	
		<view class="canteen-select">
			<view class="u-text-left u-margin-left-10"   style="width: 200rpx;" @click="isShow=true">
				<u-icon name="arrow-down-fill" color="#2979ff" size="28"></u-icon>
				<text class="u-tips-color">{{selCanteen?selCanteen.label:'请选择食堂'}}</text>
			</view>
			<!-- <button 买</button> -->
			<u-button type="primary" @click="getVesValue" :custom-style="payOnLine" :disabled="payOnLineHide">买</u-button>
			<text class="u-tips-color">当前余额：<text style="color:orange;font-weight:700;">{{balance}}</text></text>
			<u-select v-model="isShow" :list="canteenOptions" @confirm="confirm" :default-value="defVal"></u-select>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {tkiQrcode},
		data() {
			return {
				isShow: false,
				//食堂列表
				canteenList:[],
				//食堂选项
				canteenOptions: [], 
				//选中食堂
				selCanteen: {},
				balance: 0,
				//默认选择
				defVal:[],
				//餐类型
				mealTypeObj:{},
				//左上角标题
				jcTitle:"",
				//买按钮
				payOnLineHide:true,
				payOnLine: {
					height: '130rpx',
					width:'130rpx',
					color: '#fff',
					borderRadius: '50% 50%',
					fontSize: '52rpx'
				},
				prompt: {
					hidden: 5
				},
				codeHide: 1,
				number: 1,
				money: 20,
				val: '二维码', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'px', // 单位
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onShow() {
			this.$u.api.getCanteenList().then(({data}) => {
				this.canteenList = data;	
				this.canteenOptions = data.map((item,index) => {
					let {canteen} = item;
					return {value:index,label:canteen.canteenName}
				})
				this.defVal=[0];
				this.selCanteen = this.canteenOptions[0];
				this.getMealType();
				this.ifMelType();
				
				//处理食堂信息,存入缓存
				let canteenObj = {};
				let canteens = {};
				data.map((item) => {
					canteenObj[item.canteen.id] = item.canteen.canteenName;
					canteens[[item.canteen.id]] =item;
				})
				
				uni.setStorageSync('canteenObj', canteenObj);
				uni.setStorageSync('canteens',canteens);
			})
			
			this.$u.api.getBalance().then(({data}) => {
				this.balance = data;
			})
			
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function (res) {
					_this.size = res.windowWidth / (680 / 580);
					//获取屏幕宽度
					console.log(_this.size);
				}
			});
		},
		methods: {
			confirm(e){
				this.selCanteen = e[0];
				//获取食堂所属的餐类型
				this.getMealType();
				//经营时间判断
				this.ifMelType();
				console.log(">>>",this.selCanteen);
			},
			onStore(){
				this.$u.route('/pages/store/store');
			},
			onMenu(){
				this.$u.route('/pages/menu/index');
			},
			onLogin(){
				this.$u.route('/pages/login'); 
			},
			onPay() {
				this.$u.route('/pages/pay/pay');
			},
			//获取餐类型，重置数据结构
			getMealType(){
				this.$u.api.getMealType({"canteenId":this.canteenList[this.selCanteen.value].canteen.id}).then(({data}) => {
					//this.mealTypeObj
					//{"zao":"早餐","zhone":"中餐","xia":"下午茶","wan":"晚餐"} 
					data.map(item => {
						this.mealTypeObj[item.dictValue] = item.dictLabel;
					})
					//存入缓存
					uni.setStorageSync('mealTypeList', data);
					
				})
			},
			//计算当前时间为哪个餐类型的时间
			ifMelType(){
				//重设标题
				this.jcTitle ="";
				this.payOnLineHide =true;
				//当前时间
				let currentTime = new Date();
				let currenthM = this.$u.timeFormat(currentTime, 'hh:MM').split(":");
				
				let canteenTime = this.canteenList[this.selCanteen.value].canteenTime;
				for(const key in canteenTime){
					let timeObj = canteenTime[key];
					let a = timeObj.startTime.split(":");
					let b = timeObj.stopTime.split(":");
					//console.log(a+","+b);
					//console.log("开始时分",currentTime.setHours(currenthM[0],currenthM[1])<currentTime.setHours(a[0],a[1]));
					//console.log("结束时分",currentTime.setHours(currenthM[0],currenthM[1])<currentTime.setHours(b[0],b[1]));
					if(currentTime.setHours(currenthM[0],currenthM[1])>currentTime.setHours(a[0],a[1]) && currentTime.setHours(currenthM[0],currenthM[1])<currentTime.setHours(b[0],b[1])){
						console.log("判断进入");
						this.jcTitle = this.mealTypeObj[key];
						this.payOnLineHide=false;
						break;
					}
				}
			},
			//买
			getVesValue(){
				this.payOnLineHide = true;
				this.prompt.hidden=4;
				setTimeout(() => {
					this.$refs.qrcode._makeCode();
				}, 100);
			},
			qrR(res) {
				this.src = res
			},
		}
	}

</script>

<style lang="scss" scoped>
	.img-icon {
		width: 60rpx;
		height: 60rpx;
		// position: absolute;
		// top: 14rpx;
		// right: 40rpx;
		// width: 30rpx;
		// height: 30rpx;
	}
	
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 19rpx;
	}
	.text-area {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}
	.meal-qrcode-panel {
	    height: 750rpx;
	}
	
	.prompt-container {
	    display: flex;
	    height: 100%;
	    width: 100%;
	    align-items: center;
	    justify-content: center;
	    color: #939393;
	}
	
	.prompt-message {
	    margin-top: 0;
	    text-align: center;
	}
	
	.canteen-select {
		height: 70rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 25rpx;
	}
	.canteen-select text {
	    width: 244rpx;
	}
	
	.weui-cell__currenMealTime {
	    text-align: left;
	    margin-left: 15rpx;
	    font-size: 19px;
	    font-weight: bold;
	    position: relative;
	}

	.codeLine {
	    border: 0px solid #ddd;
	    margin: 20rpx 40rpx;
	    margin-bottom: 0rpx;
	    border-radius: 6px;
	    height: 94%;
	    position: relative;
	}
	.meal-title {
	    font-size: 30rpx;
	    color: #020202;
	    font-weight: 500;
	}
	
	.meal-hd {
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
	}
	
	.meal-hd .meal-money {
	    margin: 0 25rpx 0 24rpx;
	}
	
	.meal-money {
	    font-size: 32rpx;
	    color: #F46837;
	}
</style>
