<template>
	
	<view class="page_salesman_reportForm">
		<view class="private">
			<div class="df aic jcsb">
				<div class="private-type">店铺类型</div>
				<div class="private-two">私人医院</div>
			</div>
			<div class="xdkm"></div>
			<div class="df aic jcsb">
				<div class="private-type">店铺标签</div>
				<div class="private-two">潜在客户</div>
			</div>
		</view>
		<view class="ordering-cycle">
			<div class="order-goods">订货周期</div>
			<div class="xgsd"></div>
			<div class="df aic">
				<div class="order-period">历史订货周期</div>
				<div class="order-sky">10天</div>
			</div>
			<div class="df aic">
				<div class="order-last">最后订货</div>
				<div class="order-specific">2022-09-12</div>
			</div>
			<div class="df aic">
				<div class="order-period mt">距离最后订货</div>
				<div class="order-sky mt">20天<span>(已超期20天为订货)</span></div>
			</div>
		</view>
		<view class="box">
			<div class="df aic jcsb">
				<div class="box-goods">订货统计</div>
				<div class="df box-time">
					<span>2022.09.12-2023.10.12</span>
					<u-icon name="arrow-down"></u-icon>
				</div>
			</div>
			<div class="kcxs"></div>
			<div class="df">
				<div class="order-goods f1 df fdc jcsa aic">
					<div class="Order-quantity">订单量</div>
					<div class="time">30</div>
					<div class="percentage">比上周期上升0%</div>
				</div>
				<div class="order-goods f1 df fdc jcsa aic">
					<div class="Order-quantity">订单金额</div>
					<div class="time">5000</div>
					<div class="percentage">比上周期上升0%</div>
				</div>
			</div>
			<div class="chart">
				<lineChart ref="lineChart"></lineChart>
			</div>
			<div class="df order">
				<div class="df aic jcsa order-btn1">订单量</div>
				<div class="df aic jcsa order-btn2">订单金额</div>
			</div>
		</view>
		<view class="Recent-orders">
			<div class="order-goods">近期订单<span>(近30天有效订单)</span></div>
			<div class="kxsax"></div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">订单编号</div>
					<div class="number-figure">2384485495858</div>
				</div>
			</div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">下单时间</div>
					<div class="number-figure">2022-09-12  18:21:32</div>
				</div>
			</div>
			<div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">合计1种商品</div>
					<div class="number-figure">订单金额￥1000</div>
				</div>
				<div class="number-accomplish" style="color: #21BBF3;">订单已完成</div>
			</div>
			<div class="kxsax"></div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">订单编号</div>
					<div class="number-figure">2384485495858</div>
				</div>
			</div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">下单时间</div>
					<div class="number-figure">2022-09-12  18:21:32</div>
				</div>
			</div>
			<div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">合计1种商品</div>
					<div class="number-figure">订单金额￥1000</div>
				</div>
				<div class="number-accomplish" style="color: #FF7D02;">订单待发货</div>
			</div>
		</view>
		<view class="preference">
			<div class="df aic jcsb">
				<div class="preference-goods">订单偏好</div>
				<div class="df preference-time">
					<span>2022.09.12-2023.10.12</span>
					<div><u-icon name="arrow-down"></u-icon></div>
				</div>
			</div>
			<div class="kcxs"></div>
			<div class="df product">
				<!-- <div class="product-btn1 df aic jcsa">商品</div>
				<div class="product-btn2 df aic jcsa">分类</div> -->
				<u-tabs :list="list1" lineWidth=0 :activeStyle="{
					width:'142rpx',
					height:'50rpx',
					background:'#21BBF3',
					borderRadius:'30rpx',
					display:'flex',
					alignItems:'center',
					justifyContent:'space-around',
					color:'#fff',
					fontWeight:'400',
					fontSize:'20rpx',
					lineHeight:'28rpx',
				}" :inactiveStyle="{
					width:'142rpx',
					height:'50rpx',
					background:'#FFFFFF',
					borderRadius:'30rpx',
					border:'2rpx solid #EBEBEB',
					fontSize:'20rpx',
					fontWeight:'400',
					color:'#222222',
					lineHeight:'28rpx',
					display:'flex',
					alignItems:'center',
					justifyContent:'space-around',
				}" @click="click"></u-tabs>
			</div>
			<commodity v-if="index==0"></commodity>
			<classify v-if="index==1"></classify>
			<div class="See-more df aic jcsa">
				<div class="df aic" @click="btn">查看更多<u-icon name="arrow-right"></u-icon></div>
				</div>
		</view>
		<view class="preference">
			<div class="df aic jcsb">
				<div class="preference-goods">关注商品<span>(近30天收藏/浏览过的)</span></div>
				
			</div>
			<div class="kcxs"></div>
			
			<div class="df Product-Introduction">
				<div class="Product-img">
					<div class="Product-collect" style="background: #FF7D02;">收藏</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)"></image></div>
				<div class="Product-name">
					<div class="Product-eijnaij">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="Product-production df aic">
						<div class="Product-Shandong">产地：山东</div>
						<div class="Product-specifications">规格：0.5kg/袋</div>
					</div>
					<div class="unit-price">
						<div>￥28.88<span>/袋</span></div>
					</div>
					
				</div>
				<div class="time df aic">
					×4
				</div>
			</div>
			<div class="df Product-Introduction">
				<div class="Product-img">
					<div class="Product-collect" style="background: #00C594;">浏览</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)"></image></div>
				<div class="Product-name">
					<div class="Product-eijnaij">路易拉菲 法国 原瓶进口红酒…</div>
					<div class="Product-production df aic">
						<div class="Product-Shandong">产地：山东</div>
						<div class="Product-specifications">规格：0.5kg/袋</div>
					</div>
					<div class="unit-price">
						<div>￥28.88<span>/袋</span></div>
					</div>
				</div>
				<div class="time df aic">
					×4
				</div>
			</div>
			<div class="See-more df aic jcsa">
				<div class="df aic">查看更多<u-icon name="arrow-right"></u-icon></div>
				</div>
		</view>
		<view class="Sign-in">
			<div class="order-goods">登录统计<span>(近30天的登录)</span></div>
			<div class="kxsax"></div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">总登录次数</div>
					<div class="number-figure">10次</div>
				</div>
			</div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">最后登录时间</div>
					<div class="number-figureas">2022-09-12</div>
				</div>
			</div>
			<div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">距最后登录</div>
					<div class="number-figure">20天</div>
				</div>
			</div>
			
		</view>
		<view class="Sign-in">
			<div class="order-goods">欠款统计<span>(客户结算方式：后付)</span></div>
			<div class="kxsax"></div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">欠款金额</div>
					<div class="number-figure">5000.00</div>
				</div>
			</div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">下次换款日期</div>
					<div class="number-figureas">2022-09-12</div>
				</div>
			</div>
			<div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">可用优惠卷</div>
					<div class="number-figure">3张</div>
				</div>
			</div>
			
		</view>
		
	</view>
