<template>
	<el-container>
		<el-aside
			width="180px"
			v-if="
				$route.name &&
				!$route.meta.single &&
				$route.name != 'templateFormSingle'
			"
		>
			<el-card shadow="never">
				<div slot="header" class="clearfix">
					<b>自定义菜单</b>
				</div>
				<el-menu
					:default-active="activeMenuIndex"
					@select="handleSelect"
					unique-opened
				>
					<template v-for="menu in menus">
						<el-menu-item
							v-if="!menu.children || menu.children.length == 0"
							:key="menu.id"
							:index="
								menu.href
									? '/statement/' + menu.alias + '?href=' + menu.href
									: '/statement/' + menu.alias
							"
							:class="{ 'is-active': menu.id == activeMenuIndex }"
							>{{ menu.name }}</el-menu-item
						>
						<el-submenu v-else :key="menu.id" :index="menu.id">
							<template slot="title">{{ menu.name }}</template>
							<template v-if="menu.children && menu.children.length > 0">
								<el-menu-item
									v-for="item in menu.children"
									:key="item.id"
									:index="
										item.href
											? '/statement/' + item.alias + '?href=' + item.href
											: '/statement/' + item.alias
									"
									:class="{ 'is-active': menu.id == activeMenuIndex }"
									>{{ item.name }}</el-menu-item
								>
							</template>
						</el-submenu>
					</template>
				</el-menu>
			</el-card>
		</el-aside>
		<el-main :class="{ 'statement-main__content': hasPadding() }" class="ddd">
			<router-view />
		</el-main>
	</el-container>
</template>

<script>
import {mapState} from 'vuex';

export default {
	name: 'statement',
	computed: {
		...mapState({
			menus: function (state) {
				const this_ = this;
				this_.activeMenuIndex = state.menu.currentMenu.id;
				return state.menu.menuMaps[state.menu.currentMenu.id];
			},
		}),
	},
	data() {
		return {
			activeMenuIndex: '',
			href: '',
		};
	},
	watch: {
		menus: {
			handler: function (newVal, oldValue) {
				if (newVal && newVal != oldValue) {
					this.init();
				}
			},
			deep: true,
			immediate: true,
		},
		$route(to, from) {
			this.hasPadding();
		},
	},
	mounted() {},
	methods: {
		hasPadding() {
			return (
          location.pathname.split('/').slice(0, 5).join('/') ===
          window.context.baseUrl + 'statement/template/preview' ||
          location.pathname.split('/').slice(0, 4).join('/') ===
          window.context.baseUrl + 'statement/draftList' ||
          location.pathname.split('/').slice(0, 5).join('/') ===
          '/fvue/statement/template/preview' ||
          location.pathname.split('/').slice(0, 4).join('/') ===
          '/fvue/statement/draftList'
			);
		},
		init() {
			if (this.menus && this.menus.length > 0) {
				let activeMenuIndex = this.menus[0].alias
					? this.menus[0].alias
					: this.menus[0].children[0]
					? this.menus[0].children[0].alias
					: null;
				//判断是否是URL地址菜单
				if (this.menus[0].href) {
					this.href = this.menus[0].href;
				} else {
					this.href = '';
					activeMenuIndex = '/statement/' + activeMenuIndex;
				}
				this.handleSelect(activeMenuIndex);
			}
		},
		handleSelect(key) {
			const this_ = this;
			setTimeout(function () {
				let Base64 = require('js-base64').Base64;
				if (this_.href) {
					//URL地址菜单
					let href = Base64.encode(this_.href);
					this_.href = '';
					this_.$router.push({ path: key, query: { href: href } });
				} else {
					//URL地址菜单
					if (key.indexOf('?href=') > -1) {
						let paths = [];
						key = key.replace('/statement/', '');
						paths = key.split('?href=');
						let href = Base64.encode(paths[1]);
						this_.$router.push({ path: '/' + paths[0], query: { href: href } });
					} else {
						//数据报表菜单
						this_.$router.push({ path: key });
					}
				}
			}, 200);
		},
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-main {
	padding-top: 0px;
	padding-bottom: 0px;
}
.statement-main__content {
	padding-left: 0;
	background: #fff;
	margin: 0 20px 20px 0;
	//margin: 0;
	//padding: 0;
	.template-preview-container {
		height: calc(100% - 10px);

		/deep/ .data_view {
			height: 100%;

			.data-preview-wrap {
				height: calc(100% - 60px);

				.table-main {
					overflow: hidden;
				}
			}
		}
	}
}
div[name='online-form'] {
	height: 100%;
}
.el-card {
	background-color: transparent;
}

.el-card /deep/ .el-card__header {
	height: 48px;
	border-bottom: 1.5px solid #dedede;
	color: #a2a2a2;
}

.el-card /deep/ .el-card__body {
	padding: 0;
}

.menu-ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.menu-ul > li {
	padding: 10px 0 10px 0;
	height: 30px;
	line-height: 30px;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid #dfdfdf;
}

.menu-ul > li:last-child {
	border-bottom: 0;
}

.menu-ul > li > a {
	color: $--color-text-regular;
	padding: 2px 5px 2px 17px;
	border-left: 2px solid transparent;
	text-decoration: none;
}

.menu-ul > li > a:hover {
	color: $--theme-color;
}

.menu-ul > li > a.router-link-active {
	border-left: 2px solid $--theme-color;
	color: $--theme-color;
}

.el-menu,
/deep/ .el-menu {
	background-color: transparent;
	border-right: none;
}
</style>
