<template>
	<div class="home">
		<!-- total -->
		<div class="card-statistics">
			<div
				class="card block"
				v-for="(item, index) in totalData"
				:key="index"
				@click="$util.pageTo(item)"
			>
				<div class="val">
					<div class="left">
						<i :class="item.icon"></i>
					</div>

					<div class="right">
						<p>{{ item.name }}</p>
						<p>{{ item.val }}</p>
					</div>
				</div>
			</div>
		</div>
		<!-- pending -->
		<div class="card pending-wrap">
			<div class="card-title">待处理事务</div>
			<div class="card-body">
				<div class="pending-list-wrap">
					<div
						class="list"
						v-for="(item, index) in pendingData"
						:key="index"
						@click="$util.pageTo(item)"
					>
						<span>{{ item.name }}</span>
						<span>{{ item.val }}</span>
					</div>
				</div>
			</div>
		</div>
		<!-- entry -->
		<div class="card entry-wrap">
			<div class="card-title">运营快捷入口</div>
			<div class="card-body">
				<div class="entry-list-wrap">
					<div
						class="list"
						v-for="(item, index) in entryData"
						:key="index"
						@click="$util.pageTo(item)"
					>
						<div class="icon-wrap">
							<i class="iconfont" :class="[item.icon]"></i>
						</div>
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- income -->
		<div class="card card-income">
			<div class="card-title">收入统计</div>
			<div class="card-body">
				<div class="echart-left-wrap">
					<div>
						<div>本月收入</div>
						<div class="num">{{ incomeData.month || 0 }}</div>
					</div>
					<div>
						<div>上月收入</div>
						<div class="num">{{ incomeData.previousMonth || 0 }}</div>
					</div>
				</div>
				<div class="echart-wrap">
					<div class="echart-tit">最近七天收入</div>
					<trend-echart ref="incomeEchart" :chartData="incomeData.list"></trend-echart>
				</div>
			</div>
		</div>
		<!-- visitor -->
		<!-- <div class="card card-visitor">
			<div class="card-title">访问统计</div>
			<div class="card-body">
				<div class="echart-left-wrap">
					<div>
						<div>本月收入</div>
						<div class="num">{{ visitorData.month || 0 }}</div>
					</div>
					<div>
						<div>本周收入</div>
						<div class="num">{{ visitorData.week || 0 }}</div>
					</div>
				</div>
				<div class="echart-wrap">
					<div class="echart-tit">最近七天访问</div>
					<trend-echart ref="visitorEchart" :chartData="visitorData.list"></trend-echart>
				</div>
			</div>
		</div> -->
		<!-- allTotal -->
		<div class="card all-total-wrap">
			<div class="card-title">总览</div>
			<div class="card-body">
				<div class="all-total-list-wrap">
					<div class="list" v-for="(item, index) in allTotalData" :key="index">
						<div class="num">{{ item.val }}</div>
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 提示 -->
		<el-dialog title="提示" :visible.sync="promptModal" width="400px">
			<div class="prompt-wrap">
				<div
					class="prompt-list"
					v-for="(item, index) in noticeData"
					:key="index"
					@click="noticeFn(item)"
				>
					<div>{{ item.title }}</div>
					<div class="prompt-action">{{ item.action }}</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import TrendEchart from '@/components/echarts/trend.vue';

