<template>
	<section class="app-main">
    <dial-view ref="dialView" />
		<transition name="fade-transform" mode="out-in">
		  <keep-alive :include="cachedViews">
			<router-view :key="key" />
		  </keep-alive>
		</transition>
		<!-- <div v-if="$store.state.settings.showFooter" id="el-main-footer">
		  <span v-html="$store.state.settings.footerTxt" />
		  <span> ⋅ </span>
		  <a href="https://beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
		</div> -->

		<!-- <div class="page-inline">

		</div> -->
	</section>
</template>

<script>
import dialView from "./dialView";
export default {
  name: 'AppMain',
  components: { dialView },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.dialView.init()
      // setTimeout(()=>{
      //   this.$refs.dialView.init('123456')
      // },5000)
    })
  },
}
</script>

<style lang="scss" scoped>
	.app-main {
		/* 50= navbar  50  */
		//min-height: calc(100vh - 50px);
		width: 100%;
		position: relative;
		overflow: hidden;
		/* overflow-y: auto; */
		flex:1;
		display:flex;
		padding:.925vh 0 26px;
	}

	//.page-inline{height:100%;width:100%;display:flex;}

	/* .fixed-header+.app-main {
	  padding-top: 50px;
	} */

	.hasTagsView {
	  .app-main {
		/* 84 = navbar + tags-view = 50 + 34
		min-height: calc(100vh - 84px);*/
	  }

	  /* .fixed-header+.app-main {
		padding-top: 84px;
	  } */
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
