<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">数据统计</view>
			</view>
		</u-navbar>

		<view class="bgMain">
			<view class="storeVisit">
				<view class="visit">
					<view class="subsection">
						<view>门店访问量</view>
						<view><u-subsection :list="list" :current="current" font-size="24rpx" bgColor="#FAF7F6"
								activeColor="#FF4502" inactiveColor="#666666"
								style="margin-left: 20rpx; margin-right: 20rpx;" @change="sectionChange"></u-subsection>
						</view>
					</view>
					<view class="store">
						<view class="number">
							<view class="titile">
								门店访问量(个)
							</view>
							<view class="num">
								{{data1.storeVisitsNum}}
							</view>
						</view>
						<view class="numberPeople">
							<view class="titile">门店下单人数(个)</view>
							<view class="num">{{data1.storePlaceOrderNum}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="storeVisit">
				<view class="visit">
					<view class="subsection">
						<div class="subsectionBox">
							<view>订单数据汇总</view>

						</div>
						<view>
							<u-subsection :list="list" :current="current2" font-size="24rpx" bgColor="#FAF7F6"
								activeColor="#FF4502" inactiveColor="#666666"
								style="margin-left: 20rpx; margin-right: 20rpx;"
								@change="sectionChange2"></u-subsection>
						</view>
					</view>

					<view class="store">
						<view class="number">
							<view class="titile">
								已完成订单(个)
							</view>
							<view class="num">
								{{data2.completedOrderNum}}
							</view>
						</view>
						<view class="numberPeople">
							<view class="titile">订单金额(元)</view>
							<view class="num">{{data2.amount}}</view>

						</view>
					</view>

				</view>
			</view>
		</view>

		<div class="cardItem">
			<div class="cardItemTop">
				<div class="title">
					订单数量统计
				</div>
				<view class="searchBox" @click="isShowStartTime = true">
					<view class="txt">{{(beginTime && endTime)?(beginTime +' - ' +endTime):'开始时间-结束时间'}}</view>
					<view style="color: red;font-size: 28rpx;" @click.stop="reset">
						重置
					</view>
				</view>
				<!-- <div class="timeBox">
					<input class="ipt" type="text" placeholder="开始时间-结束时间" />
				</div> -->
			</div>
			<qiun-data-charts :loadingType="loadingType" type="line" :opts="opts" :chartData="chartData"
				:ontouch="true" />
		</div>

		<div class="cardItem">
			<div class="cardItemTop">
				<div class="title">
					营业额统计
				</div>

				<view><u-subsection :list="list" :current="current3" font-size="24rpx" bgColor="#FAF7F6"
						activeColor="#FF4502" inactiveColor="#666666" style="margin-left: 20rpx; margin-right: 20rpx;"
						@change="sectionChange3"></u-subsection>
				</view>
			</div>
			<qiun-data-charts :loadingType="loadingType" type="line" :opts="opts2" :chartData="chartData2"
				:ontouch="true" />
		</div>
		
		<u-datetime-picker v-model="currenTime" title="选择开始时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmStart"
			ref="datetimePicker" :show="isShowStartTime" mode="date" :formatter="formatter" :maxDate="minDate"></u-datetime-picker>
		<u-datetime-picker v-model="currenTime" title="选择结束时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmEnd"
			ref="datetimePicker" :show="isShowEndTime" mode="date" :formatter="formatter" :maxDate="minDate"></u-datetime-picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isShowStartTime: false,
				isShowEndTime: false,
				minDate: Number(new Date()),
				currenTime:Number(new Date()),
				beginTime: '',
				endTime: '',
				list: ['按日', '按周', '按月', '按年'],
				loadingType:2,
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				current2: 0,
				current3: 0,
				data1: {},
				data2: {},

				chartData: {},
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 5,
						scrollAlign: 'left'
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 5,
						scrollAlign: 'left'
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},

		onLoad() {
			this.getordinaryVisits()
			this.getOrderDataSummary()
			this.getServerData();
			this.getServerData2();

		},

		methods: {
			
			closeIsShow() {
				this.isShowStartTime = false
				this.isShowEndTime = false
			},
			confirmStart(e) {
				this.beginTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.isShowStartTime = false
				this.isShowEndTime = true
				// this.closeIsShow()
			},
			confirmEnd(e) {
				this.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.closeIsShow()
				this.getServerData()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			
			reset(){
				this.beginTime = ''
				this.endTime = ''
				this.getServerData()
			},

			getServerData() {
				this.$http.post('/api/store/index/orderQuantityStatistics', {
					beginTime: this.beginTime || null,
					endTime: this.endTime || null
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						let series = []
						let categories = []
						res.data.xaxisData.map(item => {
							categories.push(item)
						})
						this.loadingType = 0
						res.data.dataList.map(item => {
							series.push({
								name: item.name,
								data: item.yaxisData
							})
						})
						let data = {
							categories,
							series
						};
						console.log('data',data);
						this.chartData = JSON.parse(JSON.stringify(data));
					} else {
						this.loadingType = 0
					}
				})
			},

			getServerData2() {
				this.$http.post('/api/store/index/revenueStatistics', {
					type: this.current3 + 1,
				}).then(res => {
					if (res.code == 200) {
						let series = []
						let categories = []
						res.data.xaxisData.map(item => {
							categories.push(item)
						})
						this.loadingType = 0
						res.data.dataList.map(item => {
							series.push({
								name: item.name,
								data: item.yaxisData
							})
						})
						let data = {
							categories,
							series
						};
						console.log(data);
						this.chartData2 = JSON.parse(JSON.stringify(data));
					}
				})
			},

			//普通门店、油站-门店访问量
			getordinaryVisits() {
				this.$http.post('/api/store/index/ordinaryVisits', {
					type: this.current + 1,
				}).then(res => {
					this.data1 = res.data
				})
			},

			//普通门店、油站-订单数据汇总
			getOrderDataSummary() {
				this.$http.post('/api/store/index/orderDataSummary', {
					type: this.current2 + 1,
				}).then(res => {
					this.data2 = res.data
				})
			},



			sectionChange(index) {
				this.current = index;
				this.getordinaryVisits()
			},

			sectionChange2(index) {
				this.current2 = index;
				this.getOrderDataSummary()
			},

			sectionChange3(index) {
				this.current3 = index;
				this.getServerData2()
			}
		}
	}
