<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="footer">
<body>
<footer>
    <div id="aplayer" ></div>
    <div class="footer-meta col-sm-12 col-lg-12 col-sm-12  col-xs-12  ">
        <div class="footer-container col-sm-8 col-lg-6 col-sm-8  col-xs-8 col-md-offset-5 col-lg-offset-5 col-xs-offset-3">
            <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 class="meta-item meta-copyright">
                <div class="meta-copyright-info">
                    <div class="info-text">
                        <!--<a href="http://www.owlfeng.cn" class="info-logo">-->
                            <!--<img th:src="@{/user/img/logo.png}"-->
                                 <!--th:alt="${commons.site_title()}" class="img-rounded"/>-->
                        <!--</a>-->
                        <br/>
                        <th:block th:if="${option}!=null and ${option.getValue()}!=''">
                           &copy; 版权所有 <a href="https://github.com/owlfeng1021/owlBlog" target="_blank" rel="nofollow">owlBlog</a> <p th:text="${option.getValue()}"></p>
                        </th:block>
                    </div>
                </div>
            </div>

        </div>
    </div>
</footer>

</body>
</html>