<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:replace="themes/owlfeng/header::header"></div>
<body>
<div id="container">
    <!-- Main hero unit for a primary marketing message or call to action -->
    <div id="main">
        <el-carousel  v-loading="loading"  :interval="10000" arrow="always" height="450px" indicator-position="none">
            <el-carousel-item  v-for="(item,index) in items" :key="index">
                <a :href="item.url"><img :src="item.image" height="100%" width="100%"/></a>
            </el-carousel-item>
        </el-carousel>

    </div>
    <div id="secondNavi">

        <el-row class="col-sm-8 col-lg-8 col-sm-8 col-xs-12 col-md-offset-2 col-lg-offset-2 col-sm-offset-2">
            <hr/>
            <el-col class="col-lg-4" :span="8" v-for="(o,index) in titles" :key="index">
                <el-card :body-style="{ padding: '0px' }">
                    <a :href="o.turl"><img :src="o.timage"class="image" height="100%" width="100%"></a>
                </el-card>
            </el-col>
        </el-row>

        <div class="col-sm-8 col-lg-8 col-sm-8 col-xs-12 col-md-offset-2 col-lg-offset-2 col-sm-offset-2">

            <div>
                <hr style="color: cornflowerblue"/>
                <div>
                    <span class="discovery"><i class="fa fa-pagelines" aria-hidden="true"></i>discovery</span>
                </div>

            </div>
            <div id="firstBox" v-for="(article,index) in articles"
                 class="articleBox col-xs-12 col-sm-12 col-lg-12 col-sm-12  ">

                <div v-if="odd(index)">
                    <div class="articleBoxText col-xs-6 col-md-2  col-lg-5  col-sm-6">
                        <a :href="'/'+'article'+'/'+article.cid">{{article.title}}</a>
                        <div>{{article.tags}}</div>
                        <a :href="'/'+'article'+'/'+article.cid">{{article.title}}</a>
                        <div>{{article.tags}}</div>
                    </div>
                    <div class="articleBoxImg  img-rounded  col-xs-6 col-md-6  col-lg-7  col-sm-6"
                         :style="'background-image:url('+'/user/img/rand/'+GetRandomNum(1,19)+'.jpg'+');'">
                    </div>
                </div>

                <div v-else>
                    <div class="articleBoxImg  img-rounded col-xs-6 col-md-6  col-lg-7  col-sm-6"
                         :style="'background-image:url('+'/user/img/rand/'+GetRandomNum(1,19)+'.jpg'+');'">
                    </div>
                    <div class="articleBoxText col-md-2 col-xs-6 col-lg-5  col-sm-6">
                        <a :href="'/'+'article'+'/'+article.cid">{{article.title}}</a>
                        <div>{{article.tags}}</div>
                        <a :href="'/'+'article'+'/'+article.cid">{{article.title}}</a>
                        <div>{{article.tags}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script th:inline="javascript">
    // 全局注册组件
    var vm = new Vue({
        el: "#container",
        url:"getOption",
        data: {
            articles:/*[[${articles.list}]]*/[],
            items: [{
                    url: "https://www.baidu.com/",
                    image: "https://view.moezx.cc/images/2018/01/03/sakura.png",
                }, {
                    url: "https://www.baidu.com/",
                    image: "https://view.moezx.cc/images/2018/01/03/sakura.png",
                }
                    , {
                    url: "https://www.baidu.com/",
                    image: "https://view.moezx.cc/images/2018/01/03/sakura.png",
                }
                    , {
                    url: "https://www.baidu.com/",
                    image: "https://view.moezx.cc/images/2018/01/03/sakura.png",
                }
            ],
            titles:[
                {timage:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    ,turl:"https://www.baidu.com/"},
                {timage:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                     turl:"https://www.baidu.com/"},
                {timage:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                     turl:"https://www.baidu.com/"},
            ],
            loading:"",
            carousel:"",
        },
        created: function () {
            console.log(this.articles)
            // this.loading = true
        },
        mounted() {
            this.init()
            // this.loading = false
            this.$nextTick(()=>{

            })
        },
        methods: {
            init() {
                // axios.get(this.url).then(response => {
                //     console.log(response.data)
                //
                // }).catch(function (error) {
                //     console.log(error);
                //     alert('获取歌单信息失败！');
                // });
            },
            GetRandomNum(Min, Max) {
                const Range = Max - Min;
                const Rand = Math.random();
                return (Min + Math.round(Rand * Range));
            },
            odd(index) {
                console.log(index % 2 === 1);
                return index % 2 === 1;
            },
            setActiveItem(index) {
                this.$ref.carousel.setActiveItem(index);
            }


        }
    })
</script>
<div th:replace="themes/owlfeng/footer::footer"></div>
</body>

</html>