<template>
	<view class="bg">
		<view class="qrcode-box">
			<block>
				<view class="title line-align">
					<view :class="qrcodeType == 0 ? 'active' : ''" @click="onChange(0)">取餐码</view>
					<view :class="qrcodeType == 1 ? 'active' : ''" @click="onChange(1)">邀请码</view>
				</view>
				<view class="qrcode">
					<image :src="qrcode"></image>
				</view>
				<text v-if="qrcodeType == 0" class="desc line-align">将此取餐码分享给微信好友，即可帮你取餐<br>（仅当日有效）</text>
				<text v-if="qrcodeType == 1" class="desc line-align">长按分享此码收集代取餐人员</text>
			</block>
			<block>
				<view class="title">共 {{ userRefereeList.length }} 人</view>
				<view class="user-list" v-if="qrcodeType == 1">
					<view class="item" v-for="(item,index) in userRefereeList" :key="index">
						<view class="info">
							<view class="nick-name">{{ item.nickname }}</view>
							<view class="time">{{ item.createTime }}</view>
						</view>
						<view class="action">
							<u-button shape="circle" type="error" size="mini" plain @click="onRemove(item.id)">移除</u-button>
						</view>
					</view>
					<view class="bottom"></view>
				</view>
				<view class="user-list" v-if="qrcodeType == 0">
					<view class="title line-align" style="padding-top: 10rpx;">
						<button :type="tongjiType == 0 ? 'primary' : ''" size="mini" @click="onChange2(0)">按人员统计</button>
						<button :type="tongjiType == 1? 'primary' : ''"  size="mini" @click="onChange2(1)">按菜品统计</button>
						<!-- <u-button size="medium" plain @click="onChange2(1)" class="custom-style" :class="tongjiType == 1 ? 'custom-active-style' : ''">按菜品统计</u-button> -->
					</view>
					<view class="item" v-for="(item,index) in userOrderList" :key="index">
						<view class="info">
							<view class="nick-name">{{ item.nickname }}</view>
								<!-- 按人员统计 -->
								<block v-if="tongjiType == 0">
									<span class="no-buy" v-if="item.order.length == 0">未报餐</span>
									<span class="order-ok" v-else-if="item.order[0].orderStatus == 30">已取餐</span>
									<span class="is-buy" v-else>已报餐</span>
								</block>
								<!-- 按菜品统计 -->
								<block v-if="tongjiType == 1 && item.order.length > 0">
									<block v-for="(goods,index) in item.order[0].goodsList">
										<span class="food">{{ index > 0 ? '、': '' }}</span>
										<span class="food" v-if="goods.deliveryStatus == 10">{{ goods.goodsName }}x{{ goods.totalNum }}</span>
										<span class="line-through" v-else>{{ goods.goodsName }}x{{ goods.totalNum }}</span>
									</block>
								</block>
						</view>
					</view>
					<view class="bottom"></view>
				</view>
			</block>
		</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 {
				options: null,
				title: '代他人取餐',
				// 正在加载中
				isLoading: false,
				// 是否授权了定位权限
				isAuthor: true,
				// 当前选择的门店ID
				selectedId: null,
				// 订单列表数据
				list: [],
				userRefereeList: [],
				userOrderList: [],
				qrcodeType: 0,   // 0邀请码 1取餐码
				tongjiType: 0,   // 统计类型 0按人员统计 1按菜品统计
				qrcode: ''
			}
		},
		onLoad(options) {
			this.options = options
			this.listUserReferee()
			this.addUserByQrCode()
			this.getOthersOrder()
			this.getMyQrCode()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			navTo(merchantId) {
				const navTo = uni.$u.route()
				navTo('pages/merchant/detail', {
					merchantId
				})
			},
			getUserInfo(){
				if(!uni.setStorageSync('userId')){
					this.$error('请先登录',() => {
						this.$navTo('pages/login/index')
					})
				}
			},
			getMyQrCode(){
				const app = this
				const { qrcodeType } = this
				const userId = uni.getStorageSync('userId')

				// 取餐码 二维码内容 dqc:代取餐人ID
				if(qrcodeType == 0){
					UserApi.getMyQrCode({
						codeContent: 'dqc:' + userId
					}).then(res => {
						app.qrcode = res.data
					})
				}
				// 邀请码 二维码内容 跳转到带有推荐人ID的网址完成绑定关系
				if(qrcodeType == 1){
					UserApi.getMyQrCode({
							codeContent: 'http://apps.gxwebsoft.com/baocan/#/pages/order/delivery/others?userId=' + userId,
						}).then(res => {
						app.qrcode = res.data
					})
				}
			},
			// 切换类型
			onChange(index){
				this.qrcodeType = index
				this.getMyQrCode()
				this.getOthersOrder()
			},
			// 切换类型
			onChange2(index){
				this.tongjiType = index
				this.getOthersOrder()
			},
			// 查询推荐关系列表
			listUserReferee(){
				const app = this
				const dealerId = uni.getStorageSync('userId')
				UserRefereeApi.listUserReferee({dealerId}).then(res => {
					app.userRefereeList = res.data
				})
			},
			// 查询代取餐人员的订单信息
			getOthersOrder(){
				OrderApi.getOthersOrder().then(resp => {
					console.log("resp: ",resp);
					this.userOrderList = resp.data
				})
			},
			addUserByQrCode(){
				const app = this
				const { userId } = app.options
				const dealerId = uni.getStorageSync('userId')
				if(userId && userId != Number(dealerId)){
					app.qrcodeType = 1
					UserRefereeApi.addUserReferee({
						dealerId,
						userId
					}).then(res => {
						app.$toast(res.message)
						app.listUserReferee()
					})
				}
			},
			onRemove(id){
				const app = this
				UserRefereeApi.removeUserReferee(id).then(()=>{
					app.$toast('移除成功')
					app.listUserReferee()
				})
			}

			// onAgentBaocan(user){
			// 	console.log("user收拾收拾: ",user);
			// 	uni.setStorageSync('catererUser',user)
			// 	this.$navTo('pages/order/get-food/get-food')
			// },

			// clearAgentBaocan(){
			// 	uni.removeStorageSync('catererUser')
			// 	this.$navTo('pages/order/get-food/get-food')
			// }
		}
	}
</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;
	}
	.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: #999999;
			.active{
				color: #51b2aa;
			}
		}
		.line-align{
			width: 580rpx;
			margin: auto;
			border-bottom: 1rpx solid #eeeeee;
		}
		.qrcode{
			padding-bottom: 0rpx;
			margin: auto;
			display: flex;
			justify-content: center;
			image{
				width: 360rpx;
				height: 360rpx;
			}
		}
		.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;
						}
					}
					.line-through{
						text-decoration: line-through;
						color: #666666;
						.goods-name{
							padding-right: 10rpx;
						}
					}
					.is-buy{
						color: #ff0000;
					}
					.no-buy{
						color: #0000ff;
					}
					.order-ok{
						color: #51b2aa;
					}
				}
				.time{
					color: #c2c2c2;
				}
				.remove{
					padding: 0 30rpx;
				}
			}
			.bottom{
				height: 50rpx;
			}
			.custom-style {
					margin: 10rpx 0;
					width: 220rpx;
				}
			.custom-active-style {
					margin: 10rpx 0;
					width: 220rpx;
					color: #ffffff;
					background-color: #51b2aa;
				}
		}
	}
</style>
