<template>
	<el-container>
		<el-aside :width="'60px'">
			<layout-aside />
		</el-aside>
		<el-container>
			<!-- 头部 -->
			<el-header height="71px">
				<layout-header />
			</el-header>
			<!-- 主体 -->
			<div class="app-main">
				<router-view v-slot="{ Component, route }">
					<keep-alive :include="keepAliveIncludes">
						<component
							:is="Component"
							:key="route.fullPath"
							v-if="!route.meta.keepAlive"
						/>
					</keep-alive>
				</router-view>
			</div>
		</el-container>
	</el-container>
</template>
<style lang="scss" scoped>
.el-aside {
	background-color: #161616;
	z-index: 2000;
}
.el-header {
	background-color: #e8edef;
	padding: 0;
}
.app-main {
	height: -moz-calc(100vh - 16px);
	height: -webkit-calc(100vh - 16px);
	height: calc(100vh - 16px);
	background-color: #e8edef;
}
@import '@/assets/style/saleOrder/orderList.scss';
</style>
<script>
import { LayoutAside, LayoutHeader } from '@/components/layout/libs/index.js';
import { mapState } from 'vuex';
export default {
	name: 'Layout',
	components: {
		'layout-aside': LayoutAside,
		'layout-header': LayoutHeader,
	},
	created() {
		let status = localStorage.getItem('examineStatus') || '';
		this.online();
		if (!status) {
			this.getStatus();
		}
	},
	methods: {
		initSelectArray(data) {
			let arr = [];
			if (!data || JSON.stringify(data) === '{}') {
				console.error('initSelectArray方法接受一个对象并转为数组');
				return [];
			}
			for (let key in data) {
				let obj = {};
				obj.value = key;
				obj.label = data[key];
				arr.push(obj);
			}
			return arr;
		},
		//获取审批流的select
		getStatus() {
			//防止上次账号的缓存
			this.$store.dispatch('examine/deleteAll');
			this.$store.dispatch('examine/deleteStaffAllList');

			const { examineStatus } = this.$store.state.storeData;
			if (examineStatus && JSON.stringify(examineStatus) !== '{}') {
				return;
			}

			this.$http.get('ApprovalFlow/status').then((res) => {
				if (res.status === 200) {
					res.data.useOrderType = this.initSelectArray(
						res.data.useOrderType
					);
					res.data.approvalWayType = this.initSelectArray(
						res.data.approvalWayType
					);
					res.data.method = this.initSelectArray(res.data.method);
					//approvalResult
					res.data.approvalResult = this.initSelectArray(
						res.data.approvalResult
					);
					this.$store.dispatch('examine/setExamine', res.data);
				}
			});
		},
		online() {
			//http://login.ops.f2b211.com/api/  'https://api.mingpin.f2b211.com/api/v1/Public/get/online'
			let pathurl = `https://proxy.ops.f2b211.com/api/v1/Public/get/online?c=${localStorage.getItem(
				'companyId'
			)}`;

			// let pathurl = `https://login.ops.f2b211.com/api/v1/Public/get/online?c=${localStorage.getItem(
			// 	'companyId'
			// )}`;
			fetch(pathurl, {
				method: 'GET',
				credentials: 'include',
				keepalive: true,
				headers: {
					Authorization: window.localStorage.getItem('userToken'),
				},
			});
		},
	},
	computed: {
		...mapState('leftAside', {
			leftMenuWidth: (state) => state.leftMenuWidth,
		}),
		...mapState('topNavTag', {
			keepAliveIncludes: (state) =>
				state && state.keepAliveIncludes
					? state.keepAliveIncludes.join(',')
					: [],
		}),
	},
};
</script>
