<div th:fragment="html">
    <script>
        function showProductsAsideCategorys(cid){
            $("div.eachCategory[cid="+cid+"]").css("background-color","white");
            $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA");
            $("div.productsAsideCategorys[cid="+cid+"]").show();
        }

        function hideProductsAsideCategorys(cid){
            $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
            $("div.eachCategory[cid="+cid+"] a").css("color","#000");
            $("div.productsAsideCategorys[cid="+cid+"]").hide();
        }

        function homePageRegisterListeners(){
            $("div.eachCategory").mouseenter(function(){
                var cid = $(this).attr("cid");
                showProductsAsideCategorys(cid);
            });
            $("div.eachCategory").mouseleave(function(){
                var cid = $(this).attr("cid");
                hideProductsAsideCategorys(cid);
            });
            $("div.productsAsideCategorys").mouseenter(function(){
                var cid = $(this).attr("cid");
                showProductsAsideCategorys(cid);
            });
            $("div.productsAsideCategorys").mouseleave(function(){
                var cid = $(this).attr("cid");
                hideProductsAsideCategorys(cid);
            });

            $("div.rightMenu span").mouseenter(function(){
                var left = $(this).position().left;
                var top = $(this).position().top;
                var width = $(this).css("width");
                var destLeft = parseInt(left) + parseInt(width)/2;
                $("img#catear").css("left",destLeft);
                $("img#catear").css("top",top-20);
                $("img#catear").fadeIn(500);

            });
            $("div.rightMenu span").mouseleave(function(){
                $("img#catear").hide();
            });

            var left = $("div#carousel-of-product").offset().left;
            $("div.categoryMenu").css("left",left-20);
            $("div.categoryWithCarousel div.head").css("margin-left",left);
            $("div.productsAsideCategorys").css("left",left-20);

            $("div.productsAsideCategorys div.row a").each(function(){
                var v = Math.round(Math.random() *6);
                if(v == 1)
                    $(this).css("color","#87CEFA");
            });
        }

        $(function(){

            var data4Vue = {
                uri:'forehome',
                categories: []
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    linkDefaultActions();
                    this.load();
                },
                methods: {
                    load:function(){
                        var url =  this.uri;
                        axios.get(url).then(function(response) {
                            vue.categories = response.data;
                            vue.$nextTick(function(){
                                //要等渲染结束之后，才来进行监听，否则他们都没有被创建出来，监听也没有意义呀
                                homePageRegisterListeners();
                            })
                        });
                    }
                },
                filters:{
                    subTitleFilter:function(value) {
                        if (!value) return ''; //如果为空，则返回空字符串
                        return value.split(" ")[0]; //根据空格拆分，并且只获取数组第一个值
                    }
                }
            });

        });

    </script>

    <title>模仿天猫官网</title>
    <div class="homepageDiv">
        <div th:replace="include/fore/home/categoryAndcarousel::html" ></div>
        <div th:replace="include/fore/home/homepageCategoryProducts::html" ></div>
    </div>
</div>

<div th:fragment="html">
    <img src="img/site/catear.png" id="catear" class="catear"/>

    <div class="categoryWithCarousel">

        <div class="headbar show1">
            <div class="head ">

                <span style="margin-left:10px" class="glyphicon glyphicon-th-list"></span>
                <span style="margin-left:10px" >商品分类</span>

            </div>

            <div class="rightMenu">
                <span><a href=""><img src="img/site/chaoshi.png"/></a></span>
                <span><a href=""><img src="img/site/guoji.png"/></a></span>

                <span v-for="c,index in categories" v-if='index<=3'>
						<a :href="'category?cid='+c.id">{{c.name}}</a>
					</span>
            </div>

        </div>

        <div style="position: relative">
            <div th:replace="include/fore/home/categoryMenu::html" ></div>
        </div>

        <div style="position: relative;left: 0;top: 0;">
            <div th:replace="include/fore/home/productsAsideCategorys::html" ></div>
        </div>

        <div th:replace="include/fore/home/carousel::html" ></div>

        <div class="carouselBackgroundDiv">
        </div>

    </div>
</div>

<div th:fragment="html"> 	
	<div class="categoryMenu">
				<div :cid="c.id" class="eachCategory" v-for="c in categories">
					<span class="glyphicon glyphicon-link"></span>
					<a :href="'category?cid='+c.id">
						{{c.name}}
					</a>
				</div>
	</div>  
</div>

<div th:fragment="html"> 
	<div  :cid="c.id" class="productsAsideCategorys" v-for="c in categories">
		<div class="row show1" v-for="ps in c.productsByRow">
					<a :href="'product?pid='+p.id" v-for="p in ps" v-if="p.subTitle.length!=0">
						{{p.subTitle | subTitleFilter}}
					</a>		
					<div class="seperator"></div>
		</div>
	</div>
</div>
	

<div th:fragment="html"> 	
	<div id="carousel-of-product"  class="carousel-of-product carousel slide1" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-of-product" data-slide-to="1"></li>
	    <li data-target="#carousel-of-product" data-slide-to="2"></li>
	    <li data-target="#carousel-of-product" data-slide-to="3"></li>
	  </ol>
	
	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img class="carousel carouselImage" src="img/lunbo/1.jpg" >
	    </div>
	    <div class="item">
	      <img  class="carouselImage" src="img/lunbo/2.jpg" >
	    </div>
	    <div class="item">
			<img  class="carouselImage" src="img/lunbo/3.jpg" >
	    </div>
	
	    <div class="item">
	        <img  class="carouselImage" src="img/lunbo/4.jpg" >
	    </div>
	  </div>
</div>

<div th:fragment="html">
    <div class="homepageCategoryProducts">
        <div class="eachHomepageCategoryProducts" v-for="c in categories">
            <div class="left-mark"></div>
            <span class="categoryTitle">{{c.name}}</span>
            <br>
            <div class="productItem"  v-for="p,index in c.products" v-if="index<5" >
                <a :href="'product?pid='+p.id">
                    <img width="100px" :src="'img/productSingle_middle/'+p.firstProductImage.id+'.jpg'">
                </a>

                <a class="productItemDescLink" href="'product?pid='+p.id">
									<span class="productItemDesc">[热销]
									{{p.name | subStringFilter(0,20)}}
									</span>
                </a>
                <span class="productPrice">
									{{p.promotePrice | formatMoneyFilter}}
								</span>
            </div>
            <div style="clear:both"></div>
        </div>
        <img id="endpng" class="endpng" src="img/site/end.png">
    </div>
</div>