<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',{'show-link':item.url ? true : false}]">
					<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="fastDoFn(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">
        <span>最近15天收入</span>
        <span class="title_right">本月收入： {{ incomeData.month || 0 }}<span style="margin-right: 20px;"></span>上月收入： {{ incomeData.previousMonth || 0 }}</span>
      </div>
			<div class="card-body">
				<div class="echart-wrap">
					<trend-echart ref="incomeEchart" :chartData="incomeData.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>
	</div>
</template>

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

export default {
	components: {
		TrendEchart
	},

	data() {
		return {
			// 总数
			totalData: [
				{
					name: '收入',
					icon: 'el-icon-s-marketing',
					val: '￥0.00',
					url: '/assets/list'
				},
				{
					name: '开单',
					icon: 'el-icon-s-order',
					val: 0,
					url: '/order/list?status=-1'
				},
				{
					name: '访客',
					icon: 'el-icon-s-custom',
					val: 0,
					url: '/member/list'
				},
				{
					name: '新学员',
					icon: 'el-icon-user',
					val: 0,
					url: '/member/list?type=1'
				}
			],
			// 待处理
			pendingData: [
				{
					name: '待付款订单',
					val: 0,
					url: '/order/list?status=0'
				},
				{
					name: '配送中订单',
					val: 0,
					url: '/order/list?status=2'
				},
				{
					name: '已完成订单',
					val: 0,
					url: '/order/list?status=5'
				},
				{
					name: '待配送订单',
					val: 0,
					url: '/order/list?status=1'
				},
				{
					name: '全部订单',
					val: 0,
					url: '/order/list?status=-1'
				}
			],
			// 快捷入口
			entryData: [
				{
					name: '订单管理',
					icon: 'icondingdanguanli',
					url: '/order/list'
				},
				{
					name: '客户管理',
					icon: 'iconkehuguanli',
					url: '/member/list'
				},
				{
					name: '添加商品',
					icon: 'icontupiantianjia',
					url: '/goods/add'
				},
				{
					name: '商品管理',
					icon: 'iconshangpinguanli',
					url: '/goods/list'
				},
				{
					name: '广告管理',
					icon: 'iconguanggao',
					url: '/ad/list'
				}
			],
			// 总统计
			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.income}`;
				this.totalData[1].val = res.todayData.order;
				this.totalData[2].val = res.todayData.visit;
				this.totalData[3].val = res.todayData.newStudent;
				//待处理事务
				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.totalOrder;
				//总览
				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();
		},
		noticeFn(item) {
			window.open(item.url);
		},
		fastDoFn(item) {
			if (item.url) {
				this.$util.pageTo(item);
			} else {
				this.$message.success('即将开通...');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	overflow-y: auto;
	overflow-x: hidden;
  .title_right{
    color: #666;
    font-weight: 400;
  }
	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 20px;

		.card-title {
			color: #000;
			padding: 20px 20px 0 20px;
			font-size: 14px;
			font-weight: bold;
      display: flex;
      justify-content: space-between;
		}

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

	.card-statistics {
		@include disFlex(center, space-between);
		.block {
			width: calc(25% - 60px);
			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;
						}
					}
				}
			}
			.show-link {
				cursor: pointer;
			}
		}
	}

	.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;
				font-size: 13px;
				&: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 40px;
			color: $fontColor2;
			.list {
				text-align: center;
				margin-bottom: 10px;
				font-size: 14px;
				&: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 40px;
			color: $fontColor2;
			.list {
				text-align: center;
				margin-bottom: 10px;
				font-size: 14px;
				// &:hover {
				// 	color: $mainColor;
				// 	cursor: pointer;
				// }
				.num {
					font-size: 20px;
					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;
				font-size: 14px;
				text-align: left;
				& > div:first-child {
					margin-bottom: 50px;
				}
				.num {
					color: #333;
					font-size: 20px;
					margin-top: 10px;
				}
			}
			.echart-wrap {
				width: 100%;
				border-left: 1px solid $borderColor;
				.echart-tit {
					color: $fontColor2;
					padding-left: 20px;
					font-size: 14px;
				}
			}
		}
	}

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