<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>PublicCMS VUE Template</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link href="${site.sitePath}assets/css/style.css" rel="stylesheet">
		<link href="${site.sitePath}assets/swiper/swiper.min.css" rel="stylesheet"/>
		<script src="https://unpkg.com/vue"></script>
		<script src="https://unpkg.com/vue-resource"></script>
	</head>
	<body>	
		<div id="app">
			<header class="header">
				<div class="top-bar">
					<div class="container">
						<a>{{ message }}</a>
					</div>
				</div>
				<div class="container clearfix-after">
					<a href="#" class="nav-icon"></a>
					<div class="logo">
						<a v-bind:href="dynamicPath+'vue.html'"><img v-bind:src="sitePath+'assets/images/logo.png'" v-if="sitePath !== ''" alt="Public CMS"></a>
					</div>
					<nav>
						<ul>
							<li>
								<a v-bind:href="dynamicPath+'vue.html'">Home</a>
							</li>
							<li v-for="category in categoryList">
								<a v-bind:href="category.url">{{ category.name }}</a>
							</li>
						</ul>
					</nav>
				</div>
			</header>
			<main>
				<div class="container">
					<div id="index-focus" class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"  v-for="focus in focusList"><a v-bind:href="focus.url"><img  v-bind:src="focus.cover" v-bind:alt="focus.title"></a></div>
						</div>
						<div class="swiper-pagination swiper-pagination-white"></div>
					</div> 
					<div class="data-list">
						<ul>
							<li v-for="content in contentList" class="clearfix-after">
								<a v-if="content.cover !== ''" v-bind:href="content.url">
									<img v-bind:src="content.cover" v-bind:alt=" content.title "/>
								</a>
								<h3><span>{{ content.publishDate}}</span><a v-bind:href="content.url">{{ content.title }}</a></h3>								
								<p>{{ content.description }}</p>
							</li>
						</ul>
					</div>
				</div>
			</main>
			<footer>
				<div class="container">
					<div class="footer-bottom">
						<p>Powered by <a href="http://www.publiccms.com/">Public CMS</a> </p>
					</div>
				</div>
			</footer>
		</div>
		<script src="//www.publiccms.com/assets/swiper/swiper.min.js"></script>
		<script src="${site.sitePath}assets/js/cms.analytics.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue.js!',
					title:'',
					sitePath:'',
					dynamicPath:'',
					categoryList: [],
					contentList:[],
					focusList:[],
					focusInited:false
				},
				created:function(){
					console.log('created');
					this.$http.get("hello.json").then(function(data){
						var temp=eval('('+data.bodyText+')');
						this.message=temp.message;
						this.sitePath=temp.sitePath;
						document.title=temp.siteName;
					});
					this.$http.get("categoryList.json").then(function(data){
						this.categoryList=eval('('+data.bodyText+')');
					});
					this.$http.get("contentList.json?pageSize=10").then(function(data){
						this.contentList=eval('('+data.bodyText+')');
					});
					this.$http.get("focusList.json").then(function(data){
						this.focusList=eval('('+data.bodyText+')');
					});
	
				},
				mounted:function(){
					console.log('mounted');
				},
				updated:function(){
					console.log('updated');
					if(!this.focusInited && this.focusList.length > 0){
						console.log('focus');
						var swiper_index = new Swiper('#index-focus', {
							loop: true,
							lazy: true,
							pagination: {
								el: '#index-focus .swiper-pagination',
								clickable: true,
							},
							slidesPerView: 2,
							spaceBetween: 10,
							breakpoints: {
								768: {
									slidesPerView: 1,
									spaceBetween: 0,
								}
							},
							autoplay: {
								delay: 5000,
								disableOnInteraction: false,
							}
						});
						this.focusInited=true;
					} 
				}
			});
		</script>
		<script>
			<@_sysConfigData code="site">${(object.statistics?no_esc)!}</@_sysConfigData>
		</script>
		<script>
			cmsAnalytics().report('${site.dynamicPath}api/visit/record');
		</script>
	</body>