<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="page_salesman_reportForm">
		<u-navbar title="商品分类统计" :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon>
		</u-navbar>
		<z-paging ref="paging" v-model="list" @query="queryList">
		<div class="box">
			<div class="statistics">
				<div class="time" @click="show1=true">{{$util.timeStampTurnTime(start_timeone,'yearmonthday')}} ~ {{$util.timeStampTurnTime(end_timeone,'yearmonthday')}}<u-icon name="arrow-down" color="#333333"
						size="14"></u-icon>
						<u-datetime-picker :show="show1" v-model="value1" mode="date" @cancel='show1=false'
						@confirm='confirm'></u-datetime-picker>
						<u-datetime-picker :show="show2" v-model="value2" mode="date" @cancel='show2=false'
						@confirm='confirmtwo'></u-datetime-picker>
				</div>
				<view class="df">
					<div class="statistics-item">
						<div class="label">
							<span></span>
							订单金额
						</div>
						<div class="value">{{total_order_money}}</div>
					</div>
					<div class="statistics-item">
						<div class="label">
							<span></span>
							订单数量
						</div>
						<div class="value">{{total_order_num}}</div>
					</div>
				</view>
				<view class="df">
					<div class="statistics-item">
						<div class="label">
							<span></span>
							退货数量
						</div>
						<div class="value">{{total_order_refund_num}}</div>
					</div>
					<div class="statistics-item">
						<div class="label">
							<span></span>
							退货金额
						</div>
						<div class="value">{{total_order_refund_money}}</div>
					</div>
				</view>
				

			</div>
			<div class="df jcsb" style="margin-top: 40rpx;">
				<div>订货金额&ensp;(元)</div>
				<div>订货数量</div>
			</div>
			<div class="chart">
				<lineChart ref="lineChart" :Monthly="report"></lineChart>
			</div>
		</div>
		<view class="df jcsa saixuna">
			<view class="f1 df aic jcsa" v-for="(item,index) in arrangelist" :key="index">
				<view class="df" @click='click(index)' :style="tiaozheng==index?'color:#20BBF3':''">
					{{item.name}}
					<!-- <image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image> -->
					<view class="" v-if="tiaozheng==index">
						<view class="" v-if="box&&tiaozheng==0">
							<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box&&tiaozheng==0">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="box1&&tiaozheng==1">
							<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box1&&tiaozheng==1">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="box2&&tiaozheng==2">
							<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box2&&tiaozheng==2">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="box3&&tiaozheng==3">
							<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box3&&tiaozheng==3">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<!-- <view class="" v-if="!box">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box1">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box2">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view>
						<view class="" v-else-if="!box3">
							<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
						</view> -->
					</view>
					<view class="" v-if="tiaozheng!=index">
						<image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image>
					</view>
					
				</view>
			</view>
		</view>
		<div class="type-head" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.category_id)">
			
				<div class="type-type">{{item.cate_name}}</div>
				<div class="df aic">
					<div class="f1">
						<div class="type-item">订货数量：{{item.order_goods_num}}</div>
						<div class="type-item">退货数量：{{item.order_refund_goods_num}}</div>
					</div>
					<div class="f1">
						<div class="type-items">订货金额：{{item.order_goods_money}}</div>
						<div class="type-items">退货金额：{{item.order_refund_goods_money}}</div>
					</div>
					<div class="imges">
						<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
					</div>
				</div>
			
		</div>
		</z-paging>
		<tabbar :tabIndex="1"></tabbar>
		<!-- <u-datetime-picker :show="show" @close="show=false" v-model="time" mode="year-month" confirmColor="#21BBF3"
			closeOnClickOverlay></u-datetime-picker> -->
		<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
	</view>
</template>

