<template>
	<view class="content">
		<my-baseNar v-show="role_id == 1" />
		<!-- 直购码 -->
		<view class="headInfo" v-show="role_id == 1">
			我的直购码:<sapn class="verificationCode">{{verificationCode}}</sapn>
			<view class="copyIcon" @click="copyCode">
				<u-icon size='22' name="http://amy.yyinhong.cn/uploads/wximg/fz.png"></u-icon>
			</view>

		</view>
		<!-- 本月销售统计 -->
		<view class="salesStatistics" v-show="role_id == 1">
			<view class="salesStatisticsTitle">
				<u-icon size='24' name="http://amy.yyinhong.cn/uploads/wximg/currentTj.png"></u-icon>
				<span style="margin-left: 10rpx;">本月销售统计</span>
			</view>
			<view class="salesStatisticsContent" v-show="ShopInfo.current">
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						客户已购买总数
					</view>
					<view class="initData initDataActive">
						{{ShopInfo.current.buyCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						库存剩余总数
					</view>
					<view class="initData initDataActive">
						{{ShopInfo.current.stockCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						已取货总数
					</view>
					<view class="initData initDataActive">
						{{ShopInfo.current.pickedCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						待取货总数
					</view>
					<view class="initData initDataActive">
						{{ShopInfo.current.waitCount}}
					</view>
				</view>
			</view>
		</view>
		<!-- 上月销售统计 -->
		<view class="salesStatistics" v-show="ShopInfo.last && role_id == 1">
			<view class="salesStatisticsTitle">
				<u-icon size='24' name="http://amy.yyinhong.cn/uploads/wximg/lastTj.png"></u-icon> <span
					style="margin-left: 10rpx;">上月销售统计</span>
			</view>
			<view class="salesStatisticsContent">
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						客户已购买总数
					</view>
					<view class="initData">
						{{ShopInfo.last.buyCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						库存剩余总数
					</view>
					<view class="initData">
						{{ShopInfo.last.stockCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						已取货总数
					</view>
					<view class="initData">
						{{ShopInfo.last.pickedCount}}
					</view>
				</view>
				<view class="salesStatisticsContentInit">
					<view class="initTitle">
						待取货总数
					</view>
					<view class="initData">
						{{ShopInfo.last.waitCount}}
					</view>
				</view>
			</view>
		</view>

		<view class="baseContent" v-show="role_id == 3">
			<view class="topModel">
				首页
			</view>
			<view class="sscanCode">
				<view class="sscanCodeTitle">
					<u-icon size='24' name="http://amy.yyinhong.cn/uploads/wximg/dp.png"></u-icon>
					<span style="margin-left: 20rpx;">{{userInfo.store_name}}</span>
				</view>
			</view>

			<view class="bindingUser" v-for="(item,index) in userList" :key="index">
				<view class="bindingUserImg">
					<image :src="item.avatar" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				<view class="bindingUserInfo">
					<view class="bindingUserInfoName">
						{{item.name}}
					</view>
					<view class="bindingUserInfoTime">
						{{item.created_at}}
					</view>
				</view>
				<view class="bindingUserBtn" @click="gotoUserOrder(item.user_id)">
					查看订单
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<my-tabbar :currentTab='0' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				verificationCode: '',
				userInfo: {},
				ShopInfo: {
					current: null,
					last: null
				},
				role_id: null,
				userList: []
			}
		},
		onShow() {
			this.getUserInfo()
			this.getShopInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/merchant-info', 'GET', {}).then(res => {
					console.log(res)
					this.userInfo = res.data;
					this.verificationCode = this.userInfo.buycode;
					this.role_id = this.userInfo.role_id;
					if (this.role_id == 3) {
						this.getUserList()
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			gotoUserOrder(id) {
				uni.navigateTo({
					url: '/pageSub/pages/userorder/userorder?id=' + id
				})
			},
			getUserList() {
				this.$request('/get-employee-user-list', 'GET', {}).then(res => {
					console.log(res)
					this.userList = res.data.list;
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//复制核销码
			copyCode() {
				let _this = this;
				uni.setClipboardData({
					data: _this.verificationCode
				})
			},
			//获取店铺信息
			getShopInfo() {
				this.$request('/merchant-order-collect', 'GET', {}).then(res => {
					console.log('请求成功')
					this.ShopInfo = res.data
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}

		}
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.headInfo {
		width: calc(100% - 120rpx);
		margin: 0 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		position: relative;

		.copyIcon {
			position: absolute;
			right: 30rpx;
		}
	}

	.topModel {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 300rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #111827;
	}

	.sscanCode {
		width: calc(100% - 120rpx);
		min-height: 120rpx;
		padding: 0 30rpx;
		margin: 0 30rpx;
		margin-top: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bindingUserImg {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		background-color: #D3195E;

	}

	.bindingUserInfo {
		width: calc(100% - 120rpx - 180rpx);
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		margin-left: 20rpx;
	}

	.bindingUserInfoName {
		width: 100%;
		color: #000;
		font-size: 28rpx;
	}

	.bindingUserInfoTime {
		width: 100%;
		font-size: 24rpx;
		color: #718096;
	}

	.bindingUser {
		width: calc(100% - 120rpx);
		min-height: 120rpx;
		padding: 0 30rpx;
		margin: 0 30rpx;
		margin-top: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.bindingUserBtn {
		width: 160rpx;
		height: 60rpx;
		background-color: #D3195E;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 24rpx;
	}

	.sscanCodeTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 32rpx;
		color: #000000;
	}

	.salesStatistics {
		width: calc(100% - 120rpx);
		min-height: 104rpx;
		padding: 30rpx;
		margin: 0 30rpx;
		margin-top: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
	}

	.verificationCode {
		color: #D3195E;
		margin-left: 10rpx;
	}

	.salesStatisticsTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 32rpx;
		color: #111827;
		font-weight: 600;
	}

	.salesStatisticsContent {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.salesStatisticsContentInit {
		width: calc((100% - 100rpx) / 2);
		height: 94rpx;
		padding: 20rpx;
		background-color: #fafafa;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		.initTitle {
			font-size: 20rpx;
			line-height: 32rpx;
			color: #718096;
		}

		.initData {
			font-size: 36rpx;
			line-height: 54rpx;
			color: #718096;
		}

		.initDataActive {
			color: #F6588D;
		}
	}
</style>