</template>

<script>
	import lineChart from "./lineChart.vue"
	import commodity from "./commodity.vue"
	import classify from "./classify.vue"
	export default {
		components: {
			
			lineChart,commodity,classify
		},
		data() {
			return {
				time:'',
				index:0,
				list1:[
					{name:'商品'},
					{name:'分类'}
				],
				statisticsList: [{
						label: '订单笔数',
						value: 5829
					},
					{
						label: '订单金额',
						value: 5829
					},
					{
						label: '退货单数',
						value: 5829
					},
					{
						label: '退货金额',  
						value: 5829
					},
				]
			};
		},
		methods:{
		            click(item) {
		                console.log('item', item.index);
						this.index=item.index
		            },
					btn(){
						uni.navigateTo({
							// url:this.list[this.current.URL]
							url:'../Order-preference/Order-preference'
						})
					}
		}
	}
</script>

<style lang="scss">
	::v-deep{
		.u-tabs__wrapper__nav{
			width: 100% !important;
			
		}
		.u-tabs__wrapper__nav__item{
			padding: 0 94rpx !important;
		}
	}
	.page_salesman_reportForm {
		padding: 32rpx;
		.box {
			margin-top: 24rpx;
			border-radius: 16rpx;
			padding: 32rpx;
			width: 702rpx;
			
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			.box-goods{
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
			}
			.bto-time{
				span{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 34rpx;
					margin-right: 12rpx;
				}
			}
			.kcxs{
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 32rpx 0;
			}
			.order-goods{
				.Order-quantity{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 42rpx;
				}
				.time{
					font-size: 30rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 34rpx;
					margin: 20rpx 0;
				}
				.percentage{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE8B25;
					line-height: 34rpx;
				}
			}
			.order{
				margin: 40rpx 0 8rpx 0;
				.order-btn1{
					width: 142rpx;
					height: 50rpx;
					background: #21BBF3;
					border-radius: 30px;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin: 0 60rpx 0 148rpx;
				}
				.order-btn2{
					width: 142rpx;
					height: 50rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 28rpx;
				}
			}
		}
		.private{
			width: 702rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.private-type{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}
			.private-two{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #585858;
				line-height: 40rpx;
			}
			.xdkm{
				margin: 30rpx 0;
				width: 641rpx;
				height: 1rpx;
				background: #E8E8E8;
				border-radius: 2rpx;
			}
		}
		.ordering-cycle{
			width: 702rpx;
			height: 332rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.order-goods{
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
			}
			.xgsd{
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0;
			}
			.mt{
				margin-top: 20rpx;
			}
			.order-period{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
			.order-sky{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 72rpx;
				span{
					color: #999;
					margin-left: 12rpx;
				}
			}
			.order-last{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 24rpx;
			}
			.order-specific{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 128rpx;
					margin-top: 24rpx;
			}
		}
		.preference{
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-top: 24rpx;
			box-sizing: border-box;
			.preference-goods{
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
				span{
					color: #999999;
				}
			}
			.preference-time{
				span{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 34rpx;
					margin-right: 12rpx;
				}
			}
			.kcxs{
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 30rpx 0;
			}
			.product{
				.product-btn1{
					width: 142rpx;
					height: 50rpx;
					background: #21BBF3;
					border-radius: 30rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin: 0 60rpx 0 148rpx;
				}
				.product-btn2{
					width: 142rpx;
					height: 50rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 28rpx;
				}
			}
			.Product-Introduction{
				margin-top: 32rpx;
				.time{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-left: 20rpx;
				}
				.Product-img{
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
					position: relative;
					image{
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
						
					}
					.Product-collect{
						position: absolute;
						width: 66rpx;
						height: 36rpx;
						
						border-radius: 0rpx 21rpx 21rpx 0rpx;
						opacity: 0.83;
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 28rpx;
						left: 0;
						top: 12rpx;
						z-index: 10;
					}
					
				}
				.Product-name{
					margin-left: 24rpx;
					.Product-eijnaij{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
					.unit-price{
						font-size: 24rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #F33B50;
						line-height: 40rpx;
						margin-top: 46rpx;
						span{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 34rpx;
						}
					}
					.Product-production{
						margin-top: 16rpx;
						.Product-Shandong{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
						.Product-specifications{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-left: 16rpx;
						}
					}
					.Product-time{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
						line-height: 40rpx;
						margin-top: 52rpx;
					}
				}
			}
			
			.See-more{
				margin-top: 32rpx;
				div{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}
		}
		.Recent-orders{
			width: 702rpx;
			height: 558rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.order-goods{
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
				span{
					color: #999999;
					margin-left: 10rpx;
				}
			}
			.kxsax{
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 0 0;
			}
			.number{
				margin-top: 28rpx;
				.number-goods{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
				.number-figure{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 44rpx;
				}
				.number-accomplish{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
				}
			}
		}
		.Sign-in{
			width: 702rpx;
			height: 332rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.order-goods{
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
				span{
					color: #999999;
					margin-left: 10rpx;
				}
			}
			.kxsax{
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 0 0;
			}
			.number{
				margin-top: 28rpx;
				.number-goods{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
				.number-figure{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 100rpx;
				}
				.number-figureas{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 72rpx;
				}
				.number-accomplish{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
				}
			}
		}
	}
</style>
