// ==UserScript==
// @name         b站播放列表
// @namespace    none
// @version      2.0.1
// @description  将b站视频添加到播放列表，实现列表顺序播放、随机播放、单集循环播放（需点击播放列表里面的视频进行播放才会生效），播放列表中支持移除视频，支持拖动排序，多选拖动排序，支持全选、反选，移除选中
// @author       繁星1678
// @match        https://www.bilibili.com/video/*
// @match        https://www.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @license      MIT
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    let listContainer;
    let videoList = [];//存储videoDict
    let allVideoList = []; //存储videoDict的全部item
    let playMode = 0; // 0:顺序播放 1:随机播放 2:单集循环
    // let myList = []; // 存储用户添加的视频
    let i =1 //点击图标添加的索引
    let j =1//全部添加索引
    let currentPlayVideoTitle
    let playItemIndex = -1;
    let isDarkMode = true;
    let isPanelShow = false;
    let videoPlayList = []
    let randomIndex
    let videoListButton
    let initTitle=null
    let initPlayUrl=null
    let initPlayUrlPath=null
    class videoInfo {
        constructor(playId,firstSpanText, secondSpanText, title, playUrl) {
            this.playId = playId; // 播放ID,在b站视频合集中对应视频的索引，在合集中不变
            this.firstSpanText = firstSpanText; // 视频名称中的序号，如：P1
            this.secondSpanText = secondSpanText; // 标题，如：你好吗
            this.title = title; // 名称如：P4 你好吗
            this.playUrl = playUrl; // 视频播放链接如：https://www.bilibili.com/video/BV1Ys4y1r7Dj/
        }
    }
    
    // 获取当前页面的 URL
    let currentUrl = window.location.href;

    // 根据不同的 URL 执行不同的代码
    if (currentUrl.includes('/video/')) {
        setPlayList()
        resetPlayPanelItemShow()
        setPlayListBtn()
       
    } else if(currentUrl.includes('/www.bilibili.com/')||currentUrl.includes('/video/')){
        if(currentUrl.includes('/www.bilibili.com/')){
            let openPlayUrl=true
            createPLaylistPanel(openPlayUrl)
            resetPlayPanelItemShow()
            setPlayListBtn()
        }else{
            createPLaylistPanel()
            resetPlayPanelItemShow()
            setPlayListBtn() 
        }
        
    }
    ///////////////////////////////////
    // 提示框
    function dialog(message,x=false,y=false,second=false){

        second?second=second*1000:second=3500
        const tooltip = document.createElement('div');
        tooltip.textContent = message;
        tooltip.style.position = 'fixed';
        tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
        tooltip.style.color = '#ff9a00';
        tooltip.style.padding = '10px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.zIndex = '1000';
        tooltip.style.fontSize = '20px';
        tooltip.style.fontWeight = 'bold';
        tooltip.style.textAlign = 'center'; // 居中对齐
        tooltip.style.lineHeight = '1'; // 设置行高为1，使文字垂直居中
        tooltip.style.transform = 'translate(-50%, -50%)'; // 居中显示
        tooltip.style.transition = 'opacity 0.5s ease-in-out'; // 设置过渡效果
        // tooltip.style.opacity = '0'; // 初始状态为透明
        tooltip.style.pointerEvents = 'none'; // 防止点击穿透
         // 设置默认位置
        tooltip.style.top = x ? `${x}px` : '180px';
        tooltip.style.left = y ? `${y}px` : '1150px';
        // tooltip.style.top = `${x}px` 
        // tooltip.style.left = `${y}px`
        // tooltip.style.top = x.toString()+'px'
        // tooltip.style.left = y.toString()+'px'
        document.body.appendChild(tooltip);

        setTimeout(() => {
            document.body.removeChild(tooltip);
        }, second);
    }
    // 创建笔记列表按钮并添加监听事件
    function setPlayListBtn(){

        let playListsBtn = document.querySelector('.playListsBtn');
            // 如果存在就设置监听,不存在就创造一个并设置监听
            if (playListsBtn) {
                return
                // setNoteListsBtnListener(noteListsBtn);
                // alert('noteListsBtn存在:',noteListsBtn)
            }else{
                // alert('noteListsBtn不存在')
                function createNoteListBtnAndInsertDocument(){
                   
                    if(currentUrl.includes('/video/')){
                        if(initTitle===null&&initPlayUrl===null){
                            initTitle = document.querySelector('.video-title.special-text-indent').getAttribute('data-title')
                            // initTitle=initTitle.split(' ')[1]
                            // videoEl.muted = true;//静音
                            initPlayUrl = window.location.href.trim()
                            initPlayUrlPath = window.location.pathname.trim()

                            console.log('125 innitTitle:'+initTitle)
                            console.log('125 initPlayUrl:'+initPlayUrl)
                            console.log('125 initPlayUrlPath:'+initPlayUrlPath)
                        }
                        
                    }
                    
                    let avatar_wrap = document.querySelector('.header-avatar-wrap');
                    if (avatar_wrap) {
                        // 创建 playListsBtn 元素
                        let playListsBtn = document.createElement('div');
                        playListsBtn.style.display = 'flex'; // 使用 flex 布局
                        playListsBtn.style.flexDirection = 'column'; // 设置垂直布局
                        playListsBtn.style.alignItems = 'center'; // 水平居中对齐
                        playListsBtn.style.gap = '4px'; // 设置图标和文本之间的间距
                        playListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="70" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><path fill="#7a08fa" d="M7 9V7h14v2zm0 4v-2h14v2zm0 4v-2h14v2zM4 9q-.425 0-.712-.288T3 8t.288-.712T4 7t.713.288T5 8t-.288.713T4 9m0 4q-.425 0-.712-.288T3 12t.288-.712T4 11t.713.288T5 12t-.288.713T4 13m0 4q-.425 0-.712-.288T3 16t.288-.712T4 15t.713.288T5 16t-.288.713T4 17"/></svg><span style="color: #7a08fa; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">播放列表</span>`;
                        playListsBtn.style.cursor = 'pointer';
                        playListsBtn.className = 'playListsBtn';

                        // let avatar_wrap = document.querySelector('.header-avatar-wrap');
                        // 获取 avatar_wrap 的父节点
                        let parentNode = avatar_wrap.parentNode;

                        // 获取 avatar_wrap 的父节点的第一个子节点
                        let firstChild = parentNode.firstChild;

                        // 使用 insertBefore 方法将 playListsBtn 插入到第一个子节点的下一个兄弟节点之前
                        parentNode.insertBefore(playListsBtn, firstChild.nextSibling)||parentNode.insertBefore(playListsBtn, firstChild);

                        observer.disconnect();
                        // setNoteListsBtnListener(noteListsBtn)
                        playListsBtn.addEventListener('click', function (e) {
                            
                            let playlistPanel = document.querySelector('.container.mt-5.draggable');
                            if (playlistPanel&&playlistPanel.style.display === 'none') {
                                // let isPanelShow = localStorage.getItem('isPanelShow');
                                localStorage.setItem('isPanelShow', 'true');
                                playlistPanel.style.display = 'block';
                                resetPlayPanelItemShow()
                                playItemIndex = localStorage.getItem('playItemIndex')
                                setCurrentItemBackgroundAndPlayingGifVisible()
                                videoListButton = document.querySelector('.video-list-btn')
                                // listContainer.style.display = isPanelShow
                                if (videoListButton) {
                                    videoListButton.textContent = '关闭列表'
                                }

                            }
                            
                           

                        })
                        

                    }

                }
                let observer = new MutationObserver(createNoteListBtnAndInsertDocument)
                let config = {childList: true, subtree: true}
                observer.observe(document.body, config)

            }
        }


   
    
    // let videoItem = document.querySelector('div.clickitem')||document.querySelector('divvideo-episode-card__info-title');

    function setPlayList(){
        playItemIndex = localStorage.getItem('playItemIndex')
        videoList = JSON.parse(localStorage.getItem('videoList')) || [];
        createPLaylistPanel()
        resetPlayPanelItemShow()
        setCurrentItemBackgroundAndPlayingGifVisible()
        scrollPlayItemIntoView()
        let targetNode = document.body;
        let hasExecuted = false;
        
        setTimeout(() => {
            let videoEl = document.querySelector("div.bpx-player-video-wrap > video");
            console.log('播放索引:'+playItemIndex)
            setCurrentItemBackgroundAndPlayingGifVisible()
                if(videoEl){
                    videoEl.addEventListener('ended', (event) => {
                        // console.log('视频播放结束,播放索引:'+playItemIndex);
                        event.stopImmediatePropagation();
                        playNext()
                        // setCurrentItemBackgroundAndPlayingGifVisible()
    
                    });
                }else{
                    console.log('1755 点击添加图标 未找到播放器videoEl')
                }
        }, 5000);

        const observer = new MutationObserver((mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    let videoItem = document.querySelector('div.clickitem') ||
                        document.querySelector('div.video-episode-card__info-title.video-episode-card__info-title_indent')||
                        document.querySelector('.video-episode-card__info-title');
                    let listHead = document.querySelector("#multi_page > div.head-con") ||
                        document.querySelector(".video-sections-head_first-line");
                    // videoEl = document.querySelector("div.bpx-player-video-wrap > video");

                    if (listHead && videoItem && !hasExecuted) {
                        hasExecuted = true;
                        createVideoListButton()
                        // createPLaylistPanel()
                        createAddBtnForVideoItem()
                        observer.disconnect();
                        break;
                        
                    }

                }
            }
        });

        let config = { childList: true, subtree: true };

        
        setTimeout(() => {
            observer.observe(targetNode, config);
        }, 2500);

            }




    // 播放下一曲
  // 播放下一曲
    function playNext() {
        let lis1
        videoList = JSON.parse(localStorage.getItem('videoList'))
        playItemIndex = localStorage.getItem('playItemIndex')
        
        if(playItemIndex<=-1){return}
        let videoPlayListLength = videoList.length
        if(videoPlayListLength<=0){
            console.log('播放列表为空,无法播放下一曲')
            return
        }
        switch (playMode) {
            case 0: // 顺序播放
                restorePreviousPlayItemBackgroundPlayingGifVisible()
                // playItemIndex = (playItemIndex + 1) % videoPlayListLength;
                if(videoPlayListLength===1){
                    // const ul = document.querySelector('ul.list-box');
                    // let lis = ul.querySelectorAll('li');
                    // lis = Array.from(lis);
                    let ul = null;
                    let lis = [];
                    try {
                        ul = document.querySelector('ul.list-box');
                        if (ul) {
                            lis = ul.querySelectorAll('li');
                        }
                        lis = Array.from(lis);
                    } catch (error) {
                        console.error('捕获到异常:', error);
                    }

                    ///////////////////
                    let ul1 = null;
                    let lis1 = [];
                    try {
                        ul1 = document.querySelector('.video-section-list.section-0');
                        if (ul1) {
                            lis1 = ul1.querySelectorAll('.video-episode-card');
                        }
                        lis1 = Array.from(lis1);
                    } catch (error) {
                        console.error('捕获到异常:', error);
                    }
                    ///////////////////

                    if(lis.length>0){
                        if(lis[lis.length-1].secondSpanText != videoList[playItemIndex].title){
                            lis[lis.length-1].click();
                            clickLiEl(playItemIndex);
                        }else{
                            lis[lis.length-2].click();
                            clickLiEl(playItemIndex);
                        }
                    }else if(lis1.length>0){
                        let liTitle = lis1[lis1.length-1].querySelector('div.video-episode-card__info-title').getAttribute('title');
                        if(liTitle != videoList[playItemIndex].title){
                            lis1[lis1.length-1].click();
                            clickLiEl(playItemIndex);
                        }else{
                            lis1[lis1.length-2].click();
                            clickLiEl(playItemIndex);
                        }
                    }
                }else{
                    let preTitle = videoList[playItemIndex].title
                    
                    playItemIndex++
                    if(playItemIndex > videoPlayListLength-1) {
                        playItemIndex = 0;
                        clickLiEl(playItemIndex);
                        break;
                    }else if(preTitle===videoList[playItemIndex].title){
                        if(preTitle!==videoList[0].title){
                            clickLiEl(0)
                            clickLiEl(playItemIndex); 
                        }else{
                            clickLiEl(1);
                            clickLiEl(playItemIndex);
                        }
                        break;
                    }
                    clickLiEl(playItemIndex);
                    break;
                    
                }

               
                console.log('326顺序播放,播放索引是:'+playItemIndex);
                
            case 1: // 随机播放
                restorePreviousPlayItemBackgroundPlayingGifVisible()
                randomIndex = Math.floor(Math.random() * videoPlayListLength);
                if(randomIndex>videoListButton){
                    randomIndex = 0
                }
                if(randomIndex === playItemIndex){
                    if(randomIndex < videoPlayListLength-1) {
                        clickLiEl(randomIndex + 1);
                        clickLiEl(randomIndex);
                    }else{
                        clickLiEl(0);
                        clickLiEl(randomIndex);
                    }
                }else{
                    clickLiEl(randomIndex);
                    playItemIndex = randomIndex;

                }
                
                console.log('330随机播放,播放索引是:'+playItemIndex);
                // clickLiEl(playItemIndex);
                break;
            case 2: // 单集循环
                console.log('333单集循环播放索引是:'+playItemIndex);
                clickLiEl(playItemIndex);
                // 单集循环模式下，playItemIndex 不需要更新
                break;
            
        }
        localStorage.setItem('playItemIndex', playItemIndex);
        console.log('393 playnext播放索引是:'+playItemIndex);
        // clickLiEl(playItemIndex);
        let videoEl = document.querySelector("div.bpx-player-video-wrap > video");
        
        videoEl.currentTime = 0;
        // localStorage.setItem('playId', videoList[playItemIndex].playId?videoList[playItemIndex].playId:0);
        videoEl.play();
        scrollPlayItemIntoView();
        setCurrentItemBackgroundAndPlayingGifVisible()
    }

    function clickLiEl(playItemIndex){
        if(playItemIndex<=-1){return}
        localStorage.setItem('playItemIndex', playItemIndex);
        // setCurrentItemBackgroundAndPlayingGifVisible()
        videoList = JSON.parse(localStorage.getItem('videoList'));
        let videoEl = document.querySelector("div.bpx-player-video-wrap > video");
        videoEl.currentTime = 0;
        if(playItemIndex >= videoList.length){
            playItemIndex=0
        }
        
        let ul = null;
        let lis = [];

        // 获取分p列表
        try {
            ul = document.querySelector('ul.list-box');
            if (ul) {
                lis = ul.querySelectorAll('li');
            }
            lis = Array.from(lis);
        } catch (error) {
            console.error('捕获到异常:', error);
        }


        let ul1 = null;
        let lis1 = [];

    //    获取非分p列表
        try {
            ul1 = document.querySelector('.video-section-list.section-0');
            if (ul1) {
                lis1 = ul1.querySelectorAll('.video-episode-card');
            }
            lis1 = Array.from(lis1);
        } catch (error) {
            console.error('捕获到异常:', error);
        }

        // 如果分p列表不存在，跳转到对应视频播放
        if(lis.length<=0 && lis1.length<=0||!videoEl){
            window.location.href = videoList[playItemIndex].playUrl;
            videoEl.currentTime = 0;
            // videoList[playItemIndex].playId? localStorage.setItem('playId', videoList[playItemIndex].playId) : null;
            videoEl.play()
            return
        }
        // 如果分p列表存在，则点击分p列表的对应项
        if(lis.length>0){
            for(let i=0;i<lis.length;i++){
                let liTitle = lis[i].querySelector('span.part').textContent;
                if(videoList[playItemIndex].secondSpanText === liTitle){
                    lis[i].querySelector('div.clickitem').click()
                    videoEl.play()
                    console.log('点击列表项lis[i].textContent:' + lis[i].textContent);
                    return
                }
            }
        }else if(lis1.length>0){
            for(let i=0;i<lis1.length;i++){

                // const videoTitle = item.getAttribute('title');
                // querySelectorAll('div.video-episode-card__info-title').forEach(item =>

                let liTitle = lis1[i].querySelector('.video-episode-card__info-title').getAttribute('title');
                // console.log('clickLiEl liTitle:'+liTitle)
                if(videoList[playItemIndex].title === liTitle){
                    lis1[i].click()
                    videoEl.play()
                    console.log('点击列表项lis[i].textContent:' + liTitle);
                    // localStorage.setItem('playText', liTitle);
                    return
                }
            }

            
        }
        
        // videoPlayList[playItemIndex].videoElement.click()
        // localStorage.setItem('playId', videoList[playItemIndex].playId);
        // window.location.replace(videoList[playItemIndex].playUrl);
        window.location.href = videoList[playItemIndex].playUrl;
        
        videoEl.play()

        // videoEl = document.querySelector("div.bpx-player-video-wrap > video")
        // videoEl.play()
    }


    // 显示列表面板
    function showPLaylistPanel() {
        let pLaylistPanel = document.querySelector('.container.mt-5.draggable');
        isPanelShow=localStorage.getItem('isPanelShow')
        isPanelShow?pLaylistPanel.style.display='block':pLaylistPanel.style.display='none'
        console.log('showPLaylistPanel获取到的 isPanelShow:'+isPanelShow)

        let videoListButton = document.querySelector('.video-list-btn');

        if(pLaylistPanel.style.display==='block'){
            isListVisible = true;
            videoListButton.textContent = '关闭列表';
        }
    }
   
    // 更新播放列表项item显示

    function resetPlayPanelItemShow(){
        videoList = JSON.parse(localStorage.getItem('videoList')) || [];        
        if(videoList.length>0){
            // if(isAddItem){
            //     return
            // }
             // // 获取ul元素
             
             let ulElement = document.getElementById('myList');

             // 移除ul中的所有li元素
             while (ulElement.firstChild) {
                 ulElement.removeChild(ulElement.firstChild);
             }

            for (let i = 0; i < videoList.length; i++) {
                addItemToPLaylistPanel(videoList[i].title);
                console.log(i+': '+videoList[i].videoElementHtml);
            }
            // isAddItem = true;
        }
    }



    function getCrruentPlayVideoTitle(){
        if(playItemIndex>-1){
            currentPlayVideoTitle = videoList[playItemIndex].title;
            if(currentPlayVideoTitle){
                return currentPlayVideoTitle
            }else{return null}

        }else{
            return null
        }
    }

    // 创建播放列表按钮,点击弹出播放列表面板,再点击关闭播放列表面板
    function createVideoListButton() {
        let btnText
        let isPanelShow=localStorage.getItem('isPanelShow')
        if(isPanelShow==='none'){
            btnText = '播放列表';
        }else{
            btnText = '关闭列表';
        }
        

        // 创建播放列表按钮
        // const videoListButton = document.createElement('button');
        videoListButton = document.createElement('button');
        videoListButton.textContent = btnText;
        videoListButton.className = 'video-list-btn';

        // 添加按钮样式
        const style = document.createElement('style');
        style.textContent = `
            .video-list-btn {
                background-color: #3e4149;
                color: #defcf9;
                border: none;
                border-radius: 4px;
                text-align: center;
                font-size: 15px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
                transition: background-color 0.3s;
            }

            .video-list-btn:hover {
                background-color: #521262;
            }

            .video-list-btn:active {
                background-color: #6639a6;
            }

            .draggable {
                cursor: move;
            }
        `;
        document.head.appendChild(style);
        getListHead()

        // 播放列表按钮点击事件
        videoListButton.addEventListener('click', () => {
            let isPanelShow = localStorage.getItem('isPanelShow');
            if(isPanelShow==='none'){
                isPanelShow = 'block';
                resetPlayPanelItemShow()
                setCurrentItemBackgroundAndPlayingGifVisible()
            }else{
                isPanelShow = 'none';
            }
            listContainer.style.display = isPanelShow
            videoListButton.textContent = isPanelShow==='block' ? '关闭列表' : '播放列表';
            localStorage.setItem('isPanelShow',isPanelShow)
           
        });

        function getListHead() {
            let listHead = document.querySelector("#multi_page > div.head-con") ||
            document.querySelector(".first-line-left")
            if (listHead) {
                listHead.style.position = 'relative';
                listHead.insertBefore(videoListButton, listHead.firstChild);

            }
            // let avatar_wrap = document.querySelector('.header-avatar-wrap');

            // let parentNode = avatar_wrap.parentNode;

            // // 获取 avatar_wrap 的父节点的第一个子节点
            // let firstChild = parentNode.firstChild;

            // // 使用 insertBefore 方法将 playListsBtn 插入到第一个子节点的下一个兄弟节点之前
            // parentNode.insertBefore(playListsBtn, firstChild.nextSibling)||parentNode.insertBefore(playListsBtn, firstChild);
        }

    }


    // 停止播放
    function stopVideo(){
        let videoEl = document.querySelector("div.bpx-player-video-wrap > video") // 获取视频元素
        videoEl.pause();
        videoEl.currentTime = 0;
    }

    // 如果列表项有选中状态的项就返回true,否则返回false
    function hasCheckedCheckbox() {
        const checkboxes = document.querySelectorAll('li.list-item input[type="checkbox"]');
        for (let checkbox of checkboxes) {
            if (checkbox.checked) {
                return true;
            }
        }
        return false;
    }


    // 将上一个播放项的背景色还原为透明浅蓝色，并将playing-gif隐藏
    function restorePreviousPlayItemBackgroundPlayingGifVisible(){
        if(playItemIndex<=-1){
            return
        }
        let myList = document.getElementById('myList');
        let listItems = myList.getElementsByTagName('li');
        if(listItems.length===0){return}
        let previousPlayItem = listItems[playItemIndex]
        if(isDarkMode){
            previousPlayItem?previousPlayItem.style.color='#ba52ed':console.log("没有找到播放项");
        }else{
            previousPlayItem?previousPlayItem.style.color='#311d3f':console.log("没有找到播放项");
        }

        previousPlayItem?previousPlayItem.querySelector('.playing-gif').style.display = 'none':console.log("没有上一个播放项");

    }

     // 设置当前播放项动图playing-gif为显示状态 设置item背景色
     function setCurrentItemBackgroundAndPlayingGifVisible() {
        // playItemIndex = localStorage.getItem('playItemIndex')
        if(playItemIndex<=-1){
            return
        }
        let myList = document.getElementById('myList');
        let listItems = myList.getElementsByTagName('li');
        let CurrentPlayItem = listItems[playItemIndex]


        CurrentPlayItem?CurrentPlayItem.style.color='#ff9a00':console.log("没有找到播放项");
        CurrentPlayItem?CurrentPlayItem.querySelector('.playing-gif').style.display = 'inline':console.log("没有找到播放项");

    }

    // 将播放项滚动到视图中
    function scrollPlayItemIntoView() {
        if(playItemIndex<=-1){
            return
        }
        let myList = document.getElementById('myList');
        let listItems = myList.getElementsByTagName('li');
        if(listItems.length>0){
            let CurrentPlayItem = listItems[playItemIndex]
            if(CurrentPlayItem){
                CurrentPlayItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }else{console.log("CurrentPlayItem")}
        }

    }

// 创建播放列表,添加列表项,相关按钮,播放列表项点击事件,播放列表项拖拽排序事件


    // 获取选中的列表项,将其文本组成一个数组,将其文本组成一个数组

    function getCheckedItemsTextAndIndex() {
        // 获取所有被勾选的 checkbox
        const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

        // 获取所有 li 元素
        const listItems = document.getElementById('myList').getElementsByTagName('li');

        // 创建两个数组来存储文本和索引
        let texts = [];
        let indices = [];

        // 遍历被勾选的 checkbox，获取对应的 li 元素的文本和索引
        checkboxes.forEach(checkbox => {
            const parentLi = checkbox.closest('li');
            if (parentLi) {
                const index = Array.from(listItems).indexOf(parentLi);
                texts.push(parentLi.textContent.trim());
                indices.push(index);
            }
        });

        // 根据索引从小到大排序
        indices.sort((a, b) => a - b);
        texts.sort((a, b) => indices[texts.indexOf(a)] - indices[texts.indexOf(b)]);

        // console.log('文本数组:', texts);
        // console.log('索引数组:', indices);
        return {texts, indices};


    }



    // 切换主题
    function toggleTheme() {
        const elements = document.querySelectorAll('.list-item');


        // 遍历所有找到的元素
        if (isDarkMode) {
            // 替换类名 "dark-mode-list-group-item" 为 "list-group-item"
            elements.forEach((element, index) => {
                element.classList.replace('dark-mode-list-group-item', 'list-group-item');
                // if (playItemIndex > -1 && playItemIndex === index) {
                //     element.style.color = '#a3de83';
                // }
            });
            event.target.textContent = "透明";

        } else {
            // 替换类名 "list-group-item" 为 "dark-mode-list-group-item"
            elements.forEach((element, index) => {
                element.classList.replace('list-group-item', 'dark-mode-list-group-item');
                // if (playItemIndex > -1 && playItemIndex === index) {
                //     element.style.color = '#005691';
                // }
            });
            event.target.textContent = "暗黑";
        }

    }

      // 点击+向播放列表面板添加列表项,同时提取所有li的视频名称 索引号 li元素存放在数组中
      function addItemToPLaylistPanel(itemText) {

        // <img src="//i0.hdslb.com/bfs/static/jinkela/video/asserts/playing.gif" style=""></img>

         // 创建播放动图<img> 元素并设置其属性
        const imgElement = document.createElement('img');
        imgElement.src = "//i0.hdslb.com/bfs/static/jinkela/video/asserts/playing.gif";
        imgElement.className = 'playing-gif';
        imgElement.style.cssText = "color:#ff7c38;display: none; height: 17px; width: 17px; margin-right: 7px; vertical-align: middle;";

        const newItem = document.createElement('li');
        newItem.classList.add('list-item','dark-mode-list-group-item');
        // newItem.className = 'dark-mode-list-group-item';
        newItem.draggable = true;
        // newItem.textContent = `${itemText}`;
        // newItem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'
        newItem.title = '点击播放,拖动排序,多选拖动排序';
        // newItem.style.color = '#ba52ed'

         // 创建一个文本节点
        const textNode = document.createTextNode(itemText);
        // const numNode = document.createTextNode(itemText);
    //    document.querySelector('.video-num')
        // numNode.className = 'video-num';
        // numNode.textContent=`${itemNum}`
        // textNode.className = 'video-name';
        textNode.textContent = `${itemText}`
        // 将 img 元素和文本节点添加到 newItem 中
        // newItem.appendChild(numNode);
        newItem.appendChild(imgElement);
        
        newItem.appendChild(textNode);

        // 创建一个包含 SVG 图标和多选框的容器
        const iconContainer = document.createElement('span');
        iconContainer.style.float = 'right'; // 将容器浮动到右边
        // iconContainer.style.display = 'inline-block';
        iconContainer.style.alignItems = 'center'; // 垂直居中对齐

        // 创建 SVG 图标,移除播放列表条目
        const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svgIcon.setAttribute('width', '24');
        svgIcon.setAttribute('height', '24');
        svgIcon.setAttribute('viewBox', '0 0 12 12');
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('fill', '#ba52ed');
        path.setAttribute('d', 'M5 3h2a1 1 0 0 0-2 0M4 3a2 2 0 1 1 4 0h2.5a.5.5 0 0 1 0 1h-.441l-.443 5.17A2 2 0 0 1 7.623 11H4.377a2 2 0 0 1-1.993-1.83L1.941 4H1.5a.5.5 0 0 1 0-1zm3.5 3a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0zM5 5.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5M3.38 9.085a1 1 0 0 0 .997.915h3.246a1 1 0 0 0 .996-.915L9.055 4h-6.11z');
        svgIcon.appendChild(path);

        // 设置 SVG 图标的点击事件监听器
        svgIcon.addEventListener('click', () => {
            // 获取 SVG 图标的父元素（即包含它的 <li> 元素）
            const parentLi = svgIcon.closest('li');
            if (parentLi) {
                // 获取被移除的 <li> 元素的索引
                const listItems = document.getElementById('myList').getElementsByTagName('li');
                // 被删列表项索引
                const index = Array.from(listItems).indexOf(parentLi);

                // console.log(`被移除的 <li> 元素的索引: ${index}`);

                // 从 DOM 中移除 <li> 元素
                parentLi.remove();

                videoList.splice(index, 1);


                // videoPlayList.splice(index, 1)
                // liElList.splice(index,1)
                // 当删除播放列表面板列表项时需要更新playItemIndex,才能正确播放对应列表项
                // saveVideoList()


                if (index < playItemIndex) {
                    playItemIndex--;
                } else if (index === playItemIndex) {
                    // 如果当前播放的列表项被删除，则停止播放
                    playItemIndex = -1;
                    stopVideo();
                }
                localStorage.setItem('playItemIndex', playItemIndex);
                let count=0
                if(videoList.length>0){
                    count=videoList.length
                }
                count=count>0?'总计:'+count:'点击视频左边+号添加'
                let tip = document.querySelector('.text-tip')
                if(tip){
                    tip.textContent=count
                }

            }
            
            // saveVideoListToLocalStorage(videoList)
            localStorage.setItem('videoList', JSON.stringify(videoList));
            // updateVideoPlayList()
            // localStorage.setItem('playItemIndex', playItemIndex);
            // saveVideoList(); // 保存数据到本地
            // saveVideoListToLocalStorage(videoList)
            // saveLiElListToLocalStorage()
            let selectAllItemBtn = document.querySelector("#selectAllItem");
            hasCheckedCheckbox()?selectAllItemBtn.textContent="反选":selectAllItemBtn.textContent="全选"

        });

        // 创建多选框
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.style.height = "20px";
        checkbox.style.width = "18px";
        checkbox.style.color = '#f5c7f7';
        checkbox.style.marginLeft = '8px'; // 添加一些间距

        // 将 SVG 图标和多选框添加到容器中
        iconContainer.appendChild(svgIcon);
        iconContainer.appendChild(checkbox);


        // 添加 change 事件监听器
        checkbox.addEventListener('change', (event) => {

            let selectAllItemBtn = document.querySelector("#selectAllItem");
            hasCheckedCheckbox()?selectAllItemBtn.textContent="反选":selectAllItemBtn.textContent="全选"

            // console.log('复选框状态发生变化:', event.target.checked);
        });

        // 添加 click 事件监听器
        checkbox.addEventListener('click', (event) => {

            let selectAllItemBtn = document.querySelector("#selectAllItem");
            hasCheckedCheckbox()?selectAllItemBtn.textContent="反选":selectAllItemBtn.textContent="全选"
            // console.log('复选框被点击:', event.target.checked);
        });

        // 将容器添加到 <li> 元素中
        newItem.appendChild(iconContainer);

        // let myList = document.getElementById('myList').appendChild(newItem);
        let myList = document.getElementById('myList')
        if(myList){
            myList.appendChild(newItem);
        }else{console.log("770没有找到播放列表")}

        let count=0
        if(videoList.length>0){
            count=videoList.length
        }
        count=count>0?'总计:'+count:'点击视频左边+号添加'
        let tip = document.querySelector('.text-tip')
        if(tip){
            tip.textContent=count
        }

    }
    // 创建播放列表面板
    function createPLaylistPanel(openPlayUrl=false) {
        let count=0
        videoList = JSON.parse(localStorage.getItem('videoList'));
        if(videoList.length>0){
            count=videoList.length
        }
        count=count>0?'总计:'+count:'点击视频左边+号添加'
        let isPanelShow = localStorage.getItem('isPanelShow') || 'block';
        
        let playModeBtnText;
        try {
            playModeBtnText = localStorage.getItem('playModeBtnText') || '顺序播放';
            if (playModeBtnText === '顺序播放') {
                playMode = 0;
            } else if (playModeBtnText === '随机播放') {
                playMode = 1;
            } else if (playModeBtnText === '单集循环') {
                playMode = 2;
            } else {
                playMode = 0;
            }
        } catch (error) {
            console.error('Error while setting play mode:', error);
            playMode = 0; // 默认设置为顺序播放
        }
        
        // 创建一个带有样式的列表容器
        listContainer = document.createElement('div');
        // listContainer.style.width = '500px';
        // listContainer.style.minWidth = '470px';
        listContainer.style.width = 'fit-content';

        listContainer.style.height = '600px';
        listContainer.style.left = '700px';
        listContainer.style.top = '200px';
        listContainer.style.zIndex = '999999';
        listContainer.style.overflowY = 'scroll';
        // listContainer.style.overflowX = 'hidden';
        listContainer.style.alignItems = 'center';
        listContainer.style.backgroundColor = 'rgba(255, 255, 255, 0)';
        listContainer.style.borderRadius = '6px';
        listContainer.style.display = isPanelShow; // 隐藏或显示
        listContainer.style.position = 'fixed'; // 自适应固定在可见位置
        // listContainer.style.flexDirection = 'column';
        listContainer.style.boxShadow = '0 8px 5px rgba(0, 0, 0, 0.5)'; // 添加边框阴影
        listContainer.className = 'container mt-5 draggable'; // 添加容器类和可拖动类
        listContainer.innerHTML = `
        <div style="position: sticky; top: 0; background-color: rgba(0, 0, 0, 0);margin-bottom: 10px;justify-content: space-between;align-items: center;">
            <button type="button" class="btn btn-primary" id="closePlaylist">关闭列表</button>
            <button type="button" class="btn btn-primary" id="playMode">${playModeBtnText}</button>
            <button type="button" class="btn btn-primary" id="removeItem">移除选中</button>
            <button type="button" class="btn btn-primary" id="selectAllItem">全选</button>
            <button type="button" class="btn btn-primary" id="addAllItem">全部添加</button>
            <button type="button" class="btn btn-primary" id="toggleStyleBtn">暗黑</button>
            <svg class="btn btn-svg" id="addVideoBtn" xmlns="http://www.w3.org/2000/svg" width="45" height="24" viewBox="0 0 24 24" style="margin-right: 10px;" title="添加到播放列表"><path fill="#000000" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"/></svg>
            <span class="text-tip">${count}</span>
        </div>
        <ul class="list-group myList" id="myList">
        </ul>
        `;

         // 添加 CSS 样式
         const style = document.createElement('style');
         style.textContent = `
             .list-group myList{
                 margin-top: 10px;
             }
              .text-tip {
                 margin-right: 8px;
                 font-size: 18px;
                 color: #7e6bc4;
                 font-weight: bold;
                 vertical-align: middle;
             }
             .btn.btn-primary{
                 cursor: pointer; /* 设置鼠标指针为小手 */
                 border-radius: 5px;
                 margin-right: 6px;
                 height: 30px;
                 text-align: center;
                 font-size: 14px;
                 color: #c5e3f6; /* 设置字体颜色 */
                 background-color: #48466d; /* 设置背景颜色 */
             }
             .btn-svg {
                cursor: pointer;
                background-color: #11999e;
                border: 1px solid #007bff;
                border-radius: 0.25rem;
                vertical-align: middle;
                
            }
            .btn-svg:hover {
                background-color: #3f72af;
                border-color: #004085;
            }
                  /* 基本样式 */
                ul {
                    list-style-type: none;
                    padding: 0;
                }
                .list-group-item {
                    cursor: pointer; /* 设置鼠标指针为小手 */
                    margin-bottom: 6px; /* 设置li的行距 */
                    background-color: rgba(186, 82, 237, 0.26);
                    font-size: 16px; /* 设置字体大小 */
                    border-radius: 6px; /* 圆角边框 */
                    border: 1.4px solid #a82ffc;
                    color:#311d3f;
                    padding: 5px;
                    margin: 5px;
                    transition: box-shadow 0.3s ease;
                }
                .dark-mode-list-group-item {
                    background-color: rgba(0, 0, 0, 0.75);
                    cursor: pointer; /* 设置鼠标指针为小手 */
                    margin-bottom: 6px; /* 设置li的行距 */
                    font-size: 16px; /* 设置字体大小 */
                    border-radius: 6px; /* 圆角边框 */
                    border: 1.4px solid #a82ffc;
                    color: #ba52ed; /* 设置字体颜色 */
                    padding: 5px;
                    margin: 5px;
                    transition: box-shadow 0.3s ease;
                }
                /* 鼠标悬停时的阴影效果 */
                .list-item:hover {
                    box-shadow: 5px 5px 10px rgba(255, 201, 60, 0.68);
                }
         `;
         document.head.appendChild(style);



        let currentSelectedItem = null; // 用于跟踪当前被选中的 <li> 元素
        let isSelctedAll = false; // 用于跟踪是否全选


        // 为item创建拖动排序
        //////////////////////////////////
        // 在 listContainer 上添加拖动事件监听器
        let isDraggingListContainer = false;
        let offsetX = 0;
        let offsetY = 0;

        // 在 listContainer 上添加拖动事件监听器
        listContainer.addEventListener('dragstart', dragStart);
        listContainer.addEventListener('dragover', dragOver);
        listContainer.addEventListener('drop', drop);
        listContainer.addEventListener('dragenter', dragEnter);
        listContainer.addEventListener('dragleave', dragLeave);
        listContainer.addEventListener('dragend', dragEnd);

        let dragSrcEl;
        let LiTextsList
        let LiIndexList
        let checkedItemNum

        let dropIndex
        let dropText
        let ul
        let moveItemList
        let moveItem

        function dragStart(e) {
            if (e.target.tagName === 'LI') {
                dragSrcEl = []; // 将 dragSrcEl 改为数组
                LiTextsList = [];
                LiIndexList = [];

                checkedItemNum = 0;
                const result = getCheckedItemsTextAndIndex();
                LiTextsList = result.texts;
                LiIndexList = result.indices;
                checkedItemNum = LiTextsList.length;
                // console.log('被拖动的项目数量' + checkedItemNum);
                // console.log('被拖动的项目索引' + LiIndexList);

                if (checkedItemNum) {
                    let combinedHtml = '';
                    for (let i = 0; i < checkedItemNum; i++) {
                        let videoListIndex = LiIndexList[i];
                        let selectedLi = document.querySelector(`#myList li:nth-child(${videoListIndex})`);
                        // selectedLi.style.backgroundColor = '#87ceeb'; // 修改背景色
                        dragSrcEl.push(selectedLi); // 将选中的 li 元素添加到 dragSrcEl 数组中
                        combinedHtml += selectedLi.outerHTML; // 将每个选中的 li 元素的 HTML 内容添加到 combinedHtml 中
                    }
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/html', combinedHtml); // 将合并后的 HTML 内容设置为数据传输对象的数据
                    dragSrcEl.forEach(element => {
                        element.style.opacity = '1';
                    });
                }else{
                    dragSrcEl = e.target;
                    dragSrcEl.style.opacity = '1';



                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/html', e.target.innerHTML);
                }





            }

        }

        function dragEnter(e) {
            if (e.target.tagName === 'LI') {
                e.target.classList.add('over');
            }
        }

        function dragLeave(e) {
            if (e.target.tagName === 'LI') {
                e.target.classList.remove('over');
            }
        }

        function dragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.dataTransfer.dropEffect = 'move';
            return false;
        }


        function drop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            // if (dragSrcEl !== e.target && e.target.tagName === 'LI') {
                // 获取 ul 元素

                ul = e.target.parentNode;
                // 获取所有的 li 元素
                const listItems = ul.getElementsByTagName('li');
                // 找到拖动元素和目标元素的索引
                const dragIndex = Array.from(listItems).indexOf(dragSrcEl);
                // console.log("拖动元素的索引: " + dragIndex);

                    // ul = e.target.parentNode;
                    // 获取所有的 li 元素
                    // const listItems = ul.getElementsByTagName('li');
                dropIndex = Array.from(listItems).indexOf(e.target);
                    // console.log("目标元素的索引: " + dropIndex);
                // console.log("目标元素的索引: " + dropIndex);
                dropText = videoList[dropIndex].title;// 获取目标元素的文本
                // console.log('目标元素文本: ' + dropText);

                ul.innerHTML = '';
                // // 交换 videoList 中的元素位置



                     moveItemList = []
                    let moveItem = null;
                    // let moveLiList = []
                    // let moveLi = null;
                // // ///////////////////
                if(checkedItemNum>0){
                    currentPlayVideoTitle = getCrruentPlayVideoTitle()
                    for(let i=0;i<checkedItemNum;i++){
                        let videoListIndex = LiIndexList[i]
                        // console.log('被拖动的项目索引'+videoListIndex)
                        // let moveItem = videoList.splice(videoListIndex,1)[0]
                        moveItem = videoList[videoListIndex];

                        // moveLi = liElList[videoListIndex];
                        // videoList.splice(videoListIndex, 1);
                        // console.log('被拖动的项目'+moveItem)
                        // console.log('被拖动的项目标题'+moveItem.title)
                        moveItemList.push(moveItem)

                        // moveLiList.push(moveLi)
                    }
                    LiIndexList.sort((a, b) => b - a);//数组元素从大到小排序
                //     /*目标项目的位置在原来数组中的索引是dropIndex,判断被拖动的项目在原数组最小索引的元素是否在目标元素之前，
                // 如果是，是从上往下拖，会删除拖动的元素，删除后索引号会减1，拖到目标项目之后，则拖动后的位置是新数组中目标元素索引+1处即insertIndex+1，
                // 如果被拖动项目在原数组中的索引大于目标项目在原数组中的索引，即被拖动元素在目标元素之后，是从下往上拖，
                // ，拖动目标项目之前，则拖动后的位置是目标元素在新数组中的索引是insertIndex

                // 原数组目标项目索引：dropIndex
                // 原数组拖动项目最小索引：LiIndexList[LiIndexList.length-1]
                // */
                //     // console.log('被拖动的项目索引列表中最大值: ' + LiIndexList[0])
                //     // console.log('被拖动的项目索引列表中最小值: ' + LiIndexList[LiIndexList.length-1])
                    LiIndexList.forEach((index) => {
                        videoList.splice(index, 1);

                        // liElList.splice(index, 1);
                    })



                //     // 根据目标元素文本求出其在被删减后的videoList中的索引,再根据索引进行插入
                //     // 从上往下拖，是插入到insertIndex+1位置，从下往上拖，是插入到insertIndex位置
                setTimeout(() => {
                    let insertIndex = videoList.findIndex(video => video.title === dropText);
                    // console.log('新数组目标项目索引是:'+insertIndex)
                    if (LiIndexList[LiIndexList.length-1] < dropIndex) {
                        // 从上往下拖动，是插入到insertIndex+1位置
                        insertIndex=insertIndex+1
                        videoList.splice(insertIndex, 0, ...moveItemList);

                        // liElList.splice(insertIndex, 0, ...moveLiList);


                    }else if(LiIndexList[LiIndexList.length-1] > dropIndex){
                        // 从下往上拖动，是插入到insertIndex-1位置
                        videoList.splice(insertIndex, 0, ...moveItemList);

                        // liElList.splice(insertIndex, 0, ...moveLiList);
                    }

                    videoList.forEach((item) => {
                        addItemToPLaylistPanel(item.title);
                    })
                    playItemIndex = videoList.findIndex(item => item.title === currentPlayVideoTitle);
                    if(playItemIndex>-1){
                        setCurrentItemBackgroundAndPlayingGifVisible()
                    }else{console.log('没有播放视频')}
                    // localStorage.setItem('playItemIndex', playItemIndex);
                    saveVideoListToLocalStorage(videoList)
                    // updateVideoPlayList()
                    // playItemIndex?setCurrentItemBackgroundAndPlayingGifVisible():console.log('没有播放视频');
                    // setCurrentItemBackgroundAndPlayingGifVisible()
                    // console.log('拖动结束后的videoList.length: ', videoList.length);

                    // saveVideoList()
                    // saveVideoListToLocalStorage(videoList)
                    // saveLiElListToLocalStorage()
                    // localStorage.setItem('playItemIndex', playItemIndex);
                },5)

        }else{

            currentPlayVideoTitle = getCrruentPlayVideoTitle()
            let dragItem = videoList.splice(dragIndex, 1)[0];//将拖动项从列表中删除
            // let dragLi = liElList.splice(dragIndex, 1)[0];//将拖动项从列表中删除
            if(dragIndex<dropIndex){
                let insertIndex = videoList.findIndex(video => video.title === dropText)+1;

                // let insertIndex = videoList.findIndex(video => video.title === dropText);
                videoList.splice(insertIndex, 0, dragItem);//将拖动项添加到目标位置，对应的是播放面板上面拖到的位置
                // console.log('从上往下拖动目标元素索引dropIndex是dragIndex:'+dropIndex);
                // console.log('从上往下拖动目标元素索引dropIndex是:'+dropIndex);
                //////////////////
                // liElList.splice(dropIndex, 0, dragLi);//将拖动项添加到目标位置，对应的是播放面板上面拖到的位置
                //////////////////
            }else if(dragIndex>dropIndex){
                // let dragItem = videoList.splice(dragIndex, 1)[0];//将拖动项从列表中删除
                console.log('从下往上拖动目标元素的索引dropIndex是:'+dropIndex);
                let insertIndex = videoList.findIndex(video => video.title === dropText);

                videoList.splice(insertIndex, 0, dragItem);//将拖动项添加到目标位置，对应的是播放面板上面拖到的位置
                ////////////
                // liElList.splice(insertIndex, 0, dragLi);//将拖动项添加到目标位置，对应的是播放面板上面拖到的位置
                ////////////
            }

             videoList.forEach((item) => {
                    addItemToPLaylistPanel(item.title);
                })
            if(currentPlayVideoTitle){
                playItemIndex = videoList.findIndex(item => item.title === currentPlayVideoTitle);
                // playItemIndex?setCurrentItemBackgroundAndPlayingGifVisible():console.log('没有播放视频');
                if(playItemIndex>-1){
                    setCurrentItemBackgroundAndPlayingGifVisible()
                }else{console.log('没有播放视频')}
            }
            // saveVideoList()
            // saveVideoListToLocalStorage(videoList)
            // saveLiElListToLocalStorage()
            localStorage.setItem('playItemIndex', playItemIndex);

            saveVideoListToLocalStorage(videoList)
            // updateVideoPlayList()

        }

            return false;
     }

        function dragEnd(e) {
            if (e.target.tagName === 'LI') {
                e.target.classList.remove('over');
            }

        }


        // 拖动 listContainer 的事件处理
        listContainer.addEventListener('mousedown', (event) => {
            if (!event.target.matches('li')) {
                isDraggingListContainer = true;
                offsetX = event.clientX - listContainer.offsetLeft;
                offsetY = event.clientY - listContainer.offsetTop;
            }
        });

        document.addEventListener('mousemove', (event) => {
            if (isDraggingListContainer) {
                listContainer.style.left = `${event.clientX - offsetX}px`;
                listContainer.style.top = `${event.clientY - offsetY}px`;
            }
        });

        document.addEventListener('mouseup', () => {
            isDraggingListContainer = false;
        });


        // 为列表项添加点击事件监听器，点击歌曲条目播放
        listContainer.addEventListener('click', (event) => {
            
            // 如果点击播放列表项
            if (event.target.matches('.list-item')) {
                // let clickedIndex

                restorePreviousPlayItemBackgroundPlayingGifVisible()
                currentSelectedItem = event.target; // 记录当前被选中的 <li> 元素

                console.log('点击的列表项:', currentSelectedItem);
                // alert('点击的列表项:', currentSelectedItem);
                // const ul = document.querySelector('ul.list-box');
                // let lis = ul.querySelectorAll('li');
                // lis = Array.from(lis);


                // currentSelectedItem.style.backgroundColor = 'skyblue'; // 设置被选中元素的背景颜色

                // // 获取 ul 元素
                let myList = document.getElementById('myList');

                // // 获取所有的 li 元素
                let listItems = myList.getElementsByTagName('li');

                 // 获取被点击的 li 元素的索引
                // let clickedIndex = Array.from(listItems).indexOf(event.target);
                let clickedIndex = Array.from(listItems).indexOf(currentSelectedItem);

                console.log('点击的 li 元素的索引:', clickedIndex);
                // alert('点击的 li 元素的索引:', clickedIndex);

                // 点击列表项时提取 PNumber
                let textContent = currentSelectedItem.textContent;
                // 点击列表项时获取列表项的索引作为播放列表项索引
                // playItemIndex = Number(textContent.split('.')[0]) - 1;
                playItemIndex = clickedIndex;
                // setCurrentItemBackgroundAndPlayingGifVisible()
                
                if(openPlayUrl){
                    
                    window.open(videoList[playItemIndex].playUrl)
                }else{
                    clickLiEl(playItemIndex)

                }
                // clickLiEl(playItemIndex)

                
                localStorage.setItem('playItemIndex', playItemIndex);

                setCurrentItemBackgroundAndPlayingGifVisible()
                

                // 如果点击了关闭播放列表按钮.video-list-btn
            } else if (event.target.matches('#closePlaylist')) {
                // let videoListButton = document.querySelector('.video-list-btn')

                let isPanelShow = localStorage.getItem('isPanelShow');
                if(isPanelShow==='none'){
                    isPanelShow = 'block';
                }else{
                    isPanelShow = 'none';
                }
                videoListButton = document.querySelector('.video-list-btn')
                // listContainer.style.display = isPanelShow
                if (videoListButton) {
                    videoListButton.textContent = isPanelShow==='block' ? '关闭列表' : '播放列表';
                }
                // localStorage.setItem('isPanelShow',isPanelShow)

                let playlistPanel = document.querySelector('.container.mt-5.draggable');
                playlistPanel.style.display = 'none';
                
                localStorage.setItem('isPanelShow', 'none');
                

                // 如果点击了播放模式按钮
            } else if (event.target.matches('#playMode')) {
                playMode = (playMode + 1) % 3;
                // playMode++

                // if(playMode>2){playMode=0}
                // console.log("播放模式按钮被点击,当前playMode是:"+playMode);
                if (playMode === 0) {
                    event.target.textContent = "顺序播放";
                    playModeBtnText='顺序播放'
                    localStorage.setItem('playMode', 0);

                    // alert("已开启顺序播放,playMode: "+playMode);
                } else if (playMode === 1) {
                    event.target.textContent = "随机播放";
                    playModeBtnText='随机播放'
                    localStorage.setItem('playMode', 1);

                    // alert("已开启随机播放,playMode: "+playMode);
                } else if (playMode === 2) {
                    event.target.textContent = "单集循环";
                    localStorage.setItem('playMode', 2);

                    playModeBtnText='单集循环'

                    // alert("已开启单集循环,playMode: "+playMode);
                }
                // alert(`点击了: ${event.target.textContent}`);
                localStorage.setItem('playModeBtnText', playModeBtnText);

                console.log("1388播放模式按钮被点击,当前playMode是:"+localStorage.getItem('playMode'));
                // 如果点击了全选按钮

                // 如果点击了全选按钮
            } else if (event.target.matches('#selectAllItem')) {

                isSelctedAll = !isSelctedAll;

                const checkboxes = listContainer.querySelectorAll('input[type="checkbox"]');

                checkboxes.forEach(checkbox => {
                    checkbox.checked = !checkbox.checked; // 反转多选框的选中状态
                });
                let selectAllItemBtn = document.querySelector("#selectAllItem");
                hasCheckedCheckbox()?selectAllItemBtn.textContent="反选":selectAllItemBtn.textContent="全选"


                // 如果点击移除选中按钮
            } else if (event.target.matches('#removeItem')) {

                // videoList.length=0
                  // 清空videoList数组


                // 保存清空后的状态到localStorage
                // localStorage.setItem('videoList', JSON.stringify(videoList));
                // liElList.length=0
                // saveLiElListToLocalStorage()
                // saveVideoList()
                // selectAllItemBtn.textContent="全选"

                // 移除所有选中状态的多选框对应的 <li> 元素
                const checkboxes = listContainer.querySelectorAll('input[type="checkbox"]:checked');
                const listItems = document.getElementById('myList').getElementsByTagName('li');
                const indicesToRemove = [];

                checkboxes.forEach(checkbox => {
                    const parentLi = checkbox.closest('li');
                    if (parentLi) {
                        // 获取被移除的 <li> 元素的索引
                        const index = Array.from(listItems).indexOf(parentLi);
                        indicesToRemove.push(index);
                    }
                });

                // 按索引从大到小排序，确保移除时索引不会变化
                indicesToRemove.sort((a, b) => b - a);

                for (let index of indicesToRemove) {
                    videoList.splice(index, 1);
                    // liElList.splice(index, 1); // 删除liElList中对应的元素
                     // 当删除播放列表面板列表项时需要更新playItemIndex,才能正确播放对应列表项
                    if (index < playItemIndex) {
                        playItemIndex--;
                    } else if (index === playItemIndex) {
                        // 如果当前播放的列表项被删除，则停止播放
                        playItemIndex=-1
                        stopVideo();
                    }
                }


                indicesToRemove.forEach(index => {
                    // console.log(`被移除的 <li> 元素的索引: ${index}`);
                    listItems[index].remove();



                });
                let count=0
                if(videoList.length>0){
                    count=videoList.length
                }
                count=count>0?'总计:'+count:'点击视频左边+号添加'
                let tip = document.querySelector('.text-tip')
                if(tip){
                    tip.textContent=count
                }
                localStorage.setItem('videoList', JSON.stringify(videoList));
                localStorage.setItem('playItemIndex', playItemIndex);
                // saveLiElListToLocalStorage()
                saveVideoListToLocalStorage(videoList)
                // updateVideoPlayList()
                // saveVideoList()
                let selectAllItemBtn = document.querySelector("#selectAllItem");
                hasCheckedCheckbox()?selectAllItemBtn.textContent="反选":selectAllItemBtn.textContent="全选"

                // 如果点击全部添加按钮
            }else if(event.target.matches('#addAllItem')){
                console.log('1347allVideoList长度:'+allVideoList.length)
                // let deleteAll = true
                let selectAllItemBtn = document.querySelector("#selectAllItem");
                selectAllItemBtn.textContent="全选"
                let videoEl = document.querySelector("div.bpx-player-video-wrap > video")
                videoEl.pause();
                videoEl.currentTime = 0;
                if(allVideoList.length>0){
                    // // 获取ul元素
                    let ulElement = document.getElementById('myList');

                    // 移除ul中的所有li元素
                    while (ulElement.firstChild) {
                        ulElement.removeChild(ulElement.firstChild);
                    }




                    // 清空数组
                    videoList.length = 0;
                    // 将allVideoList中的元素添加到videoList中
                    videoList.push(...allVideoList);

                    // for(let i=0;i<allVideoList.length;i++){
                    //     addItemToPLaylistPanel(allVideoList[i].title)
                    // }


                }
                saveVideoListToLocalStorage(videoList)
                // updateVideoPlayList()
                for(let i=0;i<videoPlayList.length;i++){
                    addItemToPLaylistPanel(videoPlayList[i].title)
                }
                // 如果点击切换style按钮
            }else if (event.target.matches('#toggleStyleBtn')) {
               console.log('1384切换style按钮被点击,allvideoList长度:'+allVideoList.length)
                toggleTheme()
                isDarkMode = !isDarkMode;

                // 如果点击了svg添加按钮
            }else if(event.target.matches('#addVideoBtn')){
                let videoItem = document.querySelector('div.clickitem') ||
                    document.querySelector('div.video-episode-card__info-title.video-episode-card__info-title_indent')||
                    document.querySelector('.video-episode-card__info-title');
                let listHead = document.querySelector("#multi_page > div.head-con") ||
                    document.querySelector(".video-sections-head_first-line");
                if(videoItem||listHead){
                    // dialog(message,x=false,y=false,second=false)
                    // x默认1150px，y默认100px，second默认3秒
                    console.log('调用 dialog 函数:', '仅用于添加非合集视频,请点击合集里面视频左边的+添加', 1000, 180, 4);
                    // dialog('仅用于添加非合集视频,请点击合集里面视频左边的+添加',1000,180,4)
                    dialog('仅用于添加非合集视频,请点击合集里面视频左边的+添加')
                    return
                }
                
                console.log('1613添加按钮被点击')
                let stitle = document.querySelector('.video-title.special-text-indent').getAttribute('data-title')
                let splayUrl = window.location.href
                console.log('stitle:',stitle)
                console.log('splayUrl:',splayUrl)
                if(stitle&&splayUrl.includes('/video/')){
                    // console.log('stitle:',stitle)
                    // console.log('splayUrl:',splayUrl)
                    videoList=JSON.parse(localStorage.getItem('videoList'))||[]
                    const svideoInfoInstance = new videoInfo('null', 'null', 'null', stitle, splayUrl);
                    // console.log('正在添加的stitle:', stitle);
                    // console.log('添加splayUrl:', splayUrl);
                    dialog(`已添加<<${stitle}>>到播放列表`)
                    videoList.push(svideoInfoInstance);
                    localStorage.setItem('videoList', JSON.stringify(videoList));
                    addItemToPLaylistPanel(stitle);
                }else{
                    console.log('添加失败')
                    dialog('视频信息加载中,请等稍后重试')
                }
                
                // if(videoList.length>0){
                //     count=videoList.length
                // }
                // count=count>0?count:'点击视频左边+号添加'
                // let tip = document.querySelector('.text-tip')
                // if(tip){
                //     tip.textContent=count
                // }


            }

        });

        // 将列表容器插入到 document.body 中
        document.body.appendChild(listContainer);

    }



        function saveVideoListToLocalStorage(videoList) {
            const videoListData = videoList.map(videoInfo => {
                // if (!videoInfo.videoElementHtml || !videoInfo.liHtml) {
                //     console.error('videoInfo 缺少 videoElementHtml 或 liHtml:', videoInfo);
                //     return null;
                // }
                return {
                    
                    firstSpanText: videoInfo.firstSpanText,
                    secondSpanText: videoInfo.secondSpanText,
                    title: videoInfo.title,
                    playUrl: videoInfo.playUrl,
                };
            }).filter(item => item !== null); // 过滤掉缺少 videoElementHtml 或 liHtml 的项

            localStorage.setItem('videoList', JSON.stringify(videoListData));
        }

  
    function getVideoListFromLocalStorage() {
        const videoListData = JSON.parse(localStorage.getItem('videoList'));
        if (videoListData) {
            return videoListData.map(videoInfoData => {
                return new videoInfo(
                    videoInfoData.firstSpanText,
                    videoInfoData.secondSpanText,
                    videoInfoData.title,
                    videoInfoData.playUrl
                );
            });
        }
        return [];
    }

    // 为视频前面添加+号，点击后可以添加到播放列表
    function createAddBtnForVideoItem() {
        // class vedioInfo {
        //     constructor(firstSpanText, secondSpanText, title, playUrl) {
        //         
        //         this.firstSpanText = firstSpanText; // 视频序号，如：P1
        //         this.secondSpanText = secondSpanText; // 视频标题，如：你好吗
        //         this.title = title; // 名称如：P4 你好吗
        //         this.playUrl = playUrl; // 视频播放链接，如https://www.bilibili.com/video/BV1Ys4y1r7Dj/
        //     }
        // }
        // 分P视频ul
        const ul = document.querySelector('ul.list-box');
        // 其他合集ul
        const ulo = document.querySelector('.video-section-list.section-0');
        if (ul) {
            // 定义SVG图标按钮
            const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="margin-right: 10px;" title="添加到播放列表"><path fill="#000000" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"/></svg>`;
            
            let j = 0
            allVideoList=[]
            ul.querySelectorAll('li').forEach(li => {
                
                const spans = li.querySelectorAll('span');
                let firstSpanText = spans[0].textContent ? spans[0].textContent : 'P';
                let secondSpanText = spans[1].textContent ? spans[1].textContent : '未匹配标题';
                firstSpanText=firstSpanText.trim();
                secondSpanText=secondSpanText.trim();
                let videoTitle = firstSpanText + ' ' + secondSpanText;
                // let allVideoInfo = new vedioInfo(j, videoTitle, videoElement);
                let playUrl = li.querySelector('a').href;
                let mAllvideoInfo = new videoInfo(j,firstSpanText,secondSpanText, videoTitle, playUrl);
                // let mAllvedioInfo = new vedioInfo(index,firstSpanText,secondSpanText, videoTitle, playUrl);
                allVideoList.push(mAllvideoInfo);
                const img = li.querySelector('img');
                if (img) {
                    img.insertAdjacentHTML('beforebegin', svgIcon);
                    const newSvg = img.previousElementSibling;

                    newSvg.addEventListener('click', (event) => {
                        // liElList = getLiElListFromLocalStorage();
                        event.preventDefault();
                        event.stopPropagation();
                        dialog(`已添加<<${videoTitle}>>到播放列表`);

                        // liElList.push(li);
                        let mvideoInfo = new videoInfo(j,firstSpanText,secondSpanText,videoTitle, playUrl);
                        // let mvedioInfo = new vedioInfo(index,firstSpanText,secondSpanText,videoTitle, playUrl);
                        // console.log('正在添加的数量i:'+i)
                        console.log('正在添加的videoTitle:'+ videoTitle);
                        console.log('添加playUrl:'+playUrl);
                        // videoList=[]
                        videoList.push(mvideoInfo);
                        console.log('添加videoList长度:'+videoList.length);
                        
                        // saveVideoListToLocalStorage(videoList);
                        localStorage.setItem('videoList', JSON.stringify(videoList));
                        // updateVideoPlayList()
                        i++;

                        addItemToPLaylistPanel(videoTitle);
                       
                        // if(videoList.length>0){
                        //     count=videoList.length
                        // }
                        // count=count>0?count:'点击视频左边+号添加'
                        // let tip = document.querySelector('.text-tip')
                        // if(tip){
                        //     tip.textContent=count
                        // }

                    });
                }
                j++;
            });
        }else if(ulo){
            // let videoItem = document.querySelector('div.video-episode-card__info-title.video-episode-card__info-title_indent');
            // 定义SVG图标按钮
            let itemList=[]
            let videoEl = document.querySelector("div.bpx-player-video-wrap > video")
            // let playId1
            //     if(videoList.length>0){
            //         playId1 = localStorage.getItem('playId')||0;
            //     }else{
            //         playId1=0
            //     }
            // let playId1 = videoList.length > 0 ? localStorage.getItem('playId') || 0 : 0;
            videoEl.muted = true;//静音
            const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="margin-right: 10px;" title="添加到播放列表"><path fill="#000000" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"/></svg>`;
            let tempPlayIndex=-1;
            let videot=[]
            let videou=[]
            let videotu=[]
            let playitem
            
            let isLastItem = false
            let j = 0;
            let i = 0; // 定义 i 变量
            let allVideoList = [];
            let videoLists = []; // 定义 videoLists 变量
            let playUrl
            // let videoTitle
            // localStorage.setItem('playText', liTitle);
            let playText = localStorage.getItem('playText');
            // let playIndex = 0
            let playItem = null

            // let itemList=[]
            
            let playIndex = null
           // 定义一个异步函数来处理每个 item
            async function processItem(item, index) {
                let playId = index;
                itemList.push(item)

                
                // 使用闭包保存当前 item 的 videoTitle 和 playUrl
                const addSvgElement = (item, svgIcon) => {
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = svgIcon;
                    const svgElement = tempDiv.firstChild;
                    try {
                        item.insertAdjacentElement('beforebegin', svgElement);
                    } catch (error) {
                        console.error('Failed to insert element:', error);
                    }
                };

                const handleClick = (item, playId, videoTitle, playUrl) => {
                    event.preventDefault();
                    event.stopPropagation();
                    
                    // showTooltip(`已添加${videoTitle}到播放列表`);
                    dialog(`已添加<<${videoTitle}>>到播放列表`)
                    // 获取videoTitle在videot中的索引
                    // let index = videot.indexOf(videoTitle);
                    // if(playUrl!=videou[index]){
                    //     playUrl='https://www.bilibili.com'+initPlayUrlPath;
                    // }

                    const index1 = videot.indexOf(initTitle);
                    const index2 = videou.indexOf(initPlayUrlPath);
                    // tempPlayIndex = index1 >= 0 ? index1 : index2;
                    if(index2===-1&&index1!=-1){
                        playUrl='https://www.bilibili.com'+initPlayUrlPath;
                    }else if(index1===-1&&index2===-1){
                        let lastIndex = -1;
                        videou.forEach((item, index) => {
                            if (index < videou.length - 1 && item === videou[index + 1]) {
                              lastIndex = index + 1;
                            }
                          });
                        if(lastIndex>=0){
                            tempPlayIndex=lastIndex
                            playUrl='https://www.bilibili.com'+initPlayUrlPath;
                            videou[lastIndex]=initPlayUrlPath;
                        }
                    }



                    const videoInfoInstance = new videoInfo(playId, 'null', 'null', videoTitle, playUrl);
                    console.log('正在添加的videoTitle:', videoTitle);
                    console.log('添加playUrl:', playUrl);
                    videoList.push(videoInfoInstance);
                    localStorage.setItem('videoList', JSON.stringify(videoList));

                    i++;
                    addItemToPLaylistPanel(videoTitle);
                    
                   
                };

                
                
                addSvgElement(item, svgIcon);

                const newSvg = item.previousElementSibling;
                item.dispatchEvent(new MouseEvent('click', { bubbles: true }));
                const videoTitle = item.getAttribute('title').trim();
                // const playUrl = window.location.href.split('?')[0];
                playUrl = window.location.href;
                // let playUrlPath=playUrl.pathname;
                let playUrlPath=window.location.pathname
                const videoInfoInstance = new videoInfo(playId, videoTitle, videoTitle, videoTitle, playUrl);
                videotu[index]=[videoTitle,playUrlPath]
                videot[index]=videoTitle.trim()
                videou[index]=playUrlPath.trim()




                
                // console.log('1962 playUrl:', playUrl);
                // console.log('1965 tempPlayIndex:', tempPlayIndex);
                // console.log('1963 videoTitle:', videoTitle);
                // console.log('1964 innitTitle:', initTitle);
                // console.log('1965 initPlayUrlPath:', initPlayUrlPath);
                // console.log('1966 playUrl.pathname:', playUrlPath);
                
                allVideoList.push(videoInfoInstance);
                // if (playId1 === index) {
                //     playitem = item;
                // }

                
                newSvg.addEventListener('click', (event) => {
                    handleClick(item, playId, videoTitle, playUrl);
                });

                j++;

                // if(initTitle === videoTitle||initPlayUrlPath===playUrlPath){
                //     console.log('1995 找到临时播放索引:'+index)
                //     tempPlayIndex = index;
                    
                // }
                // 模拟异步操作，等待 1 秒
                await new Promise(resolve => setTimeout(resolve, 1000));

            }

            // 获取所有元素并依次处理
            const items = document.querySelectorAll('div.video-episode-card__info-title');
            

            // 依次处理每个 item
            items.forEach(async (item, index) => {
                await processItem(item, index);
            });

        // let playid = localStorage.getItem('playId')||0;
        // console.log('2036 playid:'+playid);
        console.log('2036 playItemIndex:'+playItemIndex);
        
        /*判断点击的视频是否为本地存储播放列表中的视频，若是则点击列表项播放，
        否则按当前点击的b站页面的视频播放*/
        let isListItem = false;
        
        if(playItemIndex!=-1){
            if(typeof videoList[playItemIndex] !== 'undefined'){
                videot.indexOf(videoList[playItemIndex].title)>=0?isListItem=true:isListItem=false;
            }else{
                isListItem=false
                console.log('2098 videoList[playItemIndex].title 未定义:')}
            
            console.log('2090 isListItem:'+isListItem);
            if(isListItem){
                setTimeout(() => {
                    videoEl.muted = false;//取消静音
                    clickLiEl(playItemIndex)
                }, 6000);
                setCurrentItemBackgroundAndPlayingGifVisible()
                scrollPlayItemIntoView()
           }else{
                playItemIndex=-1;
                
                setTimeout(() => {
                    const index1 = videot.indexOf(initTitle);
                    const index2 = videou.indexOf(initPlayUrlPath);
                    tempPlayIndex = index1 >= 0 ? index1 : index2;
                    if(index2===-1&&index1!=-1){
                        playUrl='https://www.bilibili.com'+initPlayUrlPath;
                    }else if(tempPlayIndex===-1){
                        let lastIndex = -1;
                        videou.forEach((item, index) => {
                            if (index < videou.length - 1 && item === videou[index + 1]) {
                              lastIndex = index + 1;
                            }
                          });
                        if(lastIndex>=0){
                            tempPlayIndex=lastIndex
                            playUrl='https://www.bilibili.com'+initPlayUrlPath;
                            videou[lastIndex]=initPlayUrlPath;
                        }
                    }
                    console.log('tempPlayIndex:'+tempPlayIndex);
                    console.log('playItemIndex:'+playItemIndex);
                    console.log('videot:'+videot)
                    console.log('videou:'+videou)
                    videoEl.muted = false;//取消静音
                    itemList[tempPlayIndex].click()
                }, itemList.length*600>=11000?11000:itemList.length*600);
                
                localStorage.setItem('playItemIndex', playItemIndex);
                
            }//else的括号
        }else{
            setTimeout(() => {
                videoEl.muted = false;//取消静音
                const index1 = videot.indexOf(initTitle);
                const index2 = videou.indexOf(initPlayUrlPath);
                tempPlayIndex = index1 >= 0 ? index1 : index2;
                if(index2===-1&&index1!=-1){
                    playUrl='https://www.bilibili.com'+initPlayUrlPath;
                }else if(tempPlayIndex===-1){
                    let lastIndex = -1;
                    videou.forEach((item, index) => {
                        if (index < videou.length - 1 && item === videou[index + 1]) {
                          lastIndex = index + 1;
                        }
                      });
                    if(lastIndex>=0){
                        tempPlayIndex=lastIndex
                        playUrl='https://www.bilibili.com'+initPlayUrlPath;
                        videou[lastIndex]=initPlayUrlPath;
                    }
                }
                console.log('2158 tempPlayIndex:'+tempPlayIndex);
                // console.log('2159 playItemIndex:'+playItemIndex);
                console.log('2160 videot:'+videot)
                console.log('2161 videou:'+videou)
                itemList[tempPlayIndex].click()
            },itemList.length*600>11000?11000:itemList.length*600)  
        }
      
        
     }//最近的else if(ulo)的括号


    }//function createAddBtnForVideoItem的括号
    /////////////////////////////////
    // Your code here...
})();