</script>

<style lang="scss">
	.storeVisit {
		height: 237rpx;
		margin-top: 20rpx;
		padding: 21rpx 28rpx 20rpx 21rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.visit {
			.subsection {
				justify-content: space-between;
				padding-right: 20rpx;
				display: flex;
			}
		}

		.titile {
			font-size: 24rpx;
			color: #999999;
		}

		.store {
			display: flex;
			text-align: left;
			justify-content: space-between;

			.number {
				margin-top: 29rpx;
				//right     // 下
				background: #FFF3EF;
				padding-left: 128rpx;
				width: 318rpx;
				padding: 30rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				.num {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #333333;
					font-weight: 800;
				}
			}

			.numberPeople {
				padding: 14rpx;
				background: #EFF6FF;
				margin-top: 29rpx;
				padding: 30rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				width: 318rpx;
				margin-left: 25rpx;

				.num {
					font-size: 28rpx;
					color: #333333;
					margin-top: 10rpx;
					font-weight: 800;
				}
			}
		}
	}

	.cardItem {
		width: 702rpx;
		height: 498rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.cardItemTop {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				color: #333333;
			}

			.timeBox {
				width: 363rpx;
				height: 54rpx;
				background: #FAF7F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				.ipt {
					padding: 0 20rpx;
					line-height: 54rpx;
					height: 54rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.searchBox {
		width: 363rpx;
		height: 54rpx;
		background: #FAF7F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.txt {
			font-size: 20rpx;
			color: #999999;
		}
	}
</style>