<template>
	<div>
		<div class="record_date">
			<el-row>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总收益</div>
							<div class="text_color"><span>{{tableData.allMoney ? tableData.allMoney : 0}}</span>元</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">今日收益</div>
							<div class="text_color"><span>{{tableDataLj.shopEarningsDay ? tableDataLj.shopEarningsDay : 0}}</span>元
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本月收益</div>
							<div class="text_color">
								<span>{{tableDataLj.shopEarningsMonth ? tableDataLj.shopEarningsMonth : 0}}</span>元</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本月提现</div>
							<div class="text_color"><span>{{tableDataLj.cashMoney ? tableDataLj.cashMoney : 0}}</span>元
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总销量</div>
							<div class="text_color">
								<span>{{tableData.allCount ? tableData.allCount : 0}}</span></div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">用户评论</div>
							<div class="text_color"><span>{{tableData.countTakingByUserId ? tableData.countTakingByUserId : 0}}</span>条
							</div>
						</div>
					</div>
				</el-col>

			</el-row>
			<!-- <div>
				<el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
					<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;
				<el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right"
					type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
				</el-date-picker>
			</div> -->
			<div style="margin:5px;display: inline-block;">
				<span>开始时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
					type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
				</el-date-picker>&nbsp;&nbsp;&nbsp;
			</div>
			<div style="margin:5px;display: inline-block;">
				<span>截止时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right" type="datetime"
					format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间" @change="animeOrder">
				</el-date-picker>
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 10px;">
				<el-tab-pane label="订单数据分析" name="first">
					<el-row v-loading="tableDataLoading1">
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">订单收入</div>
									<div class="text_color"><span>{{tableData.orderMoney ? tableData.orderMoney : 0}}</span>元
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总订单数</div>
									<div class="text_color">
										<span>{{tableData.sumCountOrder ? tableData.sumCountOrder : 0}}</span>单</div>
								</div>
							</div>
						</el-col>

						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">退款金额</div>
									<div class="text_color">
										<span>{{tableData.refundMoney ? tableData.refundMoney : 0}}</span>元</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">访问人数</div>
									<div class="text_color">
										<span>{{tableData.countByUserId ? tableData.countByUserId : 0}}</span>人</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="订单管理" name="yonghu">
					<el-row v-loading="tableDataLoading1">
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待接单</div>
									<div class="text_color">
										<span>{{tableData.i5 ? tableData.i5 : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">制作中</div>
									<div class="text_color">
										<span>{{tableData.i2 ? tableData.i2 : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待取餐</div>
									<div class="text_color">
										<span>{{tableData.i3 ? tableData.i3 : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已完成</div>
									<div class="text_color">
										<span>{{tableData.i4 ? tableData.i4 : 0}}</span>人
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="商铺商品" name="mendian">
					<el-row v-loading="tableDataLoading1">
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">上架中</div>
									<div class="text_color">
										<span>{{tableData.putawayCount ? tableData.putawayCount : 0}}</span>个</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已下架</div>
									<div class="text_color">
										<span>{{tableData.soldoutCount ? tableData.soldoutCount : 0}}</span>个</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				tableData: {},
				tableDataNew: {},
				incomeData: {},
				activeName: 'first',
				tableDataLoading: true,
				tableDataLoading1: true,
				tableDataLoading2: true,
				data: '',
				time: '',
				type: '',
				flag: 'day',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				info2: {
					stockDate2: this.getNowTime2(), //日期
				},
				flags: [{
					value: 'day',
					label: '按天查询'
				}, {
					value: 'month',
					label: '按月查询'
				}, {
					value: 'year',
					label: '按年查询'
				}],
				taskStat: {},
				startTime:'',
				endTime:'',
				tableDataLj:{},
			}
		},
		mounted() {
			this.taskData()
			this.taskDataLj()
		},

		methods: {
			// 收益详情跳转
			updates(row) {
				this.$router.push({
					path: '/shopDatas',
					query: {
						shopId: row.shopId
					}
				})
			},
			// 商品列表跳转
			updates3(row) {
				this.$router.push({
					path: '/shopsListAdmin',
					query: {
						shopId: row.shopId
					}
				})
			},
			// 订单列表跳转
			updates4(row) {
				this.$router.push({
					path: '/shopsOrder',
					query: {
						shopId: row.shopId
					}
				})
			},
			//
			updates1(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId1
					}
				})
			},
			updates2(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			// 用户分析选择日期
			animeDat() {
				this._getData()
			},
			// 订单分析选择日期
			animeOrder() {
				this.taskData()
			},
			// 订单分析年月日
			orderfenxi(value) {
				let vanumber = value
				if (vanumber === 'day') {
					this.flag = 'day'
					this.taskData()
				}
				if (vanumber === 'month') {
					this.flag = 'month'
					this.taskData()
				}
				if (vanumber === 'year') {
					this.flag = 'year'
					this.taskData()
				}
			},
			// Tabs点击事件
			handleClick(tab, event) {
				this.page = 1
				this.limit = 10
				if (tab._props.label == '订单数据分析') {
					this.taskData()
				}
				if (tab._props.label == '订单管理') {
					this.taskData()
				}
				if (tab._props.label == '商铺商品') {
					this.taskData()
				}

			},
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			//处理默认选中当前日期
			getNowTime2() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() - now.getMonth() //得到月份
				var date = now.getDate() - now.getDate() + 1 //得到日期
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			// 用户统计
			_getData() {
				this.$http({
					url: this.$http.adornUrl('admin/dataCentre/dataCentre'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						let returnData = data.data;
						this.tableData = returnData
					}

				})
			},
			// 新增统计
			_getData2() {
				this.tableDataLoading2 = true
				this.$http({
					url: this.$http.adornUrl('admin/dataCentre/selectUserCenter'),
					method: 'get',
					params: this.$http.adornParams({
						'date': this.info.stockDate,
						'dateType': this.flag,
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						let returnData = data.data;
						this.tableDataNew = returnData
					}
					this.tableDataLoading2 = false
				})
			},
			// 收入统计
			incomeSelect() {
				this.$http({
					url: this.$http.adornUrl('statistical/income'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						let returnData = data.data;
						this.incomeData = returnData
					}
				})
			},
			//订单分析
			taskData() {
				this.tableDataLoading1 = true
				var shopId = this.$cookie.get('shopId')
				this.$http({
					url: this.$http.adornUrl('app/shop/shopHomePage'),
					method: 'get',
					params: this.$http.adornParams({
						// 'date': this.info.stockDate,
						// 'dateType': this.flag,
						'shopId':shopId,
						'startTime': this.startTime,
						'endTime': this.endTime,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data;
					this.tableData = returnData
					this.tableDataLoading1 = false
				})
			},
			taskDataLj() {
				var shopId = this.$cookie.get('shopId')
				this.$http({
					url: this.$http.adornUrl('app/shop/shopEarnings'),
					method: 'get',
					params: this.$http.adornParams({
						'shopId':shopId,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data;
					this.tableDataLj = returnData
				})
			},
			
			
		}
	}
</script>

<style scoped>
	.box {
		padding: 44px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}

	.box_num {
		font-size: 14px;
		color: #66b1ff;
	}

	.box_num .box_color {
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.box_num div span {
		font-size: 20px;
		margin-left: 5px;
	}

	.text_color {
		color: #4f9dec;
	}

	.text_color span {
		margin-right: 5px;
	}
</style>
