<template>
	<div class="inner-container">
		<el-col :span="3">
			<span :class="item.sts?'spanbox bg':'spanbox'" v-for="(item, index) in menuList" :key="index" :name="item.path" :label="item.label" @click="handleClick(item)">
				<el-badge :value="item.num" :max="99" :hidden="item.num == 0">
					<span style="padding-right: 10px;">{{item.label}}</span>
				</el-badge>
			</span>
			<!-- <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane v-for="(item, index) in menuList" :key="index" :name="item.path" :label="item.label">
				</el-tab-pane>
			</el-tabs> -->
		</el-col>
		<el-col :span="21">
			<div style="height: 100%">
				<router-view />
			</div>
		</el-col>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeName: "",
				showList: [],
				routerList: [{
						label: "月度部门预算",
						path: "/monthExcel",
						name: "monthExcel",
						sts:1,
						num:0
					},
					{
						label: "季度部门预算",
						path: "/quarterExcel",
						name: "quarterExcel",
						sts:0,
						num:0
					},
					{
						label: "年度部门预算",
						path: "/yearExcel",
						name: "yearExcel",
						sts:0,
						num:0
					},
					{
						label: "采购部门预算",
						path: "/projectExcel",
						name: "projectExcel",
						sts:0,
						num:0
					},
					// {
					// 	label: "预算回复",
					// 	path: "/recallAdmin",
					// 	name: "recallAdmin",
					// 	sts:0,
					// 	num:0
					// },
					{
						label: "预算模板管理",
						path: "/budgetList",
						name: "budgetList",
						sts:0,
						num:0
					},
                    {
                        label: "下发管理",
                        path: "/issueList",
                        name: "issueList",
                        sts:0,
                        num:0
                    },
				],
			};
		},
		computed: {
			menuList: function() {
				let arr = [];
				this.routerList.map((item) => {
					// arr.push(item);
					this.showList.map((row) => {
						if (item.path == row.jspUrl && row.systemflag == '1') {
							arr.push(item);
						}
					});
				});
				return arr;
			},
		},
		methods: {
			handleClick(val) {
				this.activeName = val.path;
				for (let i = 0; i < this.routerList.length; i++) {
					this.routerList[i].sts = 0;
				}
				val.sts = 1;
				if (this.$route.path != this.activeName) {
					this.$router.push(this.activeName);
				}
				this.getnunm();
			},
			getnunm(){
				this.$http({
					url: "/market/preTask/queryTaskToDoNumByFunc",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {},
				}).then((res) => {
					for (let i = 0; i < res.data.length; i++) {
						if(res.data[i].funcCode == '1000'){
							this.routerList[2].num = res.data[i].taskNum;
						}
						if(res.data[i].funcCode == '1001'){
							this.routerList[0].num = res.data[i].taskNum;
						}
						if(res.data[i].funcCode == '1003'){
							this.routerList[3].num = res.data[i].taskNum;
						}
						if(res.data[i].funcCode == '1004'){
							this.routerList[1].num = res.data[i].taskNum;
						}
					}
				});
			}
		},
		mounted() {
			this.activeName = this.$route.path;
		},
		created() {
			JSON.parse(sessionStorage.childrenMenus).map((item) => {
				this.showList.push(item);
			});
			this.getnunm();
		},
		watch: {
			$route(to, from) {
				this.activeName = this.$route.path;
			},
		},
	};
</script>
<style>
	.el-tabs__content {
		display: none;
	}
	.spanbox{
		display: block;
		text-align: center;
		padding: 10px 0;
		border-right: 3px solid #f1f1f1;
		margin-right: 20px;
	}
	.bg{
		border-right: 3px solid #0080FF;
		color: #007AFF;
	}
</style>