export default {
	components: {
		TrendEchart
	},

	data() {
		return {
			// 总数
			totalData: [
				{
					name: '今日访问量',
					icon: 'el-icon-s-data',
					val: 0
				},
				{
					name: '今日收入',
					icon: 'el-icon-s-marketing',
					val: '￥0.00',
					url: '/admin/assets/list'
				},
				{
					name: '今日订单',
					icon: 'el-icon-s-order',
					val: 0
				},
				{
					name: '新增客户',
					icon: 'el-icon-s-custom',
					val: 0
				},
				{
					name: '新增粉丝',
					icon: 'el-icon-s-flag',
					val: 0
				}
			],
			// 待处理
			pendingData: [
				{
					name: '待付款订单',
					val: 0,
					url: '/order/list'
				},
				{
					name: '配送中订单',
					val: 0,
					url: '/order/list'
				},
				{
					name: '已完结订单',
					val: 0,
					url: '/order/list'
				},
				{
					name: '待配送订单',
					val: 0,
					url: '/order/list'
				},
				{
					name: '待通知订单',
					val: 0,
					url: '/order/list'
				},
				{
					name: '全部订单',
					val: 0,
					url: '/order/list'
				}
			],
			// 快捷入口
			entryData: [
				{
					name: '发货',
					icon: 'icondingdanguanli',
					url: ''
				},
				{
					name: '订单管理',
					icon: 'icondingdanguanli',
					url: '/order/list'
				},
				{
					name: '添加图库',
					icon: 'iconshangpinguanli',
					url: 'goods/img-store'
				},
				{
					name: '客户管理',
					icon: 'iconkehuguanli',
					url: 'member/list'
				},
				{
					name: '添加商品',
					icon: 'icontupiantianjia',
					url: 'goods/add'
				},
				{
					name: '商品管理',
					icon: 'iconshangpinguanli',
					url: 'goods/list'
				},
				{
					name: '邀请有礼',
					icon: 'iconyaoqingyouli',
					url: 'invite/list'
				},
				{
					name: '广告管理',
					icon: 'iconguanggao',
					url: 'ad/list'
				}
				// {
				// 	name: '拼团管理',
				// 	path: ''
				// }
			],
			// 总统计
			allTotalData: [
				{
					name: '客户数',
					val: 10
				},
				{
					name: '粉丝数',
					val: 10
				},
				{
					name: '会员数',
					val: 10
				},
				{
					name: '总支出',
					val: 10
				},
				{
					name: '总收入',
					val: 10
				},
				{
					name: '总访问量',
					val: 10
				},
				{
					name: '剩余短信',
					val: 10
				},
				{
					name: '商品总数',
					val: 10
				}
			],
			// 收入统计
			incomeData: {
				list: {}
			},
			// 访问统计
			visitorData: {
				list: {}
			},
			// 通知
			promptModal: false,
			noticeData: []
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.getData();
		},
		getData() {
			this.$service.workbench.index().then(res => {
				if (this.$util.isEmpty(res)) return false;
				this.incomeData = res.incomeStat;
				this.visitorData = res.visitStat;
				this.noticeData = res.notice;
				if (res.notice.length) {
					this.promptModal = true;
				}
				setTimeout(() => {
					this.initChart();
				});

				// total
				this.totalData[0].val = res.todayData.visit;
				this.totalData[1].val = `￥${res.todayData.income || 0.0}`;
				this.totalData[2].val = res.todayData.order;
				this.totalData[3].val = res.todayData.user;
				this.totalData[4].val = res.todayData.fans;
				// pending
				this.pendingData[0].val = res.asset.unPayOrder;
				this.pendingData[1].val = res.asset.sendingOrder;
				this.pendingData[2].val = res.asset.finishOrder;
				this.pendingData[3].val = res.asset.unSendOrder;
				this.pendingData[4].val = res.asset.unNoticeOrder;
				this.pendingData[5].val = res.asset.totalOrder;
				// all-total
				this.allTotalData[0].val = res.asset.totalUser;
				this.allTotalData[1].val = res.asset.totalFans;
				this.allTotalData[2].val = res.asset.totalMember;
				this.allTotalData[3].val = res.asset.totalExpend;
				this.allTotalData[4].val = res.asset.totalIncome;
				this.allTotalData[5].val = res.asset.totalVisit;
				this.allTotalData[6].val = res.asset.remainSmsNum;
				this.allTotalData[7].val = res.asset.totalGoods;
			});
		},
		initChart() {
			this.$refs.incomeEchart.initChart();
			// this.$refs.visitorEchart.initChart();
		},
		noticeFn(item) {
			window.open(item.url);
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	overflow-y: auto;
	overflow-x: hidden;

	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 20px;

		.card-title {
			color: #000;
			padding: 20px 20px 0 20px;
		}

		.card-body {
			padding: 10px;
			margin-top: 20px;
		}
	}

	.card-statistics {
		@include disFlex(center, space-between);
		.block {
			width: calc(19% - 40px);
			background-color: #fff;
			// height: 100px;
			padding: 20px;

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

				.left {
					i {
						font-size: 34px;

						&.el-icon-s-goods {
							color: #ec5555;
						}

						&.el-icon-s-flag {
							color: #ffb431;
						}

						&.el-icon-s-custom {
							color: #9257db;
						}

						&.el-icon-s-marketing {
							color: #00d06f;
						}

						&.el-icon-s-data {
							color: red;
						}
					}
				}

				.right {
					p {
						&:first-child {
							font-size: 13px;
							text-align: right;
						}

						&:last-child {
							font-size: 24px;
							margin-top: 5px;
						}
					}
				}
			}
		}
	}

	.pending-wrap {
		.pending-list-wrap {
			@include disFlex(center, flex-start);
			flex-wrap: wrap;
			padding: 0 20px;
			color: $fontColor2;
			.list {
				@include disFlex(center, space-between);
				width: 28%;
				margin-right: 7%;
				margin-bottom: 18px;
				border-bottom: 1px solid $borderColor;
				padding-bottom: 6px;
				&:nth-child(3n) {
					margin-right: 0;
				}
				&:hover {
					color: $mainColor;
					cursor: pointer;
					border-color: $borderColor;
				}
			}
		}
	}

	.entry-wrap {
		.entry-list-wrap {
			@include disFlex(center, space-between);
			padding: 0 20px;
			color: $fontColor2;
			.list {
				text-align: center;
				margin-bottom: 10px;
				&:hover {
					color: $mainColor;
					cursor: pointer;
				}
				.icon-wrap {
					margin-bottom: 10px;
					.iconfont {
						font-size: 30px;
					}
				}
			}
		}
	}

	.all-total-wrap {
		.all-total-list-wrap {
			@include disFlex(center, space-between);
			padding: 0 20px;
			color: $fontColor2;
			.list {
				text-align: center;
				margin-bottom: 10px;
				// &:hover {
				// 	color: $mainColor;
				// 	cursor: pointer;
				// }
				.num {
					font-size: 24px;
					margin-bottom: 10px;
				}
			}
		}
	}

	.card-visitor,
	.card-income {
		.card-body {
			@include disFlex(flex-start, flex-start);
			.echart-left-wrap {
				width: 140px;
				margin-top: 20px;
				color: $fontColor2;
				padding-left: 10px;
				text-align: left;
				& > div:first-child {
					margin-bottom: 50px;
				}
				.num {
					color: #333;
					font-size: 26px;
					margin-top: 10px;
				}
			}
			.echart-wrap {
				width: calc(100% - 150px);
				border-left: 1px solid $borderColor;
				.echart-tit {
					color: $fontColor2;
					padding-left: 20px;
					font-size: 12px;
				}
			}
		}
	}

	.sales-top {
		color: red;
	}

	.sales-bottom {
		color: green;
	}
	// modal
	.prompt-wrap {
		.prompt-list {
			padding: 10px 0;
			width: 100%;
			border-bottom: 1px solid $borderColor;
			@include disFlex(center, space-between);
			.prompt-action {
				color: $mainColor;
			}
		}
	}
}
</style>
