<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/default/header::header(null,null)"></div>
<body>
<div class="main-content index-page clearfix">
    <div class="post-lists">
        <div class="post-lists-body">
            <div class="post-list-item" th:each="article: ${articles.list}">
                <div class="post-list-item-container">
                    <a th:href="${commons.permalink(article)}" class="item-thumb  bg-deepgrey"
                       th:style="'background-image:url('+@{${commons.show_thumb(article)}}+');'">
                        <dir class="item-desc" th:text="${article.tags}"></dir>
                    </a>
                    <div class="item-slant reverse-slant &lt; bg-deepgrey"></div>
                    <div class="item-slant"></div>
                    <div class="item-label">
                        <div class="item-title"><a th:href="${commons.permalink(article)}"
                                                   th:text="${article.title}"></a>
                        </div>
                        <div class="item-meta clearfix">
                            <div th:class="'item-meta-ico '+ ${commons.show_icon(article.cid)}"
                                 th:style="'background: url('+@{/user/img/bg-ico.png}+');no-repeat;background-size: 40px auto;' "></div>
                            <div class="item-meta-cat" th:utext="${commons.show_categories(article.categories)}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lists-navigator clearfix">
        <div th:replace="comm/macros::pageNav(${articles},'←','→','page')"></div>
    </div>
    <div id="aplayer" ></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script>
        let vm3 = new Vue({
            el: "#aplayer",
            data: {
                id: "935959485",
                uri:"getPlayList",
                audio: []
            },
            created(){
            },
            mounted(){
                var playerOption = {
                    container: document.getElementById('aplayer'),
                    fixed: true,
                    volume:0.7,
                    order:'list',
                    theme:'#988bbc',
                    listFolded:false,
                    audio: []
                };
                this.initAplayer(playerOption,this.id);
            },
            methods:{
                initAplayer(playerOption,id){
                    var url = '/'+this.uri+"?listId="+id;
                    // 因为网易云接口出现异常所以暂时关闭这个接口
                    axios.get(url).then(response => {
                        console.log(response.data)
                        playerOption.audio=response.data;
                        var ap = new APlayer(playerOption);
                    }).catch(function (error) {
                        console.log(error);
                        alert('获取歌单信息失败！');
                    });
                }
            }
        });
    </script>
</div>

</body>
<div th:replace="themes/default/footer::footer">
</div>
</html>
