{% extends 'base.html' %}
{% block main %}
    <div class="article">
        <div class="thread">
            {# 作者信息 #}
            <div class="user fix" onclick="window.location.href = '/user?uid={{ thread.result['data']['post']['user']['uid'] }}'">
                <img class="avatar" src="{{ thread.result['data']['post']['user']['avatar_url'] }}"/>
                <div class="userinfo">
                    <div class="nickname">{{ thread.result['data']['post']['user']['nickname'] }}</div>
                    <div class="describe">{{ thread.getAuthorDescribe() }}</div>
                </div>
            </div>
            <h1 class="title fix">{{ thread.result['data']['post']['post']['subject'] }}</h1>
            <p style="text-align: center">发布时间：{{ thread.getReleasedTime() }}</p>
            <div class="content fix">
{#                <h1 class="fix">{{ thread.result['data']['post']['post']['subject'] }}</h1>#}
                {# 如果是以文字为主的文章，则直接使用返回的HTML文件并进行表情包转义，否则使用内置的渲染器对文章进行渲染并插入图片 #}
                {% if type == 1 %}
                    <div class="ql-editor">{{ thread.getContent() | safe }}</div>
                    <script>
                        if($(".mhy-vod").length > 0){
                            let vod_lists = Object({{ thread.getVideo() | safe }});
                            let resolutions = document.getElementsByName('resolution');
                            let videoClass = document.getElementsByClassName('video');
                            let mhyvods = document.getElementsByClassName('mhy-vod');
                            for (let i = 0; i < vod_lists.length; i++) {
                                mhyvods[i].innerHTML += `<video controls width="600" class="video"></video>`;
                                mhyvods[i].innerHTML += '<p><label for="resolution">清晰度：</label>';
                                mhyvods[i].innerHTML += `<select name="resolution" id="resolution" class="resolution" style="width: 100px;" onchange="resolutionChange(${i})"></select></p>`;
                                let vod_list = vod_lists[i];
                                let cover = vod_list['cover'];
                                let vods = vod_list['resolutions'];
                                videoClass[i].poster = cover;
                                let options = ''
                                for (let j = 0;j < vods.length; j++) {
                                    options += `<option value="${vods[j]['url']}">${vods[j]['definition']}</option>`
                                }
                                resolutions[i].innerHTML = options;
                                resolutionChange(i);
                                videoClass[i].pause();
                            }
                        }
                        function resolutionChange(i) {
                            let resolutions = document.getElementsByName('resolution');
                            let videoClass = document.getElementsByClassName('video');
                            let index = resolutions[i].selectedIndex;
                            let vodSrc_selected = resolutions[i].options[index].value;
                            let playTime = videoClass[i].currentTime;
                            videoClass[i].src = vodSrc_selected;
                            videoClass[i].load();
                            videoClass[i].currentTime = playTime;
                            videoClass[i].play();
                        }
                        $(".ql-fold").click(function() {
                            $(this).toggleClass('expand');
                        });
                    </script>
                {% elif type == 2 %}
                    <div class="img-contents" id="contents"></div>
                    <script>
                        let quill_contents = new Quill('#contents', {theme: 'bubble'});
                        quill_contents.enable(false);
                        quill_contents.setContents({{ thread.getStructuredContent() | safe }})
                    </script>
                    {% for images in thread.result['data']['post']['post']['images'] %}
                        <div class="ql-image">
                            <div class="ql-image-box">
                                <img class="content" src="{{ images }}">
                            </div>
                        </div>
                    {% endfor %}
                {% elif type == 5 %}
                        <div class="mhy-vod">
                            <video controls width="600" id="video"></video>
                            <p>
                                <label for="resolution">清晰度：</label>
                                <select name="resolution" id="resolution" style="width: 100px;"
                                        onchange="resolutionChange()"></select>
                            </p>
                        </div>
                        <script>
                            let vod_list = {{ thread.getVideo() | safe }}[0];
                            let cover = vod_list['cover']
                            let vods = vod_list['resolutions']
                            let resolutions = document.getElementById('resolution')
                            let videoClass = document.getElementById('video')
                            videoClass.poster = cover
                            for (let i = 0;i < vods.length; i++) {
                                resolutions.options.add(new Option(vods[i]['definition'], vods[i]['url']))
                            }
                            resolutions.options[0].select = true
                            function resolutionChange() {
                                let index = resolutions.selectedIndex
                                let vodSrc_selected = resolutions.options[index].value
                                let playTime = videoClass.currentTime
                                videoClass.src = vodSrc_selected
                                videoClass.load()
                                videoClass.currentTime = playTime
                                videoClass.play()
                            }
                            resolutionChange()
                            videoClass.pause()
                        </script>
                {% endif %}
            </div>
            <br>
        {# 文章标签 #}
        {% if thread.getTags() %}
            <div class="tags">
                {% for tag in thread.getTags() %}
                    <div class="tag">
                        <img class="tagIcon" src="{{ tag['cover'] }}"/>
                        <div class="tagTitle">{{ tag['name'] }}</div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
            <div class="stat">
                <div class="votes">
                    <p>
                        <span>点赞数：</span>
                        <span class="voteNum">{{ thread.getVotes() }}</span>
                    </p>
                    {% if account.isLogin %}
                        <button class="voteBtn"
                                onclick="upVote('{{ thread.result["data"]['post']['post']['post_id'] }}', {{ 'true' if thread.getSelfAttitude() else 'false' }})">
                        {{ '取消点赞' if thread.getSelfAttitude() else '点赞' }}
                    {% endif %}
                    </button>
                </div>
                <div class="collects">
                    <p>
                        <span>收藏数：</span>
                        <span class="collectsNum">{{ thread.getCollects() }}</span>
                    </p>
                    {% if account.isLogin %}
                        <button class="collectsBtn"
                                onclick="collectPost('{{ thread.result["data"]['post']['post']['post_id'] }}', {{ 'true' if thread.getSelfCollect() else 'false' }})">
                        {{ '取消收藏' if thread.getSelfCollect() else '收藏' }}
                    {% endif %}
                    </button>
                </div>
            </div>
            {% if account.isLogin %}
                <div class="replyOuter">
                    <div id="releaseReply" class="releaseReply"></div>
                    <button class="replyBtn fix" onclick="releaseReply({{ thread.result["data"]['post']['post']['post_id'] }})">发布</button>
                </div>
                <script>
                    let quill_releaseReply = new Quill('#releaseReply', {theme: 'snow', modules: {toolbar: ["link"]}});
                    function releaseReply(post_id) {
                        let delta = quill_releaseReply.getContents();
                        let text = quill_releaseReply.getText();
                        if (text.length > 0){
                            try {
                                pywebview.api.releaseReply(delta, text, post_id).then(function (status) {
                                    if (status['status'] === 'ok') {
                                        alert('发送成功！');
                                        quill_releaseReply.setContents([])
                                    } else {
                                        alert(status['status']);
                                    }
                                })
                            } catch (e) {
                                console.log("using pywebview js api failed!")
                                alert('发送失败！');
                            }
                        }else {
                            alert('内容不能为空！')
                        }
                    }
        </script>
            {% endif %}
    </div>
</div>
    {# 评论区（使用iframe嵌入） #}
    <div class="comments">
        <iframe src="/comments?id={{ thread.result["data"]['post']['post']['post_id'] }}&gid={{ thread.result["data"]['post']['post']['game_id'] }}&page=1" allowTransparency></iframe>
    </div>
{% endblock %}