<template>
	<view class="boos">
		<!-- 店铺交易数据 -->
		<view class="statistical">
			<!-- <view class="item">
				<view class="number">{{wordData.top.barter_total || 0}}</view>
				<view class="text">总易货额</view>
			</view>
			<view class="item">
				<view class="number">{{wordData.top.trading_day || 0}}</view>
				<view class="text">今日交易额</view>
			</view>
			<view class="item">
				<view class="number">{{wordData.top.eb_in || 0}}</view>
				<view class="text">E货额度收入</view>
			</view>
			<view class="item">
				<view class="number">{{wordData.top.cash_in || 0}}</view>
				<view class="text">现金收入</view>
			</view> -->
		</view>
		<!-- 店铺概况 -->
		<view class="general">
            <view class="general-box member">
                <view class="member-name">
                    会员中心
                </view>
                <view class="member-cont">
                    <view class="member-tips">
                        <view class="member-tips-title" v-if="wordData.grade == 1">会员升级/续费</view>
                        <view class="member-tips-title" v-else-if="wordData.grade == 2">续费</view>
                        <view class="member-tips-title" v-else>企业会员</view>
                        <view class="member-tips-time nowrap">有效期：{{wordData.identity}}</view>
                    </view>
                    <view class="member-btn" v-if="wordData.grade == 3">
                        <image class="member-btn-icon" src="../../static/icons/store_icon_vip.png" mode="aspectFill"></image>
                        <view class="member-btn-name">已满级</view>
                    </view>
                    <view class="member-btn" @click="$Router.push({name: 'Vip'})" v-else>
                        <image class="member-btn-icon" src="../../static/icons/store_icon_vip.png" mode="aspectFill"></image>
                        <view class="member-btn-name">去升级</view>
                    </view>
                </view>
            </view>
			<view class="general-box">
				<view class="general-item" @click="$Router.push({name: 'Visitors'})">
					<view class="number">{{wordData.middle.visitors || 0}}</view>
					<view class="text">访客统计</view>
				</view>
				<view class="general-item" @click="$Router.push({name: 'Customer'})">
					<view class="number">{{wordData.middle.clinch || 0}}</view>
					<view class="text">成交客户</view>
				</view>
                <!-- <view class="general-item" @click="$Router.push({name: 'Employees'})">
                	<view class="number">{{wordData.middle.employees || 0}}</view>
                	<view class="text">员工数量</view>
                </view>
                <view class="general-item">
                	<view class="number">{{wordData.middle.hold || 0}}</view>
                	<view class="text">权证持有</view>
                </view>
                <view class="general-item">
                	<view class="number">{{wordData.middle.transfer || 0}}</view>
                	<view class="text">转让权证</view>
                </view> -->
                <view class="general-item">
                	<view class="number">{{wordData.top.barter_total.toFixed(2) || 0}}</view>
                	<view class="text">总交易额</view>
                </view>
                <view class="general-item" @click="$Router.push({name: 'GoodsMag'})">
                	<view class="number">{{wordData.middle.sale || 0}}</view>
                	<view class="text">在售权证</view>
                </view>
				<view class="general-item" @click="$Router.push({name: 'Return'})">
					<view class="number">{{wordData.order.deliver || 0}}</view>
					<view class="text">退货单处理</view>
				</view>
                <view class="general-item" @click="$Router.push({name: 'Deliver'})">
                	<view class="number">{{wordData.order.refund || 0}}</view>
                	<view class="text">发货单处理</view>
                </view>
			</view>
		</view>
		<!-- 店铺订单管理 -->
		<!-- <view class="tool-flex order">
			<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'deliver'}})">
				<view class="number" v-if="wordData.order.not_shipped > 0">{{wordData.order.not_shipped}}</view>
				<image class="icon" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
				<view class="title">待发货</view>
			</view>
			<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'shipped'}})">
				<view class="number" v-if="wordData.order.already_shipped > 0">{{wordData.order.already_shipped}}</view>
				<image class="icon" src="@/static/icons/order_icon_02.png" mode="aspectFill"></image>
				<view class="title">已发货</view>
			</view>
			<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'sign'}})">
				<view class="number" v-if="wordData.order.not_pick > 0">{{wordData.order.not_pick}}</view>
				<image class="icon" src="@/static/icons/order_icon_03.png" mode="aspectFill"></image>
				<view class="title">待提货</view>
			</view>
			<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'take'}})">
				<view class="number" v-if="wordData.order.already_pick > 0">{{wordData.order.already_pick}}</view>
				<image class="icon" src="@/static/icons/order_icon_00.png" mode="aspectFill"></image>
				<view class="title">已提货</view>
			</view>
			<view class="order-item" @click="$Router.push({name: 'Sales'})">
				<view class="number" v-if="wordData.order.after_sale > 0">{{wordData.order.after_sale}}</view>
				<image class="icon" src="@/static/icons/order_icon_04.png" mode="aspectFill"></image>
				<view class="title">退换货</view>
			</view>
		</view> -->
		<!-- 店铺工具 -->
		<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 class="tool-flex store">
			<view class="store-item" @click="$Router.push({name: 'Basics'})">
				<image class="icon" src="@/static/icons/tool_icon_04.png" mode="aspectFill"></image>
				<view class="title">基础信息</view>
			</view>
			<!-- <view class="store-item">
				<image class="icon" src="@/static/icons/tool_icon_05.png" mode="aspectFill"></image>
				<view class="title">智能名片</view>
			</view> -->
			<view class="store-item" @click="$Router.push({name: 'Spread'})">
				<image class="icon" src="@/static/icons/tool_icon_06.png" mode="aspectFill"></image>
				<view class="title">营销推广码</view>
			</view>
			<view class="store-item" @click="$Router.push({name: 'shopLists'})">
				<image class="icon" src="@/static/icons/tool_icon_07.png" mode="aspectFill"></image>
				<view class="title">部门/门店</view>
			</view>
			<view class="store-item" @click="$Router.push({name: 'Employees'})">
				<image class="icon" src="@/static/icons/tool_icon_08.png" mode="aspectFill"></image>
				<view class="title">员工管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"store-boss",
		props:{
			// 工作台信息
			wordData:{
				type: Object,
				default: () => {
					return {
						top		: {},
						middle	: {},
						order	: {}
					}
				}
			},
            identityData:{
                type: Object,
                default: () => {
                	return {
                		time	: {},
                		grade	: {}
                	}
                }
            }
		}
	}
