<template>
	<view class="staff">
        员工啦
		<!-- 员工权限工具 -->
        <!-- <view class="tool-flex store">
        	<view class="store-item" @click="$Router.push({name: 'Verification'})">
        		<image class="icon" src="@/static/icons/tool_icon_00.png" mode="aspectFill"></image>
        		<view class="title">扫码验证</view>
        	</view>
        	<view class="store-item" @click="$Router.push({name: 'GoodsMag'})">
        		<image class="icon" src="@/static/icons/tool_icon_01.png" mode="aspectFill"></image>
        		<view class="title">商品权证</view>
        	</view>
        	<view class="store-item" @click="$Router.push({name: 'CouponsMag'})">
        		<image class="icon" src="@/static/icons/tool_icon_02.png" mode="aspectFill"></image>
        		<view class="title">优惠券管理</view>
        	</view>
        	<view class="store-item" @click="$Router.push({name: 'Collection'})">
        		<image class="icon" src="@/static/icons/tool_icon_03.png" mode="aspectFill"></image>
        		<view class="title">收款管理</view>
        	</view>
        </view> -->
	</view>
</template>

<script>
	export default {
		name:"store-staff",
		props:{
			// 店铺统计
			top: {
				type: Object,
				default: ()=> {
					return {
						barter_total: 0,
						trading_day	: 0,
						eb_in		: 0,
						cash_in		: 0
					}
				}
			},
			// 店铺概况
			middle: {
				type: Object,
				default: ()=> {
					return {
						visitors : 0,
						clinch	 : 0,
						employees: 0,
						sale	 : 0,
						hold	 : 0,
						transfer : 0
					}
				}
			},
			// 店铺订单
			order: {
				type: Object,
				default: ()=> {
					return {
						not_shipped		: 0,
						already_shipped	: 0,
						not_pick		: 0,
						already_pick	: 0,
						after_sale		: 0
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.staff{
		// 店铺统计
		.statistical{
			display: flex;
			background: $text-price;
			padding: $padding ($padding/2) $padding*5;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: calc(25% - #{$padding});
				text-align: center;
				color: white;
				margin: 0 $margin / 2;
				.number{
					font-weight: bold;
					font-size: $title-size;
				}
				.text{
					font-size: $title-size-sm;
				}
			}
		}
		// 店铺概况
		.general{
			margin: -$margin*4 $margin 0 $margin;
			.general-box{
				background-color: white;
				border-radius: $radius/2;
				display: flex;
				padding: $padding $padding/2;
				flex-wrap: wrap;
				.general-item{
					width: 33.33%;
					text-align: center;
					padding: $padding/2;
					box-sizing: border-box;
					.number{
						font-weight: bold;
						font-size: $title-size;
						line-height: 50rpx;
					}
					.text{
						font-size: $title-size-sm;
						color: $text-gray;
						line-height: 40rpx;
					}
				}
			}
		}
		// 店铺工具
		.tool-flex{
			background: white;
			border-radius: $radius/2;
			padding: $padding/2;
			margin: $margin;
			display: flex;
			flex-wrap: wrap;
			.store-item{
				padding: $padding/2;
				text-align: center;
				width: 25%;
				box-sizing: border-box;
				.icon{
					width: 68rpx;
					height: 68rpx;
					vertical-align: top;
				}
				.title{
					font-size: $title-size-sm;
					color: $text-gray;
					padding-top: $padding/3;
				}
			}
			.order-item{
				position: relative;
				padding: $padding/2;
				text-align: center;
				width: 20%;
				box-sizing: border-box;
				.icon{
					width: 58rpx;
					height: 58rpx;
					vertical-align: top;
				}
				.title{
					font-size: $title-size-sm;
					color: $text-gray;
				}
				.number{
					position: absolute;
					top: 10rpx;
					left: calc( 50% + 10rpx );
					font-size: $title-size-sm;
					background: $text-price;
					color: white;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					min-width: 30rpx;
					z-index: 9;
				}
			}
		}
	}
</style>
