<template>
	<div id="app" >
		<div class="bg" v-if="!(path == '/mourn/index' || path == '/mourn/detail')">
			<img src="@/assets/img/m1.png" />
		</div>
		<top-logo v-if="!(path == '/mourn/index' || path == '/mourn/detail')"></top-logo>
		<nav-bar v-if="!(path == '/mourn/index' || path == '/mourn/detail')"></nav-bar>
		<div class="main-wrapper" v-if="!(path == '/mourn/detail' || path == '/mourn/index')">
			<router-view />
		</div>
		<div v-if="path == '/mourn/detail' || path == '/mourn/index'">
			<router-view />
		</div>
		<audio id="audio" :src="require('./assets/music/bg-music.mp3')" loop ref="music" controls hidden></audio>
		<page-bottom v-if="!(path == '/mourn/detail' || path == '/mourn/index')"></page-bottom>
	</div>
</template>
<script>
	import TopLogo from "./components/topLogo/TopLogo.vue";
	import NavBar from "./components/navBar/NavBar.vue";
	import PageBottom from "./components/pageBottom/PageBottom.vue";
	export default {
		components: {
			NavBar,
			TopLogo,
			PageBottom,
		},
		data() {
			return {
				path: "",
			};
		},
		created() {},
		mounted() {
			this.path = this.$route.path;

		},
		watch: {
			$route(e) {
				//   alert(e)
				this.path = e.path;
				if (e.fullPath.indexOf("mourn") != -1) {
					this.playMusic();
					// document.getElementById('app').addEventListener('mousemove', ()=> {
					// 	// console.log('dddddd')
					// 	this.playMusic();
					// })
				} else {
					this.playpause()
				}
				// alert(e.path)
				// alert(this.path)
			},
		},
		methods: {
			isMobile() {
				if (/android/i.test(navigator.userAgent)) {
					//document.write("This is Android'browser.");//这是Android平台下浏览器
					return true;
				}
				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					//document.write("This is iOS'browser.");//这是iOS平台下浏览器
					return true;
				}
				return false;
			},
			playMusic() {
				let obj = this
				obj.$refs.music.play().catch(err => {
					obj.$confirm('网页背景音乐已暂停，是否继续播放？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						obj.playMusic()
						// this.$message({
						//   type: 'success',
						//   message: '删除成功!'
						// });
					}).catch(() => {
						// this.$message({
						//   type: 'info',
						//   message: '已取消删除'
						// });          
					});
				});
			},
			playpause() {
				this.$refs.music.pause();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.body-box {
		-webkit-filter: grayscale(100%); /* webkit */
		-moz-filter: grayscale(100%); /*firefox*/
		-ms-filter: grayscale(100%); /*ie9*/
		-o-filter: grayscale(100%); /*opera*/
		filter: grayscale(100%);
		filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
		filter:gray; /*ie9- */
		
	}
	#app {
		// max-width: 1920px;
		min-width: 1200px;
		margin: 0 auto;
	}

	.main-wrapper {
		width: 1200px;
		margin: 0 auto;
	}

	.bg {
		// position: absolute;
		// left: 0;
		// right: 0;
		margin: 0 auto;
		height: 300px;
		margin-bottom: -300px;

		// z-index: -1;
		img {
			// min-width: 100vw;
			width: 100%;
			height: 300px;
		}
	}
</style>
