<template>
	<view class="bg">
		<view class="qrcode-box">
			<block>
				<view class="title line-align">
					<view>欢迎使用贵港自然资源云报餐系统</view>
				</view>
				<view class="qrcode" v-if="!qrcode">今日无报餐记录</view>
				<view class="qrcode">
					<image :src="qrcode"></image>
				</view>
			</block>
		</view>
		<view class="bottom">
			贵港自然资源局
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import storage from '@/utils/storage'
	import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
	import { pageAgentUser } from '@/api/apps-bc-agent.js'
	import { getSetting } from '@/api/setting.js'
	import { checkLogin } from '@/core/app.js'
	import * as UserRefereeApi from '@/api/user-referee.js'
	import * as OrderApi from '@/api/order.js'
	import * as UserApi from '@/api/user.js'
	import Empty from '@/components/empty'
	import { userId } from '@/config'

	export default {
		components: {
			// Search,
			Empty
		},
		data() {
			return {
				orderId: 0,
				qrcode: null
			}
		},
		onLoad() {

		},
		onShow() {
			// if(!checkLogin()){
			// 	return this.$navTo('pages/login/index')
			// }
			// 扫码取餐
			this.getFoodQrCode()
		},
		methods: {
			navTo(merchantId) {
				const navTo = uni.$u.route()
				navTo('pages/merchant/detail', {
					merchantId
				})
			},
			getFoodQrCode(){
				OrderApi.generateQrCode().then(res => {
					if(res.code == 0){
						this.qrcode = res.data
					}else{
						// this.qrcode = 'https://file.gxwebsoft.com/qrcode/' + uni.getStorageSync('userId') + '/payQrCode.jpg'
						this.$toast(res.message)
					}

				}).catch(err => {
					console.log("err: ",err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #67e7dd;
	}
	.bg {
		background-image: linear-gradient(#51b2aa, #67e7dd);
		height: calc(100vh - var(--window-top));
		padding: 70rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.bottom{
			height: 150rpx;
			font-size: 37rpx;
			color: #51b2aa;
			text-align: center;
			display: flex;
			justify-content: center;
		}
	}
	.qrcode-box{
		width: 660rpx;
		margin: auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		.title{
			padding: 12rpx 0;
			display: flex;
			justify-content: space-around;
			line-height: 80rpx;
			font-size: 34rpx;
			color: #51b2aa;
			.active{
				color: #51b2aa;
			}
		}
		.line-align{
			width: 580rpx;
			margin: auto;
			border-bottom: 1rpx solid #eeeeee;
		}
		.qrcode{
			padding-bottom: 20rpx;
			color: #666666;
			margin: 24rpx auto;
			display: flex;
			justify-content: center;
			image{
				width: 500rpx;
				height: 500rpx;
			}
		}
		.desc{
			color: blue;
			display: flex;
			text-align: center;
			justify-content: center;
			padding-bottom: 24rpx;
		}
		.user-list{
			width: 580rpx;
			margin: auto;
			display: flex;
			flex-direction: column;
			.item{
				border-bottom: 1rpx solid #eeeeee;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
				.info{
					.food{
						color: #ff0000;
						.goods-name{
							padding-right: 10rpx;
						}
					}
					.is-buy{
						color: #ff0000;
					}
					.no-buy{
						color: #0000ff;
					}
					.order-ok{
						color: #51b2aa;
					}
				}
				.time{
					color: #c2c2c2;
				}
				.remove{
					padding: 0 30rpx;
				}
			}
			.custom-style {
					margin: 10rpx 0;
					width: 220rpx;
				}
			.custom-active-style {
					margin: 10rpx 0;
					width: 220rpx;
					color: #ffffff;
					background-color: #51b2aa;
				}
		}
	}
</style>
