<template>
	<lay-layout class="home-layout">
		<lay-header>
			<lay-container fluid="true" style="padding: 10px"></lay-container>
			<div class="height20"></div>
			<lay-row space="10">
				<lay-col md="6">
					<div class="home-box1">
						<p class="icon">
							<lay-icon type="layui-icon-note" size="26px"></lay-icon>
						</p>
						<p class="desc">
							<label class="count">{{ topCount[0] }}</label>
							<label>未完代办事项</label>
						</p>
					</div>
				</lay-col>
				<lay-col md="6">
					<div class="home-box1">
						<p class="icon c1">
							<lay-icon type="layui-icon-form" size="26px"></lay-icon>
						</p>
						<p class="desc">
							<label class="count">{{ topCount[1] }}</label>
							<label>今日新增待办</label>
						</p>
					</div>
				</lay-col>
				<lay-col md="6">
					<div class="home-box1">
						<p class="icon c2">
							<lay-icon type="layui-icon-slider" size="26px"></lay-icon>
						</p>
						<p class="desc">
							<label class="count">{{ topCount[2] }}</label>
							<label>协同路线</label>
						</p>
					</div>
				</lay-col>
				<lay-col md="6">
					<div class="home-box1">
						<p class="icon c3">
							<lay-icon type="layui-icon-download-circle" size="26px"></lay-icon>
						</p>
						<p class="desc">
							<label class="count">{{ topCount[3] }}</label>
							<label>我参与的路线</label>
						</p>
					</div>
				</lay-col>
			</lay-row>
		</lay-header>
		<lay-header class="layui-header2">
			<div class="height10"></div>
			<div class="lay-row2">
				<lay-row space="10">
					<lay-col md="24">
						<h1>快捷入口</h1>
					</lay-col>
					<lay-col md="3" v-for="(item,index) in fastList" :key="index" @click="_goToMore(index)">
						<div :class="'home-box2 c'+index" :title="item.FName">{{item.FName}}</div>
					</lay-col>
				</lay-row>
			</div>
		</lay-header>
		<lay-body>
			<div class="lay-row3">
				<div class="lay-row3-div" ref="lay-row3-div">
					<div class="home-box3">
						<h2 @click="_goToMore(-1)">点击查看更多待办事项</h2>
						<h1>最新待办事项</h1>
					</div>
					<lay-table v-if="tableHeight!=''" :height="tableHeight" :columns="dataColumn"
						:dataSource="dataList"></lay-table>
				</div>
			</div>
		</lay-body>
	</lay-layout>
</template>
<style>
	.height20 {
		height: 20px;
		display: block;
	}

	.height10 {
		height: 10px;
		display: block;
	}

	.height30 {
		height: 30px;
		display: block;
	}

	.home-layout .layui-header {
		text-align: center;
		min-height: 148px;
		height: auto;
		background-color: unset;
		overflow-x: hidden;
	}

	.home-layout .layui-header2 {
		min-height: 194px;
	}

	.home-layout .layui-body {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10px auto;
		overflow-x: hidden;
	}

	.home-box1 {
		width: 70%;
		display: inline-block;
		text-align: center;
		line-height: 100px;
		height: 100px;
		border-radius: 4px;
		overflow: hidden;
	}

	.home-box1 p {
		display: inline-block;
		height: 100px;
		overflow: hidden;
		position: relative;
		border-radius: 4px 0 0 4px;
		color: #fff;
	}

	.home-box1 .icon {
		width: 40%;
		background: #FD4D4F;
	}

	.home-box1 .icon.c1 {
		background: #32BDB6;
	}

	.home-box1 .icon.c2 {
		background: #AAEB0E;
	}

	.home-box1 .icon.c3 {
		background: #597CF4;
	}

	.home-box1 .desc {
		width: calc(60% - 2px);
		background: #FFF;
		color: #444;
		padding: 20px 0;
		height: 58px;
		color: #595959;
		border: 1px solid rgba(187, 187, 187, 100);
		border-radius: 0 4px 4px 0;
	}

	.home-box1 .desc label {
		display: block;
		line-height: 28px;
	}

	.home-box1 .desc .count {
		font-size: 24px;
	}

	.lay-row2 {
		background: #fff;
		width: 95%;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		padding: 20px;
	}

	.lay-row2 h1 {
		color: #101010;
		font-weight: bold;
		text-align: left;
		margin-bottom: 5px;
	}

	.home-box2 {
		height: 94px;
		width: 110px;
		display: block;
		background: #000;
		line-height: 94px;
		border-radius: 4px;
		cursor: pointer;
		margin-bottom: 10px;
		color: #fff;
		font-size: 12px;
	}

	.home-box2.c0 {
		background: #36cfca;
	}

	.home-box2.c1 {
		background: #597cf4;
	}

	.home-box2.c2 {
		background: #e99d42;
	}

	.home-box2.c3 {
		background: #36cf3c;
	}

	.home-box2.c4 {
		background: #F4595c;
	}

	.home-box2.c5 {
		background: #31BDEC;
	}

	.home-box2.c6 {
		background: #FF5722;
	}

	.home-box2.c7 {
		background: #AAEB0E;
	}

	.lay-row3 {
		background: #fff;
		width: 95%;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		padding: 0 20px 20px;
		height: calc(100% - 40px);
	}

	.lay-row3-div {
		display: block;
		overflow: hidden;
		margin-bottom: 20px;
		clear: both;
		height: 100%;
	}

	.lay-row3 .home-box3 {
		height: 60px;
		line-height: 60px;
		margin-top: 4px;
	}

	.lay-row3 .home-box3 h1 {
		font-weight: bold;
		display: inline-block;
	}

	.lay-row3 .home-box3 h2 {
		font-weight: 400;
		color: #168ADD;
		display: inline-block;
		float: right;
		font-size: 14px;
		margin-right: 2px;
		cursor: pointer;
	}
