<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="page_salesman_reportForm">

			<z-paging ref="paging" v-model="list" @query="queryList">
				<template slot="top">
					<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>
				</template>
		<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>
		<div>
			<!-- <u-tabs :list="navlist" lineWidth="30" lineColor="#fff" :activeStyle="{
			            color:'#20BBF3;',
			            fontWeight:'bold',
			            transform:'scale(1.05)'
			        }" :inactiveStyle="{
			            color:'#999999',
			            transform:'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click='click'>

			</u-tabs> -->
			
			<!-- <u-tabs :list="navlist" lineWidth=0 itemStyle="width: 20%;padding: 0 18rpx;" :activeStyle="{
				fontSize: '24rpx',
			
				fontWeight: '500',
				color:'#20BBF3',
				lineHeight: '34rpx',
			}" :inactiveStyle="{
				fontSize: '24rpx',
			
				fontWeight: '400',
				color: '#999999',
				lineHeight: '34rpx',
			}" @click='click'></u-tabs> -->
			<view class="df jcsa saixuna">
				<view class="f1 df aic jcsa" v-for="(item,index) in navlist" :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>
		<div class="list">
			<div class="df aic jcsb arr" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.sku_id)">
				<div class="f1">
					<div class="head">
						<span>{{item.goods_name}}</span>
					</div>
					<div class="df">
						<div class="f1 ar1">商品编号：{{item.goods_code}}</div>
						<div class="f1 ar1">规格：选100条/袋</div>
					</div>
					<div class="df">
						<div class="f1 ar1">订货数量：{{item.order_goods_num}}</div>
						<div class="f1 ar1">销量:{{item.order_goods_money}}</div>
					</div>
					<div class="df">
						<div class="f1 ar1">退货金额：{{item.order_refund_goods_money}}</div>
						<div class="f1 ar1">订货金额:{{item.order_goods_money}}</div>
					</div>
				</div>
				<div class="imgs">
					<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> -->
		<!-- <tabbar :tabIndex="1"></tabbar> -->
		<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 {
				chilData:'商品销售统计',
				time: '',
				value1: Number(new Date()),
				show1: false,
				value2: Number(new Date()),
				show2: false,
				show: false,
				StatList:'',
				box:true,
				box1:false,
				box2:false,
				box3:false,
				statisticsList: [{
						label: '订单笔数',
						value: 5829
					},
					{
						label: '订单金额',
						value: 726382.00
					},
					{
						label: '退货单数',
						value: 9527
					},
					{
						label: '退货金额',
						value: 726382.00
					},
				],
				navlist: [{
						name: '订单金额'
					},
					{
						name: '订单笔数'
					},
					{
						name: '退货数量'
					},
					{
						name: '退货金额'
					}
				],
				Datalist: [{}],
				list:[1],
				todayStatHome:[],
				start_time:'' ,//开始时间
				end_time:'',//结束时间
				start_timeone:'' ,//开始时间
				end_timeone:'',//结束时间
				total_order_money: '',
				total_order_num: '',
				total_order_refund_money: '',
				total_order_refund_num: '',
				tiaozheng:0
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
			this.$refs.paging.complete(this.list);

			},
			btn(index) {
				console.log(index);
			},
			confirm(value) {
				this.StatList=value.value
				this.show1 = false
				this.show2=true
			},
			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/goodsStatList',
							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/goodsStatList',
							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.box=false
					this.box2=false
					this.box3=false
					this.box1=!this.box1
					if(this.box1){
						this.$api.sendRequest({
							url: '/api/salasmanstat/goodsStatList',
							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/goodsStatList',
							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/goodsStatList',
							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/goodsStatList',
							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/goodsStatList',
							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/goodsStatList',
							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
							}
						})
					}
				}
				
			},
			confirmtwo(value){//timeStampTurnTime
				this.end_time = this.times(value.value)
				this.start_time = this.times(this.StatList)
				this.end_timeone = value.value/1000
				this.start_timeone = this.StatList/1000
				this.$api.sendRequest({
					url: '/api/salasmanstat/goodsStatList',
					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
			},
			cellClick(sku_id) {
				setTimeout(()=>{
					uni.$emit('sale',{
					start_time:this.start_time,
					end_time:this.end_time,
					sku_id
				})
				},500)
				uni.navigateTo({
					url: '/page_salesman_reportForm/Commoditysales/Commoditysales'
				})
			}
		},
		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.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/goodsStatList',
				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;
		}
	}
	::v-deep{
		// .u-tabs{
		// 	height: 60rpx;
		// 	display: flex;
		// 	// align-items: c;
		// }
		.u-tabs__wrapper{
			height: 60rpx;
		}
	}
	.page_salesman_reportForm {
		padding: 32rpx;

		.list {
			background-color: #fff;
			border-radius: 16rpx;
			// margin-top: 32rpx;
			padding-bottom: 1rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			.head span:nth-child(2){
				color: red;
			}
			.list-head {
				padding: 32rpx 48rpx 32rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #999999;

			}
			.head{
				span{
					margin-top: 24rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 34rpx;
				}
			}

			.ar1{
				// width: 176px;
				// height: 34px;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
			}

			.imgs {
				width: 28rpx;
				height: 28rpx;
				border: 1rpx dotted #ccc;
				position: relative;
				image {
					position: absolute;
					width: 28rpx;
					height: 28rpx;
				}
			}

			.list-item {
				margin-bottom: 24rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				color: #333;

				.value {
					color: #999999;
				}
			}
		}

		.box {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx 32rpx;
			// margin-top: 80rpx;
		}

		.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>