<script>
	import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
	import lineChart from "../components/lineChart.vue"
	import selectPopup from "../components/selectPopup.vue"
	export default {
		components: {
			tabbar,
			lineChart,
			selectPopup
		},
		data() {
			return {
				report:{
					report:4,
					day_time:'',
					end_time:''
				},
				box:true,
				box1:false,
				box2:false,
				box3:false,
				tiaozheng:0,
				chilData:'商品分类统计',
				time: '',
				value1: Number(new Date()),
				show1: false,
				value2: Number(new Date()),
				show2: false,
				show: false,
				list:[1],
				arrangelist: [{
						name: '订货数量'
					},
					{
						name: '订货金额'
					},
					{
						name: '退货数量'
					},
					{
						name: '退货金额'
					}
				],
				classificationlist: [{
						classify: '根茎类',
						orderquantity: 1000.00,
						orderamount: 1000.00,
						Returnquantity: 0.00,
						Returnamount: 0.00
					},
					{
						classify: '动物类',
						orderquantity: 1000.00,
						orderamount: 1000.00,
						Returnquantity: 0.00,
						Returnamount: 0.00
					},
					{
						classify: '花叶类',
						orderquantity: 1000.00,
						orderamount: 1000.00,
						Returnquantity: 0.00,
						Returnamount: 0.00
					},

				],
				statisticsList: [{
						label: '订单笔数',
						value: 5829
					},
					{
						label: '订单金额',
						value: 726382.00
					},
					{
						label: '退货单数',
						value: 9527
					},
					{
						label: '退货金额',
						value: 726382.00
					},
				],
				start_time:'' ,//开始时间
				end_time:'',//结束时间
				start_timeone:'' ,//开始时间
				end_timeone:'',//结束时间
				total_order_money: '',
				total_order_num: '',
				total_order_refund_money: '',
				total_order_refund_num: '',
				todayStatHome:[]
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
			this.$refs.paging.complete(this.list);
			
			},
			click(value){
				this.tiaozheng=value
				if(value==0){
					this.box=!this.box
					this.box1=false
					this.box2=false
					this.box3=false
					if(this.box){
						
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time: this.end_time,
								type:1,
								type_sort:1
							},
							success:res=>{
								console.log(res,'订单金额升序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}else{
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:1,
								type_sort:2
							},
							success:res=>{
								console.log(res,'订单金额降序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}
				}
				if(value==1){
					this.box1=!this.box1
					this.box=false
					this.box2=false
					this.box3=false
					if(this.box1){
						
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:2,
								type_sort:1
							},
							success:res=>{
								console.log(res,'订单笔数升序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}else{
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:2,
								type_sort:2
							},
							success:res=>{
								console.log(res,'订单笔数降序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}
				}
				if(value==2){
					this.box2=!this.box2
					this.box=false
					this.box1=false
					this.box3=false
					if(this.box2){
						
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:3,
								type_sort:1
							},
							success:res=>{
								console.log(res,'退货订单数升序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}else{
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:3,
								type_sort:2
							},
							success:res=>{
								console.log(res,'退货订单数降序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}
				}
				if(value==3){
					this.box3=!this.box3
					this.box=false
					this.box1=false
					this.box2=false
					if(this.box3){
						
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:4,
								type_sort:1
							},
							success:res=>{
								console.log(res,'退货金额升序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}else{
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsCateStatList',
							data:{
								start_time: this.start_time,
								end_time:this.end_time,
								type:4,
								type_sort:2
							},
							success:res=>{
								console.log(res,'退退货金额降序');
								this.todayStatHome = res.data.list
								this.total_order_refund_num = res.data.total_order_refund_num
								this.total_order_refund_money = res.data.total_order_refund_money
								this.total_order_num = res.data.total_order_num
								this.total_order_money = res.data.total_order_money
							}
						})
					}
				}
				console.log(this.box,'1');
				console.log(this.box1,'2');
				console.log(this.box2,'3');
				console.log(this.box3,'4');
				console.log(value,'value');
			},
			cellClick(category_id) {
				console.log(category_id,'category_id');
				setTimeout(()=>{
					uni.$emit('classification',{
						category_id,
						start_time:this.start_time,
						end_time:this.end_time
					})
				},500)
				uni.navigateTo({
					url: '/page_salesman_reportForm/Salesstatistics_details/Salesstatistics_details'
				})
			},
			confirm(value) {
				this.StatList=value.value
				this.show1 = false
				this.show2=true
			},
			confirmtwo(value){//timeStampTurnTime
				this.end_time = this.times(value.value)
				this.start_time = this.times(this.StatList)
				this.report.day_time=this.times(this.StatList)
				this.report.end_time=this.times(value.value)
				this.$refs.lineChart.roductdivision(this.times(this.StatList),this.times(value.value))
				this.end_timeone = value.value/1000
				this.start_timeone = this.StatList/1000
				this.$api.sendRequest({
					url: '/api/salasmanstat/goodsCateStatList',
					data: {
						start_time: this.start_time,
						end_time:this.end_time,
						page:'1',
						page_size:'10'
					},
					success: res => {
						this.todayStatHome = res.data.list
						this.total_order_refund_num = res.data.total_order_refund_num
						this.total_order_refund_money = res.data.total_order_refund_money
						this.total_order_num = res.data.total_order_num
						this.total_order_money = res.data.total_order_money
						console.log(res.data, '商品分类列表');
					}
				})
				this.show2=false
			},
			times(num) {
				let now = new Date(Number(num))
				let n = now.getFullYear()
				let y = now.getMonth() + 1
				let r =now.getDate()>=10?now.getDate():0+''+now.getDate()
				return n + '-' + y+'-'+r
			},
		},
		created() {
			// this.$router.go(0)//：刷新；
			// let timestamp = Date.parse(new Date());
			let myDate = new Date()
				let myte=new Date().setDate(1)
			  let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
			  let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			  let myToday = myDate.getDate(); //获取当前日(1-31)
			  myMonth = myMonth > 9 ? myMonth : '0' + myMonth
			  myToday = myToday > 9 ? myToday : '0' + myToday 
			this.end_timeone = myDate/1000
			this.start_timeone = myte/1000
			
			this.report.day_time=this.times(myte)
			this.report.end_time=this.times(myDate)
			this.start_time=myYear +'-'+  myMonth +'-'+ '01'
			// console.log(nowDate,'nowDatenowDatenowDate');
			// this.start_time = this.times(timestamp)
			this.end_time= myYear +'-'+  myMonth +'-'+  myToday
			this.$api.sendRequest({
				url: '/api/salasmanstat/goodsCateStatList',
				data: {
					start_time: this.start_time,
					end_time:this.end_time,
					page:'1',
					page_size:'10'
				},
				success: res => {
					this.todayStatHome = res.data.list
					this.total_order_refund_num = res.data.total_order_refund_num
					this.total_order_refund_money = res.data.total_order_refund_money
					this.total_order_num = res.data.total_order_num
					this.total_order_money = res.data.total_order_money
					console.log(res.data, '商品分类列表');
				}
			})
		},
	}
</script>

<style lang="scss">
	.saixuna{
		height: 100rpx;
		image{
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}
	.u-tabs {
		width: 100%;
	}
	
	.type-head {
		.type-type {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 34rpx;
			margin-left: 36rpx;
			margin-top: 50rpx;
		}
		
		.type-item {
			padding-top: 8rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666;
			line-height: 34rpx;
			margin-left: 36rpx;
		}
		
		.type-items {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
			padding-top: 4rpx;
		}
		.imges {
			width: 28rpx;
			height: 28rpx;
			border: 1rpx dotted #ccc;
			position: relative;
			margin-right: 24rpx;
			image {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.page_salesman_reportForm {
		padding: 32rpx;
		
		.list {
			margin-bottom: -26rpx;
			margin-top: 42rpx;
			width: 750rpx;
			height: 108rpx;
			background: #F6F4F6;
			border-radius: 8rpx;

		}

		.box {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx 32rpx;
			margin-top: 80rpx;
			/* #ifdef APP */
			margin-top: 178rpx !important;
			/* #endif */
		}

		.statistics {
			
			.time {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 12rpx;
			}

			.statistics-item {
				display: flex;
				align-items: center;
				flex: 1;
				.label {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					display: flex;
					align-items: center;

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background: #20BBF3;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}

				.value {
					margin-left: 24rpx;
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>
