<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">
					<view class="time">
						<!-- <div class="time" @click="show=true">2022年01月 <u-icon name="arrow-down" color="#333333" size="14">
							</u-icon>
						</div> -->
						<view class="time" @click="show1=true">
							<view class="df" style="margin-right: 10rpx;">{{day_time}}</view>
							<u-icon name="arrow-down" color="#333333" size="14">
							</u-icon>
						</view>
						<u-datetime-picker :show="show1" v-model="value1" mode="year-month" @cancel='show1=false'
							@confirm='confirm'></u-datetime-picker>
					</view>
					<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">
					<!-- <echarts></echarts> -->
					<lineChart ref="lineChart" :Monthly="report"></lineChart>
				</div>
			</div>
			<div class="list">
				<div class="list-head">
					<div class="f1" >日期</div>
					<div class="f1" style="text-align: center;">
						<div>订单金额</div>
						<div>订单笔数</div>
					</div>
					<div class="f1" style="text-align: right;">
						<div>退货金额</div>
						<div>退货笔数</div>
					</div>
				</div>
					<div class="list-item df" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.date)">
						<div class="f1">{{item.date}}</div>
						<div class="f1" style="text-align: center;">
							<div>{{item.order_money}}</div>
							<div class="value">{{item.order_num}}</div>
						</div>
						<div class="f1 df jcf">
							<div>
								<div>{{item.order_refund_money}}</div>
								<div class="value">{{item.order_refund_num}}</div>
							</div>


							<u-icon name="arrow-right" color="#999" size="14" style="margin-left: 12rpx;"></u-icon>
						</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"
	// import echarts from "../components/ECharts.vue"
	export default {
		components: {
			tabbar,
			lineChart,
			selectPopup,
			// echarts
		},
		data() {
			return {
				chilData:'经营日报',
				report:{
					report:0,
					day_time:''
				},
				time: '',
				day_time: '',
				value1: Number(new Date()),
				show1: false,
				show: false,
				statisticsList: [{
						label: '订单笔数',
						value: ''
					},
					{
						label: '订单金额',
						value: ''
					},
					{
						label: '退货单数',
						value: ''
					},
					{
						label: '退货金额',
						value: ''
					},
				],
				list: [1],
				todayStatHome: [],
				total_order_money: '',
				total_order_num: '',
				total_order_refund_money: '',
				total_order_refund_num: ''
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);

			},
			confirm(value) {
				this.day_time = this.times(value.value)
				this.report.day_time = this.times(value.value)
				this.$refs.lineChart.dailyones(this.times(value.value))
				this.$api.sendRequest({
					url: '/api/salasmanstat/todayStatHome',
					data: {
						month_time: this.day_time
					},
					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.show1 = false
			},
			cellClick(date) {
				console.log(this.day_time);
				let adt=date.replace("日","")
				// return
				setTimeout(()=>{
					uni.$emit('dailyone',{
						day_time:this.day_time+'-'+adt
					})
				},500)
				uni.navigateTo({
					url: '../BusinessDailyDetails/BusinessDailyDetails'
				})
			},
			//时间转换
			times(num) {
				let now = new Date(Number(num))
				let n = now.getFullYear()
				let y = now.getMonth() + 1>=10?now.getMonth()+1:0+''+(now.getMonth()+1);
				// let r =now.getDate();
				return n + '-' + y
			}
		},
		created() {
			// this.$router.go(0)//：刷新；
			let timestamp = Date.parse(new Date());
			this.day_time = this.times(timestamp)
			this.report.day_time = this.times(timestamp)

			this.$api.sendRequest({
				url: '/api/salasmanstat/todayStatHome',
				data: {
					month_time: this.day_time
				},
				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, '经营日报列表');
				}
			})
		},

	}
</script>

<style lang="scss">
	.page_salesman_reportForm {
		padding: 32rpx;

		.list {
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 32rpx;
			padding-bottom: 1rpx;

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

			}

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

		.statistics {

			// margin-top: 80rpx;
			.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>