</script>

<style lang="scss" scoped>
	.boos{
		// 店铺统计
		.statistical{
			display: flex;
			background: $text-price;
			padding: $padding ($padding/2) $padding*2;
			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*2 $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;
					}
				}
			}
            
            // 新增
            .member {
                margin-bottom: $margin;
                font-size: 26rpx;
                padding: 0;
                box-sizing: border-box;
                background-image: linear-gradient(to right, #fbdba7, #ddb264);
                position: relative;
                color: #533108;
                height: 120rpx;
                .member-name {
                    width: 160rpx;
                    line-height: 120rpx;
                    text-align: center;
                    font-size: 28rpx;
                    font-weight: 700;
                    position: relative;
                    &::after {
                        position: absolute;
                        content: '';
                        right: 0;
                        top: 25%;
                        height: 50%;
                        width: 4rpx;
                        background-color: #d8b66f;
                    }
                }
                .member-cont {
                    display: flex;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    padding-left: 180rpx;
                    padding-right: 20rpx;
                    box-sizing: border-box;
                    .member-tips {
                        flex: 1;
                        padding-top: 30rpx;
                        .member-tips-time {
                            font-size: 26rpx;
                        }
                    }
                    .member-btn{
                        height: 64rpx;
                        line-height: 64rpx;
                        border-radius: 10rpx;
                        margin-top: 30rpx;
                        padding: 0 15rpx;
                        background-image: linear-gradient(to right, #6f747f, #3e4655);
                        display: flex;
                        .member-btn-name {
                            font-size: 26rpx;
                            font-weight: 700;
                            background: linear-gradient(to right, #f6d8ac, #c39f63);
                            -webkit-background-clip: text;
                            color: transparent;
                        }
                        .member-btn-icon {
                            width: 32rpx;
                            height: 32rpx;
                            margin: 15rpx 10rpx 0 0;
                        }
                    }
                }
            }
		}
		// 店铺工具
		.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>
