@page "/VideoTaskShow/{taskId:long}"

<div id="video-container">
    @if (videoKnows != null)
    {
        <div id="segmentsContainer" class="sc">

            <h2>
                <button class="gudingBtn" onclick="gd(this)">🔒</button>
                @nowTask.MediaName</h2>
            @for (int i = 0; i < videoKnows.Length; i++)
            {
                var item = videoKnows[i];
                <div class="knowDiv">
                    
                    <div class="knowTtile">
                        <div style="cursor: pointer" onclick="spClick(@i,this)">
                            <div class="knowTtileTheme">@getF(item)  @item.Theme</div>
                            <span class="kSpan">#@item.KnowPointId @item.KnowPoint</span>
                        </div>
                        <div>概览: @item.Content</div>
                        <br />
                        @foreach (var q in item.QuestionArr)
                        {
                            
                            <div class="knowQuestion" onclick="spClickTime(@q.StartTime)">
                                <h3>问题: <span class="kSpan">@q.StartTime 秒</span></h3>
                                <div  class="kSpan">@q.TopicStem</div>
                                <div >@q.Question</div>
                                <img style="text-align:center" src="@q.ImageUrl" width="320" height="180" />
                            </div>
                            <br />
                        }
                        <br />
                        <br />

                    </div>
                    <button class="kBtn" >
                        <span>@getF(item)  @item.Theme</span>
                        <br /><span class="kSpan textEllipsis">#@item.KnowPointId @item.KnowPoint</span>
                    </button>

                </div>
            }
        </div>
    }
    <video id="videoPlayer" controls autoplay>
        <source  type="video/mp4" />
    </video>
    <div id="subtitleArea" class="subtitles"></div>
    
    <div id="subtitleArea1" class="subtitles" style="
    bottom: 101px;
    background-color: rgb(99 129 103 / 50%);
    "></div>

</div>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" crossorigin="anonymous"></script>

<script>
    MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\(', '\)']],
            displayMath: [['$$', '$$'], ['\[', '\]']]
        }
    };
    window.b = []
    window.subtitles = []
    window.subtitles1 = []
    var displayButton = []
    var lastSegments = null;
    function init() {
        const videoPlayer = document.getElementById('videoPlayer');
        const subtitleArea = document.getElementById('subtitleArea');
        const subtitleArea1 = document.getElementById('subtitleArea1');
        //视频时间变化时
        videoPlayer.addEventListener('timeupdate', function () {
            if (displayButton.length == 0) initKD()
            const currentTime = videoPlayer.currentTime;
            subtitleArea.textContent = '';
            subtitleArea1.textContent = '';
            //字幕
            window.subtitles.forEach(subtitle => {
                let textContent = subtitle.text 
                if (currentTime >= subtitle.start
                    && currentTime <= subtitle.end
                    && subtitleArea.textContent != textContent) {
                    subtitleArea.textContent = textContent;
                    subtitleArea1.textContent = window.subtitles1[window.subtitles.indexOf(subtitle)].text;
                }
            });
            //时间片
            let segment = displayButton.findLast(s => currentTime >= s.startTime)
            if (segment) {
                segment.button.style.backgroundColor = "rgb(238, 200, 118)";
                if (lastSegments && lastSegments != segment) lastSegments.button.style.backgroundColor = "rgb(240, 249, 235)";
                lastSegments = segment
            }
        });
    }
    function initKD() {
        let btns = document.getElementsByClassName("kBtn")
        if(btns.length == 0) return
        displayButton = window.b.map((s, i) => { return { ...s, button: btns[i] } })
    }
    //后端传递初始化数据
    function setDB(a,a1, b,c) {
        console.log("setDB", a1,a, b, c)
        window.subtitles = a
        window.subtitles1 = a1
        window.b = b
        const videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.src = c
        init()
    }
    //点击时间片时
    function spClick(i, button) {
        videoPlayer.currentTime = displayButton[i].startTime;
    }
    function spClickTime(startTime) {
        videoPlayer.currentTime = startTime;
    }
    function gd(btn) {
        let e = btn.parentElement.parentElement
        if (e.style.right == "0px") {
            btn.innerHTML = "🔒"
            e.style.right = "-300px"
        } else {
            e.style.right = "0px"
            btn.innerHTML = "🔓"
        }
    }
</script>