</style>
<script>
	import {
		ref
	} from "vue";
	import {
		getHomeTopCount,
		getMenuList
	} from "/src/api/api/user";
	import {
		getPageList
	} from "/src/api/api/common";
	import {
		useRouter
	} from "vue-router";

	export default {
		setup() {
			let dataColumn = [{
					title: "销售号",
					key: "FSaleCode",
					align: "center"
				},
				{
					title: "发起时间",
					key: "FAddDate",
					align: "center",
					width: "182px"
				},
				{
					title: "当前流程",
					key: "FName",
					align: "center",
					width: "200px"
				},
				{
					title: "事项状态",
					key: "FState",
					align: "center",
					width: "98px"
				},
				{
					title: "任务来源",
					key: "FDesc",
					align: "center"
				}
			];
			const dataList = ref([]);
			const topCount = ref([" ", " ", " ", " "]);
			const tableHeight = ref("");
			const routerInfo = useRouter();
			const fastList = ref([]);
			return {
				topCount,
				dataColumn,
				dataList,
				tableHeight,
				routerInfo,
				fastList
			}
		},
		mounted() {
			this._getHomeTopCount();
			let height = parseInt(this.$refs["lay-row3-div"].offsetHeight) - 100;
			this.tableHeight = height + "px";
			this._getHomeFast();
			this._getHomeNeed(height / 40);
		},
		methods: {
			async _getHomeTopCount() {
				this.topCount = await getHomeTopCount() || [0, 0, 0, 0];
			},
			async _getHomeFast() {
				let result = await getMenuList({});
				let fastList = [];
				result.forEach((first) => {
					first.FChild.forEach((second) => {
						if (second.FName.indexOf("全部") == -1 && second.FName.indexOf("管理") == -1) {
							if (fastList.length < 8) fastList.push(second);
						}
					});
				});
				this.fastList = fastList;
			},
			async _getHomeNeed(count) {
				let postData = {
					FPageIndex: 1,
					FPageSize: Math.floor(count)
				}
				postData.FPageSize = postData.FPageSize < 5 ? 5 : postData.FPageSize;
				let result = await getPageList(postData, "Task");
				result.Data.List = result.Data.List || [];
				result.Data.List.forEach((item) => {
					item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate);
					item.FState = item.FState == 2 ? "已完成" : "进行中";
				});
				this.dataList = result.Data.List || []
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			//更多待办事项
			_goToMore(index) {
				let path = "";
				if (index == -1) path = '/need/all';
				else path = this.fastList[index].FRemark;
				this.routerInfo.push(path);
			}
		}
	}
</script>
