查看“Widget:编队计算器”的源代码

<includeonly><!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>许愿活动筛选</title>
        <script type="text/javascript" src="https://wiki.biligame.com/ys/MediaWiki:vue3-global.js?action=raw&ctype=text/javascript"></script>
        <style>
            @media (min-width: 1200px) {
              .row-container{
                  width: 100% !important;
                  display:flex !important;
              }
            }
         
          
            .gacha-container {
                display: flex;
                gap:10px;
                background:rgba(0,0,0,0.15);
            }
            @media (max-width: 768px) {
              .row-container{
                 
                  display:grid !important;
              }
            .order-2{
                order:2;
            }
            .order-1{
                order:1;
            }

            }
           
            .col-lg-5{
                display:flex;
                
            }
            .rectangle{
                margin-top:10px;
                border-radius: 4px;
                filter: brightness(0.6); /* 调暗未选中的活动展示部分 */
                transition: filter 0.3s ease; /* 添加过渡效果 */
            }
            .rectangle img{
                width: 100%;
            }
            .pagination {
                display: flex;
                align-items: center;
                margin-top: 20px;
                gap:5px;
                justify-content: end;
            }
    
            .page-numbers {
                display: flex;
                gap: 5px;
            }
    
            .small-rect {
                cursor: pointer;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #ddd;
                border-radius: 4px;
                cursor: pointer;
                user-select: none;
                background: #FFFFFF;
            }
    
            .small-rect.active {
                background-color: #007bff;
                color: black;
                background: #FFFFFF;
                box-shadow: 0px 0px 9px #FAB5A1;
                border-radius: 4px;
            }
    
            button {
                padding: 8px 16px;
                border: none;
                background: transparent;
                cursor: pointer;
                user-select: none;
                color:white;
            }
    
            button:disabled {
                cursor: not-allowed;
                opacity: 0.6;
            }
            .text{
                border-bottom: 1px solid #C1B5B9;
                justify-content: center;
                display: flex;
            }
            .tab{
                width:33%;
                gap: 10px;
                isolation: isolate;
                margin-top:10px;
            }  
    
            .tab.active{
                box-sizing: border-box;
                flex-direction: row;
                justify-content: center;
                align-items: center;    
                background: radial-gradient(54.93% 82.98% at 50% 129.79%, rgba(255, 175, 141, 0.35) 30%, rgba(255, 210, 141, 0) 100%), #2C2E42;
                border-bottom: 2px solid #F2D5BD;
            }
            .hisTab{
                width:16%;
                padding: 8px !important;
            }
        </style>
        <style> 
            .sub-title{
                background-image: url('https://patchwiki.biligame.com/images/lysk/0/0e/nl3duyrtlxd0r0u9vnf9e8vkvezm8eh.png');
                background-repeat: no-repeat;
                background-size: cover;
                width: 250px;
                height: 44px;
                left: 0px;
                top: 0px;
            }
            .modal-content .title-text{
                top: 0 !important;
            }
            .modal-content .memory-name{
                color: #65606C;
                width: 100%;
                text-align: center;
            }
            .title-text{
                margin-left: 15px;
                margin-top: 12px;
                font-family: 'Source Han Serif CN';
                font-style: normal;
                font-weight: 700;
                font-size: 16px;
                line-height: 23px;
                color: #5F4653;
                top: 10px;
                position: relative;
                left: 10px;
                  
            }
            .button-container {
                max-width: 345px;
                margin: 15px auto; 
                display: flex;
                flex-wrap: wrap; 
                justify-content: center; 
                gap: 10px; 
            }
            .hisButton-container{
                max-width: 100%;
                margin: 15px auto; 
                display: flex;
                flex-wrap: wrap; 
                justify-content: center; 
                gap: 10px;
                overflow:auto;
            }
            
            .hisButton-container .img-container{
              height:130px;
            }
            .img-container{
                position: relative;
                height: 110px;
                margin-bottom: 5px;
            }
            .square-button {
                position: relative;
                width: 100px;
                height: 100px;
                flex-shrink: 0; /* 确保按钮大小固定，不因容器缩小而改变 */
                border-radius: 2px;
                border-width: 1px 0px 1px 0px;
                border-style: solid;
                border-color: rgba(255, 255, 255, 1);
            }
            .directional-icon {
                position: absolute;
                top: -10px;
                right: -5px;
                width: 45px;
                height: 20px;
                /* 确保图标不会影响按钮的其他内容 */
                pointer-events: none;
            }

            .change-container{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 0px;
                gap: 16px;
                width: 100%;
                height: 24px;
            }
            .change-one{
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 2px;
                width: 112px;
                height: 24px;
                background: #4F3E4B;
                box-shadow: inset 0px 0px 8px #C3C1BE;
                border-radius: 31px;
                border: 1px solid ;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #FFFFFF;
            }
            .change-three{
                font-size: 14px;
                line-height: 20px;
                color: #EDD3B4;
                width: 112px;
                height: 24px;
                border: 1px solid ;
                background: linear-gradient(180deg, #D96E6C 0%, #B24E44 100%), #4F3E4B;
                box-shadow: inset 0px 0px 8px #C3C1BE;
                border-radius: 31px;
                display: flex;
                justify-content: center;
                align-items: center;
                
            }
    
            .sim-table{
                border-collapse: separate;
                background: transparent;
            }
    
            th{
                justify-content: center;
                align-items: center;
                text-align: center;
                width: 172px;
                height: 39px;
                border-width: 1px;
                border: transparent;
                background: rgba(237, 237, 239, 0.8);
                font-family: 'Source Han Sans CN';
                font-style: normal;
                font-weight: 700;
                font-size: 16px;
                line-height: 23px;
                color: #846D79;
            }
            td{
                text-align: center;
                justify-content: center;
                align-items: center;
                padding: 8px 24px;
                gap: 10px;
                width: 172px;
                height: 36px;
                background: rgba(217, 216, 221, 0.52);
                font-family: 'Source Han Sans CN';
                font-style: normal;
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                color: #65606C;
            }
    
            .event-container,.history-container,.recorder-container{
                width: 100%; 
                aspect-ratio: 1 / 1.8; 
                background-color: transparent;
                position: relative;
                background: "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(347.93deg, #3B4165 0%, #111129 32.72%, #111129 73.58%, #3A3E65 100%)";
                background-size: cover;
                background-repeat: no-repeat;
            }
    
            .counter{
                top: 25px;
                left: 10px;
                opacity: 0px;
                font-family: Source Han Serif SC VF;
                font-size: 14px;
                font-weight: 600;
                line-height: 20.12px;
                text-align: center;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 8px 12px;
                gap: 16px;
                position: absolute;
                width: 137px;
                height: 36px;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(7.5px);
                border-radius: 35px;
            }
            .text-span{
                width: 113px;
                height: 20px;
                font-family: 'Source Han Serif SC VF';
                font-style: normal;
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
                color: #FFFFFF;
                flex: none;
                order: 0;
                flex-grow: 0;
            }
    
            .nav-bottom{
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 20px;
                gap: 16px;
                position: absolute;
                width: 100%;
                height: 15%;
                bottom: -0.22px;
                background: linear-gradient(0deg, rgba(134, 134, 155, 0.8) 0%, rgba(134, 134, 155, 0) 100%);
                backdrop-filter: blur(7.5px);
                border-radius: 0px;
            }
            .draw-card{
                width: 100%;
                position: absolute;
                top:80%;
                left: 10%;
                display: flex;
                gap: 40px;
                width: 80%;
                margin: 0 auto;
                z-index: 1000;
            }
            .draw-one{
                width:150px;
                aspect-ratio: 46 / 11;
                background-image: url('https://patchwiki.biligame.com/images/lysk/d/d4/eoq33iqhpb0f3kuqnzthqcz701exnle.png');
                
                border-image-source: linear-gradient(266.73deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 32.5%, #FFFFFF 79%, rgba(255, 255, 255, 0.2) 100%);
                border-radius: 4px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .draw-ten{
                width:150px;
                aspect-ratio: 46 / 11;
                background-image: url('https://patchwiki.biligame.com/images/lysk/b/b4/ou0g0bvwucce4kb8uvjgel37atzaah6.png');   
                background-size: cover;
                background-repeat: no-repeat;
                border-radius: 4px;
               
                border-image-source: linear-gradient(266.73deg, #FFF6D5 0%, rgba(255, 246, 213, 0.5) 32.5%, #FFF6D5 79%, rgba(255, 246, 213, 0.2) 100%);
            }
            .nav-container{
                display: flex;
                width: 100%;
                gap: 5px;
            }
            .nav-btn{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 8px 10px;
                width: 33%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(45, 43, 57, 0) 60%);               
                filter: drop-shadow(0px -4px 12px rgba(255, 255, 255, 0.25));
                border-radius: 4px;               
                color: #FFFFFF;
                border: 1px solid rgba(255, 255, 255, 0.2);               
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
            }
            .nav-btn.active{
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(45, 43, 57, 0) 100%);
                border: 1px solid;
                box-shadow: 0px -4px 12px 0px rgba(255, 255, 255, 0.25);
            }
        </style>
        <style>
            .menu {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: #FBFBFB;
                text-align: center;
                border: 1px solid #C1B5B9;
                border-radius: 4px;
                z-index: 1000;
                font-size: 12px;
            }
            /* 下拉列表部分 */
            .position-button,.role-button,.star-button{
                padding: 8px;
                font-size: 12px;
                cursor: pointer;
                border-bottom: 1px solid #C1B5B9;
                display: inline-flex;
                text-align: center;
            }
    
            .position-button:last-child {
                border-bottom: none;
            }
            .role-button:last-child{
                border-bottom: none;
            }
            .star-button:last-child{
                border-bottom: none;
            }
            .menu span{
                color: #858389;
                margin-left: 10px;
                margin-right: 10px;
                align-items: center;
                justify-content: center;
            }
            .position ,.role,.star{
                position: relative;
                width: 105px;
                height: 26px;
                background-color: #F4F3F1;
                border-radius: 13px;
                display: flex;
                align-items: center;
                padding-right: 10px;
                font-size: 12px;
                justify-content: center;
            }
            .role{
                width: 92px;
            }
            .history-filter{
                background-color: #33313D;
                color: white;
                height: 20px;
                border-radius: 10px;
            }
            .position-container ,.role-container,.star-container{
                position: relative;
                display: flex;
            }
            /* 模拟三角形 */
            .triangle {
                position: absolute;
                top: 10px;
                left: 85px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 6px solid #6F6E74;  /* 未下拉的状态 */
            }
            .role .triangle{
                left: 70px;
            }
            .position-container:hover,.role-container:hover{
                cursor: pointer; 
            }
            .dropdown-container{
                display: flex;
                gap:20px;
                margin-top: 10px;
                justify-content: flex-start;
            }
    
            .icon-container {
                display: flex;
                align-items: center;
            }
    
            .icon-box {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
    
            }
    
            .icon-box img {
                width: 16px;
                height: 16px;
            }
            .row-container{
                width: 100%;
          
            }
            .pagination button{
                padding:3px;
                height:20px;
                border-radius:4px;
                background: #FFFFFF;
                color:black;
            }
            .rectangle.active {
                filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.95));
                border-radius: 4px;
            }
                
            .single-draw-result {
                background-size: cover;
               
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
    
            .draw-background {
                max-width: 100%;
                max-height: 300px;
            }
    
            .ten-draw-results {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }

            .card-image {
                width: 100%;
                height: 100%; /* 设置图片的高度占满父容器的高度 */
                object-fit: cover;
            }
            .history-dropdown{
                justify-content: center;
            }
            .history-filter{
                width:100%;
            }
            .recorder-filter{
                border: 1px solid white;
                border-radius: 10px;
                width: 40%;
                margin-bottom: 10px;
            }
            .recorder-container,.history-container{
                background: rgba(122, 119, 125, 0.6);
            }
            .record{
                display: flex;
                margin: 0 10px;
                color: white;
                padding: 3px;
                font-size: 14px;
            }
            .left-col{
                width: 25%;
                display: flex;
                justify-content: center;
            }
            .middle-col{
                width: 30%;
                display: flex;
            }
            .right-col{
                width: 40%;
                display: flex;
                font-size: 12px;
                white-space: nowrap;
            }
            .arrow-span{
                position: relative;
                display: inline-block;
            
                cursor: pointer;
            }
            .arrow{
                right: -10px;
                position: relative;
            }
            .line{
                display: flex;
                gap: 10px;
                margin: 10px 0;
            }
            .delet-btn{
                width:38%;
                margin-top: 10px;
                
                margin-right: 5px;
            }
            .border-span{
                border-right: 1px solid white;
                width: 20%;
                /* line-height: 20px; */
                height: 16px;
                line-height: 20px;
                align-items: center;
                display: flex;
                font-size: 16px;
                justify-content: center;
            }
          .results-page{
                position: absolute;
                bottom: 16%;
                left: 45%;
                
            }
            .historyBox{
              height:calc(100% - 266px);
              overflow:hidden;
            }
        </style>
         <style>
            .ten-draw-box {
                position: absolute;
                width: calc(20% - 10px);
                aspect-ratio: 1 / 2;
                background: #F0F0F0;
                background: #F0F0F0;
                
            }
    
            .card-border {
                position: relative;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #CFD0D2 100%);
                
            }
    
            .card-image {
                width: 100%;
                height: 100%; /* 设置图片的高度占满父容器的高度 */
                object-fit: cover;
            }
    
            .top-rectangle {
                position: absolute;
                width: 100%;
                height: 5px;
                top: -5px;
                left: 0;
                background: #D9D9D9;
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            }
    
            .card-icon {
                position: absolute;
                /* width: 30px; */
                height: auto;
                bottom: -4px;
                left: 0;
                width: 100%;
            }
    
    
            .outer-border {
                position: absolute;
                width: 100%;
                height: 100%;
                
                left: 0;
                top: -2px;
            }
            .five-star-border{
                border: 2px solid #FDFFB3;
                box-shadow: 0px 0px 10px 0px #FEFCB1;
            }
            .four-star-border{
                border: 1px solid #C2BAFF;
                box-shadow: 0px 0px 4px 0px #CEC4FF;
            }
            
            .top-glow {
                position: absolute;
                width: 100%;
                height: 30px;
                top: -30px;
                left: 0;
                /*background: url(https://patchwiki.biligame.com/images/lysk/9/9a/cutmcnz4h0b1pj68yli46wmlbgy4r8s.png);*/
                background-size: contain;
                background-repeat: no-repeat;
            }
            .five-star-top{
                background: url(https://patchwiki.biligame.com/images/lysk/9/9a/cutmcnz4h0b1pj68yli46wmlbgy4r8s.png);
            }
            .four-star-top{
                top:-30px;
                background: radial-gradient(74.68% 52.22% at 50% 90%, rgba(222, 218, 255, 0.5) 0%, rgba(187, 181, 241, 0) 100%), linear-gradient(180deg, rgba(164, 161, 248, 0) 0%, #A4A1F8 100%);

            }
            .bottom-glow {
                position: absolute;
                width: 100%;
                height: 30px;
                bottom: -25px;
                left: 0;
                /*background: url(https://patchwiki.biligame.com/images/lysk/2/2d/s8pnejogvtlt30bcv9z7q92722vyotw.png);*/
                z-index: 5;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .five-star-bottom{
                background: url(https://patchwiki.biligame.com/images/lysk/2/2d/s8pnejogvtlt30bcv9z7q92722vyotw.png);
            
            }
            .four-star-bottom{
                background: linear-gradient(360deg, rgba(164, 161, 248, 0) 0%, #A4A1F8 100%);
            }
            .history-text{
                margin-left: 20px;
                margin-top: 0px;
                top: 22px;
                left: 3px;
                position: absolute;
            }
            .record:nth-child(even) {
                background: rgba(80, 79, 85, 1);
                ;
            }
            .record:nth-child(odd) {
                background: rgba(52, 50, 57, 1);
            }
            .memory-name {
                color: white;
                font-size: 12px;
                position: absolute;
                top: 102px;
                left: 2px;
            }
            .history-name{
                text-align:center
            }
            .result-page{
                position: absolute;
                bottom: 12%;
                left: 45%;
            }
        </style>
        <style>
        .memory-modal{
            width: 50vw;
            z-index: 1001;
            position: absolute;
            max-height: 50vh;
            border-radius: 5px;
        }
        .modal-content{
            max-width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            gap: 10px;
            overflow: auto;
            padding: 0 10px;
            background: #EDEDEF;
        }
        .memory-modal h3{
            width: 100%;
            text-align: center;
            color: #5F4653;
        }

        .memory-modal .button-container {
            display: flex;
            justify-content: center;
            gap: 20px; /* 取消和确认按钮之间的间距 */
            width: 100%; /* 按钮容器宽度 */
            clear: both;
            max-width: 100% !important;
        }
        .input-number-arrow {
            position: absolute;
            right: 23px;
            width: 15px;
            height: 10px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .input-number-arrow:hover {
            cursor: pointer;
        }

        .top-arrow {
            top: 2px;
            background-image: url('https://patchwiki.biligame.com/images/lysk/f/f8/9enwa04n3x4eq1wg2tpwv4soaef1vrz.png');
        }

        .bottom-arrow {
            top: 13px;
            background-image: url('https://patchwiki.biligame.com/images/lysk/f/f8/eoe3ucajuzdm371hdx9zot7fgpynzav.png');
        }

        td .input-wrapper {
            position: absolute;
            width: 100px;
            background: #aaa;
            padding: 2px 5px;
            top: 6px;
            right: calc((100% - 95px) / 2);
        }
        input[type="number"] {
            text-align: center;
            background: inherit;
            width: 70px;
            border: none;
            -webkit-appearance: none; /* 移除 Chrome, Safari 等 WebKit 浏览器中的箭头 */
            outline: none;
            appearance: none;

        }
        .cancel-btn{
            border: 1px solid rgba(255, 255, 255, 1);
            background: linear-gradient(0deg, #B0B0B0, #7E7E7E), linear-gradient(180deg, #B0B0B0 0%, #7E7E7E 100%);
            border-radius: 31px;
            
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 2px;
            width: 112px;
            height: 24px;
            box-shadow: 0px 0px 8px 0px rgba(195, 193, 190, 1) inset;
        }

        .confirm-btn{
            border: 1px solid rgba(255, 255, 255, 1);
            background: linear-gradient(0deg, #4F3E4B, #4F3E4B), linear-gradient(180deg, #B0B0B0 0%, #7E7E7E 100%);
            border-radius: 31px;
            color: rgba(237, 211, 180, 1);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 2px;
            width: 112px;
            height: 24px;
            box-shadow: 0px 0px 8px 0px rgba(195, 193, 190, 1) inset;
        }
        .change-icon{
            width: 20px;
            height: 20px;
            margin-right: 5px; /* 控制图标和文字之间的间距 */
            margin-left: -5px;
        }
        </style>
    </head>
    <body>
        <div class="gacha-container">
            <div class="row-container">
                <div class="col-lg-3 col-sm-12 col-md-3 order-2">
                    <div class="tab-container">
                        <!-- 筛选类别按钮 -->
                        <div class="text">
                            
                            <button @click="filterCategory('单人池')" :class="{ active: selectedCategory === '单人池' }" class="tab">单人池</button>
                            <button @click="filterCategory('多人池')" :class="{ active: selectedCategory === '多人池' }" class = "tab">多人池</button>
                            <button @click="filterCategory('其他')" :class="{ active: selectedCategory === '其他' }" class = "tab">其他</button>
                        </div>              
                    </div>
                
                    <div v-if = "selectedCategory === '单人池'" class="dropdown-container">
                        <!-- 模拟下拉列表 -->
                        <div class="position-container">
                            <div class="position" @click="togglePosition">
                                <div class="icon-container">
                                    <div v-for="icon in selectedOption.icons" :key="icon" class="icon-box">
                                        <img :src="icon" alt="icon">
                                    </div>
                                </div>
                                <span class="btn-span">{{ selectedPosition }}</span>
                                <div class="triangle"></div>
                            </div>
                                    
                            <!-- 下拉列表 -->
                            <div class="position-menu menu" v-show="isPositionVisible">
                                <span 
                                v-for="position in positions" 
                                :key="position" 
                                @click="selectPosition(position)"
                                :class="{ active: selectedPosition === position }"
                                class="position-button"
                                >
                                <div class="icon-container">
                                    <div v-for="icon in position.icons" :key="icon" class="icon-box">
                                        <img :src="icon" alt="icon">
                                    </div>
                                </div>
                                {{ position.name }}
                                </span>
                            </div>
                            
                        </div>
                        
                        <div class="role-container">
                            <!-- 内容文本 -->
                            <div class="role" @click="toggleRole">
                                <span class="btn-span">{{ selectedRole }}</span>
                                <div class="triangle"></div>
                                
                            </div>
                            <!-- 下拉列表 -->
                            <div class="role-menu menu" v-show="isRoleVisible">
                                <span 
                                v-for="role in roles" 
                                :key="role" 
                                @click="selectRole(role)"
                                :class="{ active: selectedRole === role }"
                                class="role-button"
                                >
                                {{ role }}
                                </span>
                            </div>
                        
                        </div>  
                    </div>
                    <!-- 活动展示部分 -->
                    <div 
                    class="rectangle" 
                    v-for="(activity, index) in paginatedActivities" 
                    :key="index" 
                    @click="selectActivity(activity)"
                    :class="{ active: selectedActivity === activity }"
                    >
                        <img :src="activity.banner" alt="Banner">
                        
                    </div>
                    <div class="pagination">
                        <button @click="changePage(1)" :disabled="currentPage === 1">首页</button>
                        <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
                        
                        <div class="page-numbers">
                        <div
                            v-for="page in totalPages"
                            :key="page"
                            class="small-rect"
                            :class="{ active: page === currentPage }"
                            @click="changePage(page)"
                        >
                            {{ page }}
                        </div>
                        </div>
                        
                        <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages.length">下一页</button>
                        <button @click="changePage(totalPages.length)" :disabled="currentPage === totalPages.length">尾页</button>
                    </div> 
                </div>
                <!-- Column 2 -->
                <div class="col-lg-4 col-sm-12 col-md-3 order-1">
                    <div v-if="showUpMemories" class="row row-1">
                        <div class="sub-title">
                            <p class="title-text">UP思念</p>
                        </div>
                        <div class="button-container">
                            <!-- 展示UP卡池，用于选择自选或定向 -->
                            <div v-for="(memory, index) in availableMemories" 
                                 :key="index" 
                                 class="img-container"
                                 @click="selectMemory(memory)">
                                <button                         
                                    class="square-button" 
                                    :style="{ 
                                        backgroundImage: `url(${memory.path})`, 
                                        border: isSelfSelecting && selectedUpMemories.includes(memory) ? '3px solid red' : 
                                                isDirectionalSelecting && selectedUpMemory === memory ? '3px solid red' : '' 
                                    }">
                                    <!-- 右上角图标，当确认了定向卡片时显示 -->
                                    <img v-if="selectedCategory === '多人池' && selectedUpMemory.length > 0 && selectedUpMemory[0] === memory" 
                                    src="https://patchwiki.biligame.com/images/lysk/1/18/16fbpjd3e7cxgddib7q93bdr0y4ttmc.png" 
                                    alt="icon"
                                    class="directional-icon">
 
                                </button>
                                <span class="memory-name">{{ memory.role }} · {{ memory.name }}</span>
                            </div>
                        </div>
                        <!-- 模态框显示五星卡 -->
                        <div v-if="showModal" class="memory-modal">
                            <div class="modal-content">
                                
                                <div class="sub-title">
                                    <p class="title-text">更换自选</p>
                                </div>
                                <div style="width: 100%;height: 1px;background-color: #846D7980;"></div>
                                <!-- 遍历所有符合条件的五星卡 -->
                                <div v-for="(memory, index) in memories.filter(memory => memory.star === 5 && memory.flag === 1)" 
                                    :key="index" 
                                    class="img-container" 
                                    @click="selectFiveStarMemory(memory)">
                                    <button                         
                                        class="square-button" 
                                        :style="{ backgroundImage: `url(${memory.path})`, border: selectedPermanentFiveStars.includes(memory) ? '3px solid red' : '' }">
                                    </button>
                                    <span class="memory-name">{{ memory.role }} · {{ memory.name }}</span>
                                </div>

                                <!-- 取消和确认按钮区域 -->
                                <div class="button-container">
                                    <button @click="cancelModal" class="cancel-btn">
                                        <img src="https://patchwiki.biligame.com/images/lysk/a/a4/fj0izbedidrqm3cs80pc0xzfhflcenf.png" 
                                        alt="cancel icon" 
                                        class="change-icon">
                                        取消更换</button>
                                    <button @click="confirmSelection" class="confirm-btn" :disabled="selectedPermanentFiveStars.length !== 5">
                                        <img src="https://patchwiki.biligame.com/images/lysk/c/c0/ish0pzuetkm0w0mld99w6ejx0rohq9s.png" 
                                        alt="confirm icon" 
                                        class="change-icon">
                                        确认更换</button>
                                </div>
                            </div>
                        </div>
                        <div class="change-container">
                            <div class="button-container">
                                <!-- 更换自选和定向按钮 -->
                                
                                <button v-if="!isSelfSelecting && !isDirectionalSelecting && showChangeSelfButton" @click="startSelection('self')" class="change-three">
                                    <img src="https://patchwiki.biligame.com/images/lysk/c/c0/ish0pzuetkm0w0mld99w6ejx0rohq9s.png" 
                                    alt="confirm icon" 
                                    class="change-icon">
                                    更换自选</button>
                                <button v-if="!isSelfSelecting && !isDirectionalSelecting && selectedActivity.category === '多人池'" @click="startSelection('directional')" class="change-one">
                                    <img src="https://patchwiki.biligame.com/images/lysk/a/a4/fj0izbedidrqm3cs80pc0xzfhflcenf.png" 
                                    alt="cancel icon" 
                                    class="change-icon">
                                    更换定向</button>
                            
                                <!-- 取消更换和确认更换按钮 -->
                                <button v-if="isSelfSelecting || isDirectionalSelecting" @click="cancelSelection" class="cancel-btn">
                                    <img src="https://patchwiki.biligame.com/images/lysk/a/a4/fj0izbedidrqm3cs80pc0xzfhflcenf.png" 
                                    alt="cancel icon" 
                                    class="change-icon">
                                    取消更换</button>
                                <button v-if="isSelectionValid" @click="confirmSelection" class="confirm-btn">
                                    <img src="https://patchwiki.biligame.com/images/lysk/c/c0/ish0pzuetkm0w0mld99w6ejx0rohq9s.png" 
                                    alt="confirm icon" 
                                    class="change-icon">
                                    确认更换</button>
                            </div>
                        </div>
                        
                    </div>
                
                    <div class="row row-2">
                        <div class="sub-title">
                            <p class="title-text">概率设定</p>
                        </div>
                       
                        <table class="LDSTable sim-table">
                            <thead>
                                <tr>
                                    <th style="border-top-left-radius: 5px;">思念品质</th>
                                    <th style="border-top-right-radius: 5px;">概率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>5星</td>
                                    <!-- 使用输入框替代固定概率，v-model 绑定到数据 -->
                                    <td>
                                    <div class="input-wrapper">
                                        <input type="number" v-model="inputFive" min="0" max="100" />%
                                        
                                        <div class="input-number-arrow top-arrow"
                                            @click="inputFive = inputFive + 1">
                                        </div>
                                        <div class="input-number-arrow bottom-arrow"
                                            @click="inputFive = inputFive - 1">
                                        </div>
                                    </div>
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td>4星</td>
                                    <td>
                                        <div class="input-wrapper">
                                        <input type="number" v-model="inputFour" min="0" max="100" />%
                                        <div class="input-number-arrow top-arrow"
                                            @click="inputFour = inputFour + 1">
                                        </div>
                                        <div class="input-number-arrow bottom-arrow"
                                            @click="inputFour = inputFour - 1">
                                        </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border-bottom-left-radius: 5px;">3星</td>
                                    <td style="border-bottom-right-radius: 5px;">
                                        <!-- 计算剩余的概率，用来表示三星的概率 -->
                                        {{ remainingThreeStarProbability }}%
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    
                        <table class="LDSTable sim-table">
                            <thead>
                                <tr>
                                    <th style="
                                    border-top-left-radius: 5px;
                                ">五星思念</th>
                                    <th style="
                                    border-top-right-radius: 5px;
                                ">概率</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>UP5星</td>
                                    <td>75%</td>
                                </tr>
                                <tr>
                                    <td style="
                                    border-bottom-left-radius: 5px;
                                ">非UP5星</td>
                                    <td style="
                                    border-bottom-right-radius: 5px;
                                ">25%</td>
                                   
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>
                    <div class="row row-3">
                        <div class="sub-title">
                            <p class="title-text">保底一览</p>
                        </div>
                        <table class="LDSTable sim-table">
                            <tr v-if="selectedCategory !== '其他'">
                                <td style="
                                border-top-left-radius: 5px;
                            ">大保底</td>
                                <td style="
                                border-top-right-radius: 5px;
                            ">{{ noUpFiveStarStreak }}</td>
                            </tr>
                            <tr>
                                <td >小保底</td>
                                <td>{{ noFiveStarStreak }} / 70</td>
                            </tr>
                            <tr v-if="selectedUpMemory.length > 0 && selectedCategory === '多人池'">
                                <td style="
                                border-bottom-left-radius: 5px;
                            ">定向</td>
                                <td style="
                                border-bottom-right-radius: 5px;
                            ">{{ selectedUpMemory[0].name }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- Column 3 -->
                <div class="col-lg-5 col-sm-12 col-md-6" style="padding: 10px  10px 10px 0px;">
                    <div v-if="selectedTab === 'wishing'" class="event-container" :style="{  background: 'rgba(18, 15, 36, 1) no-repeat center/cover',
                    width: '100%', aspectRatio: '1 / 1.8', position: 'relative' }">  
                            <div class="counter">
                                <span class="text-span">已许愿次数:{{ totalWishes }}</span>
                            </div>
                                         
                            <!-- 动画容器 -->
                            <div v-if="animationPlaying" id="animation-container">
                                <img ref="frame" alt="播放动画" style="width: 100%; height: 100%;">
                            </div>

                            <!-- 单抽结果展示 -->
                            <div v-if="showResult && currentDraw && currentDraw.length === 1 && !animationPlaying" class="single-draw-result" @click="returnToDraw">
                                <div class="single-draw-box" >
                                    <img :src="currentDraw[0].imageUrl" alt="抽卡结果" class="card-image">
                                </div>
                            </div>


                            <!-- 十抽结果展示 -->
                            <div v-if="currentDraw && currentDraw.length === 10" class="ten-draw-results">
                                <div v-for="(result, index) in currentDraw" :key="index" class="ten-draw-box" :style="getCardStyle(index)">
                                    <!-- 外边框 -->
                                    <div class="outer-border"
                                    :class="{ 
                                        'three-star-border': result.star === 3, 
                                        'four-star-border': result.star === 4, 
                                        'five-star-border': result.star === 5 
                                    }"
                                    ></div>

                                    <!-- 上部光晕 -->
                                    <div class="top-glow" :class="{ 
                                        'three-star-top': result.star === 3, 
                                        'four-star-top': result.star === 4, 
                                        'five-star-top': result.star === 5 
                                    }"></div>
                                    <img :src="result.imageUrl" alt="抽卡结果" class="card-image">

                                    <!-- 下部光晕 -->
                                    <div class="bottom-glow" :class="{ 
                                        'three-star-bottom': result.star === 3, 
                                        'four-star-bottom': result.star === 4, 
                                        'five-star-bottom': result.star === 5 
                                    }"></div>

                                    <!-- 星级标识图标 -->
                                    <img src="https://patchwiki.biligame.com/images/lysk/9/95/l5nsp6k2bmhixaupx94oinn0vb7caik.png" alt="标识组合" class="card-icon">
                                </div>
                            </div>

                            <!-- 抽卡按钮 -->
                            <div v-if="!animationPlaying && !showResult" class="draw-card">
                                <div class="draw-one" @click="wishOnce">
                                    <!-- 单抽按钮 -->
                                </div>
                                <div class="draw-ten" @click="wishTenTimes">
                                    <!-- 十抽按钮 -->
                                </div>
                            </div>
                            <div v-if="!animationPlaying && !showResult" class="nav-bottom">
                                <div class="nav-container">
                                    <span @click="selectedTab = 'wishing'" :class="{'active': selectedTab === 'wishing'}" class="nav-btn">许愿</span>
                                    <span @click="selectedTab = 'wish-record'" :class="{'active': selectedTab === 'wish-record'}" class="nav-btn">许愿记录</span>
                                    <span @click="selectedTab = 'history'" :class="{'active': selectedTab === 'history'}" class="nav-btn">历史记录</span>
                                </div>
                            </div>  
                    </div>
                    <div v-if="selectedTab === 'wish-record'" class="recorder-container">
                        <div class="line">
                        <div class="sub-title" style="margin-left: -6px;">
                            <p class="title-text history-text" >许愿记录</p>
                        </div>
                        <div class="delet-btn" @click="clearDrawHistory">
                            <svg width="100%" height="30px" viewBox="0 0 120 32" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG 内容 -->
                                <rect x="1.16699" y="1.22223" width="118.333" height="30" rx="15" fill="#33313D"/>
                                <rect x="1.16699" y="1.22223" width="118.333" height="30" rx="15" stroke="white"/>
                                <path d="M18.834 10.3889L33.834 10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M23.834 10.3889V8.72226C23.834 8.26203 24.2071 7.88893 24.6673 7.88893H28.0007C28.4609 7.88893 28.834 8.26203 28.834 8.72226V10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M20.501 10.3889V22.0556C20.501 22.9761 21.2472 23.7223 22.1676 23.7223H30.501C31.4215 23.7223 32.1676 22.9761 32.1676 22.0556V10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M23.001 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M26.334 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M29.667 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M41.646 10.3702L42.35 9.55423C43.23 9.98623 44.366 10.6902 44.926 11.1862L44.19 12.1302C43.646 11.6022 42.526 10.8502 41.646 10.3702ZM40.894 14.6262L41.582 13.7782C42.494 14.2262 43.678 14.9462 44.27 15.4742L43.55 16.4182C42.99 15.8902 41.822 15.1222 40.894 14.6262ZM41.39 23.0582C42.11 21.8102 43.134 19.6822 43.886 17.8422L44.846 18.5462C44.174 20.2582 43.246 22.2742 42.478 23.7782L41.39 23.0582ZM47.23 19.3302V20.5782H53.022V19.3302H47.23ZM47.23 18.4342H53.022V17.2502H47.23V18.4342ZM49.534 9.28223H50.718V10.5302H54.942V11.4582H50.718V12.4822H54.542V13.3622H50.718V14.4662H55.534V15.3942H44.83V14.4662H49.534V13.3622H45.822V12.4822H49.534V11.4582H45.438V10.5302H49.534V9.28223ZM46.11 16.3222H54.158V22.6582C54.158 23.2502 54.03 23.5702 53.582 23.7462C53.134 23.9382 52.414 23.9382 51.278 23.9382C51.214 23.6342 51.07 23.1862 50.926 22.8982C51.726 22.9302 52.494 22.9302 52.718 22.9142C52.942 22.8982 53.022 22.8342 53.022 22.6422V21.4902H47.23V23.9862H46.11V16.3222ZM65.358 14.1302L66.11 13.3302C67.694 14.1302 69.902 15.3302 71.038 16.0822L70.238 17.0102C69.166 16.2422 66.99 14.9782 65.358 14.1302ZM62.478 13.2822L63.31 14.0182C62.03 15.1382 60.27 16.3542 58.398 17.1542L57.694 16.1142C59.582 15.4422 61.246 14.3542 62.478 13.2822ZM57.566 22.3702H63.678V18.3222H59.246V17.2342H69.534V18.3222H64.942V22.3702H71.166V23.4582H57.566V22.3702ZM63.118 9.53823L64.366 9.18623C64.718 9.81023 65.134 10.6422 65.374 11.2342H71.15V14.4502H69.918V12.3382H58.734V14.8502H57.55V11.2342H63.902C63.678 10.6902 63.374 10.0502 63.118 9.53823ZM74.318 10.4182L75.15 9.68223C76.014 10.4182 77.134 11.4742 77.694 12.1462L76.814 12.9942C76.318 12.2902 75.198 11.2022 74.318 10.4182ZM75.534 23.6982C75.406 23.4422 75.07 22.9942 74.846 22.7862C75.134 22.5622 75.63 22.0182 75.63 21.2342V15.4742H73.07V14.3062H76.814V21.2502L78.478 20.1142C78.558 20.4342 78.734 20.9142 78.862 21.1542C76.206 23.0422 75.758 23.3782 75.534 23.6822V23.6982ZM79.038 10.4022H86.59V17.6342H85.39V16.8022H80.574V21.8262C80.574 22.4662 80.766 22.6102 81.79 22.6102C82.27 22.6102 84.702 22.6102 85.326 22.6102C86.318 22.6102 86.478 22.1942 86.558 19.9222C86.862 20.1462 87.374 20.3542 87.726 20.4342C87.55 23.0422 87.134 23.7622 85.39 23.7622C84.974 23.7622 82.11 23.7622 81.71 23.7622C79.918 23.7622 79.342 23.3782 79.342 21.8102V15.6502H85.39V11.6022H79.038V10.4022ZM90.478 17.6502L91.294 16.9142C92.302 17.4582 93.598 18.3062 94.238 18.9142L93.39 19.7462C92.782 19.1382 91.518 18.2262 90.478 17.6502ZM90.478 10.1782H100.334L100.542 10.1142L101.486 10.1782C101.454 11.7142 101.342 13.6822 101.198 15.3302H103.374V16.4022H96.926V16.8822C97.31 17.6982 97.806 18.4662 98.398 19.1382C99.39 18.4662 100.574 17.5222 101.294 16.8022L102.318 17.5542C101.358 18.3702 100.158 19.2662 99.134 19.8902C100.35 21.0102 101.854 21.8582 103.582 22.3222C103.326 22.5782 102.958 23.0422 102.798 23.3622C100.302 22.5782 98.302 21.0262 96.926 18.9462V22.7062C96.926 23.3942 96.766 23.6822 96.254 23.8582C95.758 24.0342 94.942 24.0342 93.694 24.0342C93.63 23.7302 93.438 23.2822 93.278 22.9782C94.222 23.0102 95.118 23.0102 95.374 22.9942C95.63 22.9782 95.71 22.9142 95.71 22.6902V20.4822C93.726 21.3622 91.63 22.2582 90.062 22.9302L89.422 21.8582C90.974 21.2662 93.39 20.2902 95.71 19.3302V16.4022H89.406V15.3302H99.95L100.046 13.8582H90.958V12.7542H100.11L100.174 11.2822H90.478V10.1782Z" fill="white"/>
                                
                            </svg>
                        </div>
                        </div>
                        <!-- 模拟下拉列表 -->
                        <div class = "dropdown-container history-dropdown">
                            <div class="star-container recorder-filter">
                                <div class="star history-filter" @click="toggleStar">
                                    <!-- 星级按钮 -->
                                    <span class="btn-span arrow-span">{{ filterStar }}</span>
                                    <div class="arrow"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M11 1.5556L6 5.72227L1 1.5556" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        </div>
                                </div>
                                        
                                <!-- 选择星级 -->
                                <div class="star-menu menu" v-show="isStarVisible">
                                    <span 
                                    v-for="star in stars" 
                                    :key="star" 
                                    @click="selectStar(star)"
                                    :class="{ active: selectedStar === star }"
                                    class="star-button"
                                    >
                                    
                                    {{ star }}
                                    </span>
                                </div>
                                
                            </div>
                            
                            <div class="role-container recorder-filter" >
                                <!-- 角色按钮 -->
                                <div class="role history-filter" @click="toggleHistoryRole">
                                    <span class="btn-span arrow-span">{{ selectedHistoryRole }}</span>
                                    <div class="arrow"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M11 1.5556L6 5.72227L1 1.5556" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        </div>
                                </div>
                                <!-- 选择角色 -->
                                <div class="role-menu menu" v-show="isHistoryRoleVisible">
                                    <span 
                                    v-for="role in roles" 
                                    :key="role" 
                                    @click="selectHistoryRole(role)"
                                    :class="{ active: selectedHistoryRole === role }"
                                    class="role-button"
                                    >
                                    {{ role }}
                                    </span>
                                </div>
                                
                            </div> 
                        </div>
                        <!-- 显示分页记录 -->
                        <div class="table-title" style="display: flex; 
                        color: white;margin: 1vw;">
                            <span class="border-span" >类型</span>
                            <span class="border-span" style="width: 32%;">名称</span>
                            <span class="border-span" style="width: 42%;border-right: none;">许愿时间</span>
                        </div>
                        <div v-for="(record, index) in paginatedResults" :key="index" class="record">
                            <span class="left-col">{{ record.star }} 星</span>
                            <span class="middle-col">{{ record.name }}</span>
                    
                            <span class="right-col">{{ record.time }}</span>
                        </div>

                        <!-- 分页导航 -->
                        <div class="pagination results-page"
                        style="justify-content: center;color: white;"
                        >
                            <button style="background-color: transparent;color: white;top: -8px;
    position: relative;" :disabled="currentResultPage === 1" @click="changeResultPage(currentResultPage - 1)" > < </button>
                            <span>  {{ currentResultPage }}  </span>
                            <button style="background-color: transparent;color: white;top: -8px;
    position: relative;" :disabled="currentResultPage === totalResultPages" @click="changeResultPage(currentResultPage + 1)" > > </button>
                        </div>
                        <div class="nav-bottom">
                            <div class="nav-container">
                                <span @click="selectedTab = 'wishing'" :class="{'active': selectedTab === 'wishing'}" class="nav-btn">许愿</span>
                                <span @click="selectedTab = 'wish-record'" :class="{'active': selectedTab === 'wish-record'}" class="nav-btn">许愿记录</span>
                                <span @click="selectedTab = 'history'" :class="{'active': selectedTab === 'history'}" class="nav-btn">历史记录</span>
                            </div>
                        </div> 
                    </div>
                    <!-- 历史记录界面 -->
                    <div v-if="selectedTab === 'history'" class="history-container" :style="{ background: 'rgba(122, 119, 125, 0.6)', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', width: '100%', aspectRatio: '1 / 1.8', position: 'relative' }">
                        <div class="line">
                        <div class="sub-title" style="margin-left: -6px;">
                            <p class="title-text history-text" >历史记录</p>
                        </div>
                        <div class="delet-btn" @click="clearDrawHistory">
                            <svg width="100%" height="30px" viewBox="0 0 120 32" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG 内容 -->
                                <rect x="1.16699" y="1.22223" width="118.333" height="30" rx="15" fill="#33313D"/>
                                <rect x="1.16699" y="1.22223" width="118.333" height="30" rx="15" stroke="white"/>
                                <path d="M18.834 10.3889L33.834 10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M23.834 10.3889V8.72226C23.834 8.26203 24.2071 7.88893 24.6673 7.88893H28.0007C28.4609 7.88893 28.834 8.26203 28.834 8.72226V10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M20.501 10.3889V22.0556C20.501 22.9761 21.2472 23.7223 22.1676 23.7223H30.501C31.4215 23.7223 32.1676 22.9761 32.1676 22.0556V10.3889" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M23.001 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M26.334 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M29.667 14.5556V19.5556" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
                                <path d="M41.646 10.3702L42.35 9.55423C43.23 9.98623 44.366 10.6902 44.926 11.1862L44.19 12.1302C43.646 11.6022 42.526 10.8502 41.646 10.3702ZM40.894 14.6262L41.582 13.7782C42.494 14.2262 43.678 14.9462 44.27 15.4742L43.55 16.4182C42.99 15.8902 41.822 15.1222 40.894 14.6262ZM41.39 23.0582C42.11 21.8102 43.134 19.6822 43.886 17.8422L44.846 18.5462C44.174 20.2582 43.246 22.2742 42.478 23.7782L41.39 23.0582ZM47.23 19.3302V20.5782H53.022V19.3302H47.23ZM47.23 18.4342H53.022V17.2502H47.23V18.4342ZM49.534 9.28223H50.718V10.5302H54.942V11.4582H50.718V12.4822H54.542V13.3622H50.718V14.4662H55.534V15.3942H44.83V14.4662H49.534V13.3622H45.822V12.4822H49.534V11.4582H45.438V10.5302H49.534V9.28223ZM46.11 16.3222H54.158V22.6582C54.158 23.2502 54.03 23.5702 53.582 23.7462C53.134 23.9382 52.414 23.9382 51.278 23.9382C51.214 23.6342 51.07 23.1862 50.926 22.8982C51.726 22.9302 52.494 22.9302 52.718 22.9142C52.942 22.8982 53.022 22.8342 53.022 22.6422V21.4902H47.23V23.9862H46.11V16.3222ZM65.358 14.1302L66.11 13.3302C67.694 14.1302 69.902 15.3302 71.038 16.0822L70.238 17.0102C69.166 16.2422 66.99 14.9782 65.358 14.1302ZM62.478 13.2822L63.31 14.0182C62.03 15.1382 60.27 16.3542 58.398 17.1542L57.694 16.1142C59.582 15.4422 61.246 14.3542 62.478 13.2822ZM57.566 22.3702H63.678V18.3222H59.246V17.2342H69.534V18.3222H64.942V22.3702H71.166V23.4582H57.566V22.3702ZM63.118 9.53823L64.366 9.18623C64.718 9.81023 65.134 10.6422 65.374 11.2342H71.15V14.4502H69.918V12.3382H58.734V14.8502H57.55V11.2342H63.902C63.678 10.6902 63.374 10.0502 63.118 9.53823ZM74.318 10.4182L75.15 9.68223C76.014 10.4182 77.134 11.4742 77.694 12.1462L76.814 12.9942C76.318 12.2902 75.198 11.2022 74.318 10.4182ZM75.534 23.6982C75.406 23.4422 75.07 22.9942 74.846 22.7862C75.134 22.5622 75.63 22.0182 75.63 21.2342V15.4742H73.07V14.3062H76.814V21.2502L78.478 20.1142C78.558 20.4342 78.734 20.9142 78.862 21.1542C76.206 23.0422 75.758 23.3782 75.534 23.6822V23.6982ZM79.038 10.4022H86.59V17.6342H85.39V16.8022H80.574V21.8262C80.574 22.4662 80.766 22.6102 81.79 22.6102C82.27 22.6102 84.702 22.6102 85.326 22.6102C86.318 22.6102 86.478 22.1942 86.558 19.9222C86.862 20.1462 87.374 20.3542 87.726 20.4342C87.55 23.0422 87.134 23.7622 85.39 23.7622C84.974 23.7622 82.11 23.7622 81.71 23.7622C79.918 23.7622 79.342 23.3782 79.342 21.8102V15.6502H85.39V11.6022H79.038V10.4022ZM90.478 17.6502L91.294 16.9142C92.302 17.4582 93.598 18.3062 94.238 18.9142L93.39 19.7462C92.782 19.1382 91.518 18.2262 90.478 17.6502ZM90.478 10.1782H100.334L100.542 10.1142L101.486 10.1782C101.454 11.7142 101.342 13.6822 101.198 15.3302H103.374V16.4022H96.926V16.8822C97.31 17.6982 97.806 18.4662 98.398 19.1382C99.39 18.4662 100.574 17.5222 101.294 16.8022L102.318 17.5542C101.358 18.3702 100.158 19.2662 99.134 19.8902C100.35 21.0102 101.854 21.8582 103.582 22.3222C103.326 22.5782 102.958 23.0422 102.798 23.3622C100.302 22.5782 98.302 21.0262 96.926 18.9462V22.7062C96.926 23.3942 96.766 23.6822 96.254 23.8582C95.758 24.0342 94.942 24.0342 93.694 24.0342C93.63 23.7302 93.438 23.2822 93.278 22.9782C94.222 23.0102 95.118 23.0102 95.374 22.9942C95.63 22.9782 95.71 22.9142 95.71 22.6902V20.4822C93.726 21.3622 91.63 22.2582 90.062 22.9302L89.422 21.8582C90.974 21.2662 93.39 20.2902 95.71 19.3302V16.4022H89.406V15.3302H99.95L100.046 13.8582H90.958V12.7542H100.11L100.174 11.2822H90.478V10.1782Z" fill="white"/>
                                
                            </svg>
                        </div>
                        </div>
                        <div style="margin-left: 10px;">
                            <span class="text-span">累计许愿次数: {{ totalWishes }}</span>
                            <p>获得UP五星: {{ upFiveStarCount }}</p>
                            <p>获得常驻五星: {{ permanentFiveStarCount }}</p>
                            <p>触发大保底次数: {{ bigGuaranteeCount }}</p>
                            <p>十连双金次数: {{ doubleGoldCount }}</p>
                        </div>
                        <div class="historyBox">
                    <div class="tab-container" ref="hisTab">
                        <!-- 筛选类别按钮 -->
                        <div class="text">
                                <!-- 选择角色 -->
                          <button v-for="role in roles" :key="role" @click="selectHistoryRole(role)":class="{ active: selectedHistoryRole === role }"class="hisTab tab">{{ role }}</button>
                        </div>              
                    </div>
                        <div class="hisButton-container" :style="{height:`calc(100% - ${tabHeight}px)`}">
                            <div v-for="(memory, index) in historyResult" 
                                 :key="index" 
                                 class="img-container">
                                <button                         
                                    class="square-button" 
                                    :style="{backgroundImage: `url(${memory.path})`}">
                                </button>
                                <span class="memory-name history-name">{{ memory.role }} · {{ memory.name }}<br> {{memory.count}}张</span>
                            </div>
                        </div>
                        </div>
                        <!-- 历史记录相关内容 -->
                        <div class="nav-bottom">
                            <div class="nav-container">
                                <span @click="selectedTab = 'wishing'" :class="{'active': selectedTab === 'wishing'}" class="nav-btn">许愿</span>
                                <span @click="selectedTab = 'wish-record'" :class="{'active': selectedTab === 'wish-record'}" class="nav-btn">许愿记录</span>
                                <span @click="selectedTab = 'history'" :class="{'active': selectedTab === 'history'}" class="nav-btn">历史记录</span>
                            </div>
                        </div> 
                    </div>
                               
                </div>
            </div>
        </div>
       
        <script>
         // Xorshift 随机数生成器
         class Xorshift {
            constructor(seed) {
                this.state = seed || new Date().getTime(); // 使用当前时间作为种子
            }

            next() {
                let x = this.state;
                x ^= x << 13;
                x ^= x >> 17;
                x ^= x << 5;
                this.state = x;
                return (x >>> 0) / 0xFFFFFFFF; // 返回0到1之间的随机数
            }
        };  
            const { createApp, ref, computed } = Vue;
            createApp({
                data() {
                    return {
                        selectedTab: 'wishing', 
                        tabHeight:0,
                        isHistoryRoleVisible:false,
                        stars:['全部星级','五星','四星','三星'],
                        selectedStar:'全部星级',
                        filterStar:'全部星级',
                        selectedHistoryRole:'全部角色',
                        isStarVisible:false,
                        pool: {
                            fiveStar: [], // 5星卡池
                            fourStar: [], // 4星卡池
                            threeStar: [] // 3星卡池
                        },
                        showModal:false,
                        results: [], // 抽卡结果
                        filteredResults: [], // 存储筛选后的抽卡记录
                        totalWishes: 0, // 总的许愿次数
                        hitUpFive :true,//是否命中了定向卡
                        noUpFiveStarStreak:0,//连续未获得限定卡的次数
                        noFiveStarStreak: 0, // 连续未获得五星次数
                        noFourStarStreak: 0, // 连续未获得四星次数
                        fiveStarProbability: 0.01, // 初始五星概率
                        fourStarProbability: 0.07, // 初始四星概率
                        inputFour:7,
                        inputFive:1,
                        rng: new Xorshift(new Date().getTime()) ,// 使用当前时间作为种子
                        commonEvent: {
                            "name": "极空回响",
                            "position": "",
                            "category": "其他",
                            "time": "",
                            "banner": "https://patchwiki.biligame.com/images/lysk/1/12/5s1hismm29c1xx2ro4hipqt0fpnzr5b.png",
                            "memory": {"name": "", "role": "", "path": ""}
                        },
                        activities:[] ,
                        events: [],
                        showUp: false,
                        selectedActivity: {
                            "name": "极空回响",
                            "position": "",
                            "category": "其他",
                            "time": "",
                            "banner": "https://patchwiki.biligame.com/images/lysk/1/12/5s1hismm29c1xx2ro4hipqt0fpnzr5b.png",
                            "memory": {"name": "", "role": "", "path": ""}
                        },
                        upMemories: [],
                        selectedUpMemory:[],
                        selectedUpMemories: [], // 已选择的自选卡
                        highlightedMemory:[],
                        isSelfSelecting: false, // 是否在自选模式
                        isDirectionalSelecting: false, // 是否在定向模式
                        availableMemories: [], // 当前可选的卡片列表（自选或定向）
                        defaultImageUrl: "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(347.93deg, #3B4165 0%, #111129 32.72%, #111129 73.58%, #3A3E65 100%)",
                        backgroundImageUrl: "",
                        selectedCategory: '单人池',
                        selectedRole: '全部角色',
                        filteredActivities: [],
                        selectedPosition: '全部',
                        currentPage: 1,
                        pageSize: 7,
                        resultPageSize:15,
                        currentResultPage:1,
                        selectedPermanentFiveStars: [], 
                        positions: [
                            { name: '全部', icons: ['https://patchwiki.biligame.com/images/lysk/c/c7/0xv7x9ke8mlo54vea7crstqt9qqachq.png', 'https://patchwiki.biligame.com/images/lysk/2/28/h8lc4lbyd9ihxbz4enbovu6zyzitw2m.png']}, 
                            { name: '日冕', icons: ['https://patchwiki.biligame.com/images/lysk/c/c7/0xv7x9ke8mlo54vea7crstqt9qqachq.png'] },
                            { name: '月晖', icons: ['https://patchwiki.biligame.com/images/lysk/2/28/h8lc4lbyd9ihxbz4enbovu6zyzitw2m.png'] }
                        ],
                        roles: ['全部角色', '沈星回', '黎深', '祁煜', '秦彻', '夏以昼'],
                        isPositionVisible: false,
                        isRoleVisible: false,
                        memories: [],
                        currentDraw: [],
                        loading: true,// 添加 loading 状态
                        animationPlaying: false,
                        showResult: false, // 控制是否显示抽卡结果
                        frameIndex: 1,
                        totalFrames: 190,
                        frameInterval: 70,
                        upFiveStarCount: 0, // 获得限定五星的次数
                        permanentFiveStarCount: 0, // 获得常驻五星的次数
                        bigGuaranteeCount: 0, // 触发大保底的次数
                        doubleGoldCount: 0, // 十连双金的次数
                        currentTenDrawFiveStarCount: 0, // 当前十连抽中的五星数量
        
                        imgUrl :[
    "https://patchwiki.biligame.com/images/lysk/e/e7/n2wmfh64f3ofsat0sjuxgx8ac5j50bb.png",
    "https://patchwiki.biligame.com/images/lysk/f/f7/r5oczt1bblvd74wy43b46o3lwivosqn.png",
    "https://patchwiki.biligame.com/images/lysk/1/1e/rmg6nfwp61wx3maq1qs5ezdf3c7kgrr.png",
    "https://patchwiki.biligame.com/images/lysk/4/4f/pa7qlmdwkbt86oo1phhlqg6cluju2n6.png",
    "https://patchwiki.biligame.com/images/lysk/5/55/qmj8mymkisvq12zyx26h2kzbtw8p8qi.png",
    "https://patchwiki.biligame.com/images/lysk/a/a0/hnzok7avcuat0meaw463g81gussntyu.png",
    "https://patchwiki.biligame.com/images/lysk/2/23/q490s1x9tm3k25sg5d7cwzrd20kihbi.png",
    "https://patchwiki.biligame.com/images/lysk/4/42/6bcmlcw0ymtg4vb7eq25lf29zzopxj3.png",
    "https://patchwiki.biligame.com/images/lysk/8/80/tsn9k4pw1e2x2jg3g0f8v4fwcvhv02l.png",
    "https://patchwiki.biligame.com/images/lysk/4/40/3sffsf98u4may0mthflz5s7shmxx3gw.png",
    "https://patchwiki.biligame.com/images/lysk/b/b4/6phy5pwe747ggmpomqqy451yqpzlzft.png",
    "https://patchwiki.biligame.com/images/lysk/3/33/17ln8q64oqfzzompdcf9axr5siro451.png",
    "https://patchwiki.biligame.com/images/lysk/1/1c/qgg2x0rv83jf7kuttmy2ifoinz037qd.png",
    "https://patchwiki.biligame.com/images/lysk/1/19/44u7sqt6bgkvru8gd9w841xlp422dky.png",
    "https://patchwiki.biligame.com/images/lysk/6/62/g4k74ga3fbzzm06apr2q05kt76dnhfv.png",
    "https://patchwiki.biligame.com/images/lysk/e/e1/a6oj1kesnbvei5pghbha55m07pxp6ip.png",
    "https://patchwiki.biligame.com/images/lysk/9/96/kc9aoopq7y80u3dvvj49c9ao5w08pth.png",
    "https://patchwiki.biligame.com/images/lysk/c/ca/bjf10m5f2t780g6p8px7omejlhf5e2u.png",
    "https://patchwiki.biligame.com/images/lysk/6/63/ozfazb1u5feqmi7u8izp2ll95wyn8wk.png",
    "https://patchwiki.biligame.com/images/lysk/d/d5/fa82zqkgwfj9ohyj7kasrby3yo5lh5t.png",
    "https://patchwiki.biligame.com/images/lysk/4/49/o7bvon2fv6jd6vx1thgpmewuweyz58r.png",
    "https://patchwiki.biligame.com/images/lysk/1/17/mrxbtm5xqht7nd66kx9qv5cquqkz2mo.png",
    "https://patchwiki.biligame.com/images/lysk/6/61/17q6yey6fihjlg8q59afejwia5fnng9.png",
    "https://patchwiki.biligame.com/images/lysk/f/f9/rnt3astwz1mf7m5cog3gxcgkxr3qfyc.png",
    "https://patchwiki.biligame.com/images/lysk/6/62/i2lrsvqf4dwc4lj2wfb44m9xmyfye8u.png",
    "https://patchwiki.biligame.com/images/lysk/3/33/0c90kwxj9z77w336d9z4mler3gxywt4.png",
    "https://patchwiki.biligame.com/images/lysk/3/3a/dvz3y7vu7nhul1l2gf0bxtrbzf8dlvm.png",
    "https://patchwiki.biligame.com/images/lysk/0/01/t20bia3n1zwq0t1cfrn18298gdbm6ky.png",
    "https://patchwiki.biligame.com/images/lysk/d/d7/6wznq27bomjy37p8oqnpnvc19uge6uv.png",
    "https://patchwiki.biligame.com/images/lysk/8/80/pa0wdtvqz7wwdn6a5776mtkr03ce3ry.png",
    "https://patchwiki.biligame.com/images/lysk/9/9b/1wcnycpf6y1izbviozklw1t0386zng1.png",
    "https://patchwiki.biligame.com/images/lysk/3/3e/cqs0anufd295fn40ym6gkwr9lrqphop.png",
    "https://patchwiki.biligame.com/images/lysk/9/92/6w9xfbehdn3h06bxe2zu9ehis4xewno.png",
    "https://patchwiki.biligame.com/images/lysk/2/24/92x4medazds39ojkai23b59cnoov4jz.png",
    "https://patchwiki.biligame.com/images/lysk/4/4e/09sxm6xh1d1efhs5v8v18844bk52ded.png",
    "https://patchwiki.biligame.com/images/lysk/1/17/elgs7jh756wafiribbedt7sn91jl5fy.png",
    "https://patchwiki.biligame.com/images/lysk/7/77/00339upt9nfz6qdm99btkvsu0cpcrb4.png",
    "https://patchwiki.biligame.com/images/lysk/8/8c/ef3biv97uhh2hqca0og3smd25ku1lil.png",
    "https://patchwiki.biligame.com/images/lysk/1/14/aqpqfp8q1mqhup47y2d7o1ik0uezj41.png",
    "https://patchwiki.biligame.com/images/lysk/7/7e/gb4v42235gmb9zvkhrqyjxlx0mx13zh.png",
    "https://patchwiki.biligame.com/images/lysk/0/0c/p3c0d94qwr64il23azyd1s6wzij7p6y.png",
    "https://patchwiki.biligame.com/images/lysk/0/01/3lvb7zr85xvkdne1wxthtqkws5cknaj.png",
    "https://patchwiki.biligame.com/images/lysk/3/3c/d8nua20shocfg0tddfsh3u4zvmtvsmi.png",
    "https://patchwiki.biligame.com/images/lysk/9/9c/s9evj9ev1pnki3oqfj8e9un2mx0s2hw.png",
    "https://patchwiki.biligame.com/images/lysk/f/f0/iydtc8g15eeaya2uh753ybpx01ewbuj.png",
    "https://patchwiki.biligame.com/images/lysk/c/c8/0scnek2z23k289xycxh3m360dkp40ql.png",
    "https://patchwiki.biligame.com/images/lysk/6/67/aloeu1y42o1unw2cfx5n1gfzn3zgbsf.png",
    "https://patchwiki.biligame.com/images/lysk/c/cc/rl8hopcrhn1i9hik83iker0uabhsfkm.png",
    "https://patchwiki.biligame.com/images/lysk/2/28/0q5eax1em7pijcpex7hk29tu4o44ftm.png",
    "https://patchwiki.biligame.com/images/lysk/d/dd/roql0hwoakq57zve4lcjqh7wghs1wj5.png",
    "https://patchwiki.biligame.com/images/lysk/b/bc/572d1opl7gdn0m6bpsrwai93iq1czut.png",
    "https://patchwiki.biligame.com/images/lysk/1/10/d5f9fkihl2sea4eoya8w455gty216s8.png",
    "https://patchwiki.biligame.com/images/lysk/c/c0/ki46xaops8hrng2xw0y9z2122g6lgeg.png",
    "https://patchwiki.biligame.com/images/lysk/8/8b/00g7fj884rkxgwczofkswcfc0gyb7x8.png",
    "https://patchwiki.biligame.com/images/lysk/0/02/08r8jf7nkqpvok7dregdul9a1dqawxq.png",
    "https://patchwiki.biligame.com/images/lysk/9/9e/eyt8s063o33l9n9rtphb1xfpjufqm2w.png",
    "https://patchwiki.biligame.com/images/lysk/c/c0/kuiqd1occxpe4jhf253uxtr9516h5am.png",
    "https://patchwiki.biligame.com/images/lysk/e/e7/7qgxlysek1nphnysfntdw9ziq7gqce3.png",
    "https://patchwiki.biligame.com/images/lysk/b/be/bjy6k0cqv7t4bvp1tvpy523p8mr02vz.png",
    "https://patchwiki.biligame.com/images/lysk/2/2b/pcn2vzmab9pjeg6cihxj9bc697yv8e3.png",
    "https://patchwiki.biligame.com/images/lysk/8/8d/0446g80cnvm9gw2jkw8yikcjmzehoo0.png",
    "https://patchwiki.biligame.com/images/lysk/1/11/svkt49ucqjylzn5j6so3dyipne6rydq.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/qen4ts3eu7cmzgtrc9ipxcbksu06iqq.png",
    "https://patchwiki.biligame.com/images/lysk/1/18/3arla1axakwz83c63j28meiy1e1ij9i.png",
    "https://patchwiki.biligame.com/images/lysk/4/4e/bxcnqoiu5n302jiltykkdyyjahgpkhq.png",
    "https://patchwiki.biligame.com/images/lysk/7/72/43hqn9rqze3hkofomau48e8pcoe1kqe.png",
    "https://patchwiki.biligame.com/images/lysk/6/69/nl6ibjwulkgkmkdrentuyrdrxgccegz.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/n807qpyfd4xwq40w0db8carnpoon6ak.png",
    "https://patchwiki.biligame.com/images/lysk/9/96/ooikwh990kvfgonfq4md5p06uyrwmus.png",
    "https://patchwiki.biligame.com/images/lysk/3/3c/4uhmizbjh31ubytjx5b89c3szny0wkh.png",
    "https://patchwiki.biligame.com/images/lysk/f/f3/nlxlbxkq3ihpxavqx3tykshlmcv5zvk.png",
    "https://patchwiki.biligame.com/images/lysk/3/33/a1jdq8ak11jde435xkterfcakdqmwee.png",
    "https://patchwiki.biligame.com/images/lysk/d/df/ml82stvoho40vj6ahrj9a5cbk7i6vfc.png",
    "https://patchwiki.biligame.com/images/lysk/d/d2/fw0gyoizcb2ukhglxz0w3mhlh0pxlaf.png",
    "https://patchwiki.biligame.com/images/lysk/7/7a/hnw8bhiob2ci4l57hzfqxs4qsod7kru.png",
    "https://patchwiki.biligame.com/images/lysk/d/d2/b0ia25aehna1rtnnr6dzxigo6jbvu6a.png",
    "https://patchwiki.biligame.com/images/lysk/a/ad/rw4s4zrx4esv6wl5x66yf1vli7r21p7.png",
    "https://patchwiki.biligame.com/images/lysk/d/d4/qnes3zqs6wonkfh6tpetcgz6b8noxl9.png",
    "https://patchwiki.biligame.com/images/lysk/d/da/kutm5gqfi470ak0uxsncfuakp2dmnmd.png",
    "https://patchwiki.biligame.com/images/lysk/e/eb/ixg6jp79c06u8qbrwkv81y3u83tity8.png",
    "https://patchwiki.biligame.com/images/lysk/7/78/be3v9gh88q5eyegyg5obgrmaum3atqp.png",
    "https://patchwiki.biligame.com/images/lysk/8/8c/qbowar9lpganb17wex5au2nacnf8mjl.png",
    "https://patchwiki.biligame.com/images/lysk/d/dd/ahiavp9m7ss2v95u0lrrf7e0bjhw6nd.png",
    "https://patchwiki.biligame.com/images/lysk/1/15/68wfl06un25uzc411pnpe5e7o0bbvvw.png",
    "https://patchwiki.biligame.com/images/lysk/1/1e/ctl7ygu61y6c2kjvevvtrn82d80a5ql.png",
    "https://patchwiki.biligame.com/images/lysk/c/c1/9ik4v8sljwp016sf7fe2axt1bswpd9q.png",
    "https://patchwiki.biligame.com/images/lysk/1/12/ptejwnx08pmo418dwj719j7ryostkdf.png",
    "https://patchwiki.biligame.com/images/lysk/1/12/q8as61j78zoeqmlejwrcqwf8jz9vfqz.png",
    "https://patchwiki.biligame.com/images/lysk/c/ca/soqclg3vm9yp1thh566u9pioqeweur5.png",
    "https://patchwiki.biligame.com/images/lysk/b/be/bgizjpn3gvytglk9bzfqg9g6sfn4yge.png",
    "https://patchwiki.biligame.com/images/lysk/9/97/lo4ln3t3xo59rra48331ku25l6t0ayl.png",
    "https://patchwiki.biligame.com/images/lysk/b/b9/s27o86eei5f242cc8ytzcm6degqiq5g.png",
    "https://patchwiki.biligame.com/images/lysk/2/2f/cb59c2yaaygyak6b47i5a1w4bplebpx.png",
    "https://patchwiki.biligame.com/images/lysk/6/63/eo6gmhfjb7ibhis5k8wwicyvp3ohrbr.png",
    "https://patchwiki.biligame.com/images/lysk/4/42/k8ccbwn4r2w37uzzrssy76ajtpf7dru.png",
    "https://patchwiki.biligame.com/images/lysk/2/2a/iveezxzh8szvsp3jm3752z5a0nd88kg.png",
    "https://patchwiki.biligame.com/images/lysk/b/b9/95zx05669464qsr44tercs7ekstyhkm.png",
    "https://patchwiki.biligame.com/images/lysk/0/0b/gff510vjupn209x94n2mr4iz66hvrum.png",
    "https://patchwiki.biligame.com/images/lysk/0/0b/io2quuiesfl7so39vyplcy2cw6ucdkf.png",
    "https://patchwiki.biligame.com/images/lysk/e/e3/jywknd28z6hnyzewa2lsw7qq023nee4.png",
    "https://patchwiki.biligame.com/images/lysk/e/e8/t35s9ce5cjovv4xyru3afiw59vmfpzk.png",
    "https://patchwiki.biligame.com/images/lysk/0/0a/fpch8q1pgz5uxo0cawnkxy6ykf3lqo3.png",
    "https://patchwiki.biligame.com/images/lysk/5/5e/e02iariv7sbytn5vdq3j1pdh3pn4m9b.png",
    "https://patchwiki.biligame.com/images/lysk/6/65/f8w0ncjykhde9od93ed5xooncm1istv.png",
    "https://patchwiki.biligame.com/images/lysk/9/90/ojg0ra5wccwjd0ques81fjswbgw6t1l.png",
    "https://patchwiki.biligame.com/images/lysk/f/fa/82wvw432o8t8yxwva9stjsb0vdn92uv.png",
    "https://patchwiki.biligame.com/images/lysk/0/03/5idcok0k504zcwfccz21j2hyuzu1u4b.png",
    "https://patchwiki.biligame.com/images/lysk/b/b2/iwdk3dwljkst5zp87cqumn1kiwi71kk.png",
    "https://patchwiki.biligame.com/images/lysk/8/89/heq18bxe82ycberkzg1fkol2eae0onn.png",
    "https://patchwiki.biligame.com/images/lysk/c/c6/af6j2yzuwi2txoint6q86z06pz5ybtq.png",
    "https://patchwiki.biligame.com/images/lysk/e/ef/5uw7p4isphba73hyw5jmfxhp0vhjzrl.png",
    "https://patchwiki.biligame.com/images/lysk/0/0f/jp529p30cf1im3arhy0bld3sa92fy3n.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/2avda5mjtx59apmxrme9kx2nwl222m2.png",
    "https://patchwiki.biligame.com/images/lysk/5/59/km9245n34nzt9noia61328x49fegj94.png",
    "https://patchwiki.biligame.com/images/lysk/c/ca/dqx4dv2ahq87x58qeoyxt8tc067zk9z.png",
    "https://patchwiki.biligame.com/images/lysk/f/f7/c0zv8jnney7ghjtk9jvvv5b9kw3h9vs.png",
    "https://patchwiki.biligame.com/images/lysk/7/7b/07lz6tiyr8ny9sxpe787r43qy8cy6mn.png",
    "https://patchwiki.biligame.com/images/lysk/7/70/7mr9u8lyle1efb61ub32dcchp125y7r.png",
    "https://patchwiki.biligame.com/images/lysk/9/9e/t3p6377v4jvly5b8jsgew1cekae6e8i.png",
    "https://patchwiki.biligame.com/images/lysk/8/8c/bjn9ojqcmm5ha5bke346i09r1m91lev.png",
    "https://patchwiki.biligame.com/images/lysk/5/53/jmf5bw3gup09v5igyn66uqz88f4pkfr.png",
    "https://patchwiki.biligame.com/images/lysk/d/d5/mkpj02th2rqbumqwe1geb9puj61c0as.png",
    "https://patchwiki.biligame.com/images/lysk/8/8c/dcrw18ccxc9qjhphcka5qyqnjybaqc0.png",
    "https://patchwiki.biligame.com/images/lysk/f/fe/q4qd2p1v179kdh9ard5a5l1qyh5u7qz.png",
    "https://patchwiki.biligame.com/images/lysk/0/08/r7a4c3kt9rcq1kg29hi9c2z28cu3fe0.png",
    "https://patchwiki.biligame.com/images/lysk/8/83/ko3ok68kz2wpr15pvts4xl8eoep2udr.png",
    "https://patchwiki.biligame.com/images/lysk/d/d4/empt7oyj1n20wlhw0oq2lhkh856gjdn.png",
    "https://patchwiki.biligame.com/images/lysk/e/e3/o83q6u04moqxkcexfoyh77xjjppnawr.png",
    "https://patchwiki.biligame.com/images/lysk/f/f2/jcmrfldg9w1gdc1qyypgyc1ruwr4996.png",
    "https://patchwiki.biligame.com/images/lysk/3/36/hmmv2lwf7k1arwhjbq4jcs1dfesjg8e.png",
    "https://patchwiki.biligame.com/images/lysk/b/b3/sh64vvxt9yn6c1pjq28rlbjmlo39lr7.png",
    "https://patchwiki.biligame.com/images/lysk/b/b1/4f9y1sn4be61qrdu075zl8fa18amvu2.png",
    "https://patchwiki.biligame.com/images/lysk/b/bb/d9rqgv589l9h8b1u6nba7wusa6vbokh.png",
    "https://patchwiki.biligame.com/images/lysk/6/6e/o7vrzlyg95b0snkx8x9yfbh0cwklup9.png",
    "https://patchwiki.biligame.com/images/lysk/2/22/4pbqqaxf1rakp9mponla7gjuhwojjfn.png",
    "https://patchwiki.biligame.com/images/lysk/7/72/j7cxrp94xdcy3apt8jtnqguz751tf83.png",
    "https://patchwiki.biligame.com/images/lysk/2/29/j2yx9a4dit7roonwjsqufugfng578da.png",
    "https://patchwiki.biligame.com/images/lysk/7/72/hmmbvinxib03ihxe1n34bc4cydg2uv1.png",
    "https://patchwiki.biligame.com/images/lysk/b/b3/pz2rmvi5rc37icout0z8a5kl36v26ct.png",
    "https://patchwiki.biligame.com/images/lysk/2/26/lumqy9745etvlxbn7m0q7rhn5m3tit1.png",
    "https://patchwiki.biligame.com/images/lysk/2/23/6n8epxns1xaagaqgw64rcdqvcqcoh5y.png",
    "https://patchwiki.biligame.com/images/lysk/e/ea/by84njda53pagz9q3sxdz3q1l5foowo.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/rcgse9q5mj5q8fkk6lkgkmg78gpr4al.png",
    "https://patchwiki.biligame.com/images/lysk/f/f7/1cv87osujm2f5ukv6i5gcqf36bobi37.png",
    "https://patchwiki.biligame.com/images/lysk/d/d7/qbpa237eg3lmx2iiopv04348wp7a6yn.png",
    "https://patchwiki.biligame.com/images/lysk/8/84/dvyir5q43iumq35h57pn5t4yjvx1w9v.png",
    "https://patchwiki.biligame.com/images/lysk/5/5f/4e1ilfq7iguuk4bb1x84f18u0y3gpft.png",
    "https://patchwiki.biligame.com/images/lysk/c/cf/1fmqb29ar3n4mae74hoprj6wt28jw18.png",
    "https://patchwiki.biligame.com/images/lysk/b/bb/2ofrhqq4jf85db6iz06daue68rpl0tu.png",
    "https://patchwiki.biligame.com/images/lysk/0/01/cxi4bp7f26h2a2u0f5jgisoi9bjivpg.png",
    "https://patchwiki.biligame.com/images/lysk/0/0a/dzb5ooqfwjwu3gk77bfqzq5pchxy87i.png",
    "https://patchwiki.biligame.com/images/lysk/5/5b/aq2in7q9ab6f6ns4v4ly80cub73lr4x.png",
    "https://patchwiki.biligame.com/images/lysk/a/a3/glxkdogx01boicws2nhrlj0a7as38ol.png",
    "https://patchwiki.biligame.com/images/lysk/5/5d/8vtiu74su6rcrhpvd97tbci16t6fq1d.png",
    "https://patchwiki.biligame.com/images/lysk/7/7d/ey8hyyn3f7b4q61yfh9gjyjelafbh38.png",
    "https://patchwiki.biligame.com/images/lysk/1/1d/lgoc1kcndooyocjsyoa2cm7osxav438.png",
    "https://patchwiki.biligame.com/images/lysk/e/eb/gtj2cnijdf3gdcdpg90x4p2eadhjmqb.png",
    "https://patchwiki.biligame.com/images/lysk/e/e8/cl3pxx1uysligs5szbnb7xz154z9zdj.png",
    "https://patchwiki.biligame.com/images/lysk/2/2b/dfa8t2eqrrx3g94sqota2o3afsfw451.png",
    "https://patchwiki.biligame.com/images/lysk/d/d4/rulrlb024sas84jcfpl53z0gmqxuwsf.png",
    "https://patchwiki.biligame.com/images/lysk/6/69/hx6t1dtdt8bsrvyqpqa0xyn4yawn65f.png",
    "https://patchwiki.biligame.com/images/lysk/9/9f/g8nu1miypynokztywvzk8715dzf0362.png",
    "https://patchwiki.biligame.com/images/lysk/e/ef/7injpu8iizfsn03l7zb2ms5n0ilhy7z.png",
    "https://patchwiki.biligame.com/images/lysk/c/cb/b60tezot9601t8q4qlvv2q90dlkwq6m.png",
    "https://patchwiki.biligame.com/images/lysk/0/0d/3j3fl6ty6n716nv8sgiaa9v5951a40d.png",
    "https://patchwiki.biligame.com/images/lysk/f/f8/ldh55d0uy7r23ydhinoabgl4a4v50vd.png",
    "https://patchwiki.biligame.com/images/lysk/2/28/9lj5lvljngjr6n8741nrhaoe09itc7p.png",
    "https://patchwiki.biligame.com/images/lysk/8/87/9948z1pvj5zd7cvef5ksrkdbl7gx8c2.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/60wvvzgwsbdv12txayfzgvst0whe2wu.png",
    "https://patchwiki.biligame.com/images/lysk/4/4d/rtn8mosudbc8wa8w7pxxxluw4ezo90y.png",
    "https://patchwiki.biligame.com/images/lysk/6/6b/1h2mi80y725qve3duuq4njeg4j0vm7t.png",
    "https://patchwiki.biligame.com/images/lysk/3/35/2bcr430o27n6p7y2zvhpxoibcb760yz.png",
    "https://patchwiki.biligame.com/images/lysk/9/9e/tbp8uscvghpiclqvmegoc6ymqpafmo4.png",
    "https://patchwiki.biligame.com/images/lysk/8/8e/gv9n2as5x2b5zltk9mupynsav3ae7dd.png",
    "https://patchwiki.biligame.com/images/lysk/2/26/2noiw73gqfrpa7am5y58sai91v5tjr3.png",
    "https://patchwiki.biligame.com/images/lysk/e/ea/gl6c7dqcivdydvyvtwdelbuime26em6.png",
    "https://patchwiki.biligame.com/images/lysk/d/dd/th3aepg89ks4j20tk4gtvtyt6u9d9xa.png",
    "https://patchwiki.biligame.com/images/lysk/6/65/3lx5wi5nhkuwmbzc8hw7eda5h1mzlhp.png",
    "https://patchwiki.biligame.com/images/lysk/d/d9/0b261onc2gct035vem90mh6oqa1rz7q.png",
    "https://patchwiki.biligame.com/images/lysk/d/db/n7sgk5583wkhhvna9cso57d5ok31j67.png",
    "https://patchwiki.biligame.com/images/lysk/9/94/dspc7erzw37uiqaqrrp11uh3hg3l6ov.png",
    "https://patchwiki.biligame.com/images/lysk/1/12/jz6vo4lnt7zandnf38chntxjcjvlt29.png",
    "https://patchwiki.biligame.com/images/lysk/6/6e/9xgmey0badlh5905zgalx4g1mheih36.png",
    "https://patchwiki.biligame.com/images/lysk/8/89/mj75lqziyk4ahctfk4oj85rudzayi9d.png",
    "https://patchwiki.biligame.com/images/lysk/0/0c/g17ttibn10c1l51uyvfmakzq7cxo9ew.png",
    "https://patchwiki.biligame.com/images/lysk/8/8a/0kqqopniyy7apjikfjaztmnelw2doer.png",
    "https://patchwiki.biligame.com/images/lysk/e/e4/qva6b3w0f6eqikx93cijvbel0aqidcs.png",
    "https://patchwiki.biligame.com/images/lysk/5/55/hyv0xr9y44rvc0ory0o4hxn0vktdvbb.png",
    "https://patchwiki.biligame.com/images/lysk/4/46/r7xgmp2xnpq7l4cjri5xxo17r0lpem6.png",
    "https://patchwiki.biligame.com/images/lysk/0/0b/8389iy8hzg531fqfwrhj4erta6m2rei.png"

],

                    };
                },
                computed: {
                    // 判断是否允许确认选择
                    isSelectionValid() {
                        return (this.isSelfSelecting && this.selectedUpMemories.length === 3) || 
                            (this.isDirectionalSelecting && this.selectedUpMemory);
                    },
                    backgroundStyle() {
                        return {
                            backgroundImage: `url('${this.backgroundImageUrl}')`,
                            backgroundSize: 'cover',
                            backgroundRepeat: 'no-repeat',
                            width: '100%',
                            aspectRatio: '1 / 1.8',
                            position: 'relative',
                            backgroundColor: 'transparent',
                        };
                    },
                    totalPages() {
                        return Math.ceil(this.filteredActivities.length / this.pageSize);
                    },
                    totalResultPages() {
                        return Math.ceil(this.filteredResults.length / this.resultPageSize);
                    },
                    paginatedActivities() {
                        const start = (this.currentPage - 1) * this.pageSize;
                        const end = start + this.pageSize;
                        return this.filteredActivities.slice(start, end);
                    },
                     // 计算当前页的记录
                    paginatedResults() {
                        const start = (this.currentResultPage - 1) * this.pageSize;
                        const end = start + this.resultPageSize;
                        return this.filteredResults.slice(start, end);
                    },
                    selectedOption() {
                        return this.positions.find(option => option.name === this.selectedPosition) || { icons: [] };
                    },
                    showChangeSelfButton() {
                        return this.selectedActivity.category === '其他' || this.upMemories.length > 3;
                    },
                    showUpMemories() {
                        return this.selectedActivity?.name !== '极空回响';
                    },
                    resultsLength() {
                        return this.results.length;
                    },
                    // 计算三星的剩余概率
                    remainingThreeStarProbability() {
                        const remaining = 100 - this.inputFive - this.inputFour;
                        return remaining > 0 ? remaining.toFixed(2) : 0;
                    },
                    // 历史记录计算
                    historyResult(){
                    let names = [];
                    let result = [];
                    this.filteredResults.forEach(item=>{
                      if(names.includes(item.name)){
                        let repeat = result.find(ele=>ele.name===item.name);
                        repeat.count++
                      }else{
                        item.count=1
                        names.push(item.name);
                        result.push(item);
                      }
                    })
                    result.sort(function(a,b){
                      return b.star - a.star
                    })
                    console.log(result)
                      return result
                    },
                    
                },
                watch: {
                    currentDraw(val) {
                        if (val.length === 1) {
                            this.playAnimation(); // 当抽卡完成时，开始播放动画
                        }
                    },
                    resultsLength(newLength, oldLength) {
                        if (newLength > oldLength) {
                            this.filterResults(); // 当数组长度增加时调用筛选方法
                        }
                    },
                    filteredResults(newResults) {
                        
                        this.currentResultPage = 1; // 当筛选结果变化时，重置页码到第一页
                        this.updatePaginatedResults();
                        
                    },
                    // 监听五星和四星的值变化
                    inputFive(val) {
                      
                        this.checkTotal();
                    },
                    inputFour(val) {
                        this.checkTotal();
                    },
                    selectedUpMemory() {
                        this.updateBackgroundImage();
                    },
                    selectedTab(val){
                      if(val === "history") {
                        this.$nextTick(()=>{
                          this.tabHeight = this.$refs.hisTab.offsetHeight + 30
                        })
                      }
                    }
                },
  
                methods: {
                    // 启动自选或定向模式
                    startSelection(type) {
                        if(this.selectedActivity.category === '其他'){
                            this.showModal = true;
                            return;
                        }
                        if (type === 'self') {
                            this.isSelfSelecting = true;
                            this.isDirectionalSelecting = false;
                            this.availableMemories = this.upMemories; // 自选时显示所有UP卡
                        } else if (type === 'directional') {
                            if (this.selectedUpMemories.length === 3) {
                                this.isDirectionalSelecting = true;
                                this.isSelfSelecting = false;
                                this.availableMemories = this.selectedUpMemories; // 定向时仅显示已自选的卡
                            } else {
                                alert('请先选择三张自选卡！');
                            }
                        }
                    },

                    // 取消选择
                    cancelSelection() {
                        if(this.isSelfSelecting){
                            this.selectedUpMemory = [];
                            this.selectedUpMemories = [];
                        }
                        else{
                            this.selectedUpMemory = [];
                        }
                        this.isSelfSelecting = false;
                        this.isDirectionalSelecting = false;
                        this.availableMemories = this.upMemories;
                    },

                    // 确认选择
                    confirmSelection() {
                        if (this.isSelfSelecting) {
                            this.isSelfSelecting = false;
                            // 将选定的卡片更新到 selectedUpMemories
                            console.log(this.selectedUpMemories);
                            this.availableMemories = [...this.selectedUpMemories]; // 确保它包含最新值
                        } else if (this.isDirectionalSelecting && this.selectedUpMemory) {
                            this.isDirectionalSelecting = false;
                        } else if (this.selectedActivity.category === '其他'){
                            this.selectedUpMemories = this.selectedPermanentFiveStars;
                            this.availableMemories = this.selectedPermanentFiveStars;
            
                            this.showModal = false;
                        }
                    },

                    // 选择自选或定向卡
                    selectMemory(memory) {
                        
                        if (this.isSelfSelecting) {
                            // 自选状态下，最多选择三张卡
                            if (this.selectedUpMemories.includes(memory)) {
                                this.selectedUpMemories = this.selectedUpMemories.filter(m => m !== memory);
                            } else if (this.selectedUpMemories.length < 3) {
                                this.selectedUpMemories.push(memory);
                            }
                        } else if (this.isDirectionalSelecting) {
                            // 定向状态下，选择一张卡
                            this.selectedUpMemory = [memory];
                        }
                    },
                    // 选择五星卡
                    selectFiveStarMemory(memory) {
                        if (this.selectedPermanentFiveStars.includes(memory)) {
                            this.selectedPermanentFiveStars = this.selectedPermanentFiveStars.filter(m => m !== memory); // 取消选择
                        } else if (this.selectedPermanentFiveStars.length < 5) {
                            this.selectedPermanentFiveStars.push(memory); // 选择五星卡
                        }
                        
                    },
                    // 取消模态框
                    cancelModal() {
                        this.showModal = false; // 关闭模态框
                        this.selectedPermanentFiveStars = []; // 清空选择
                    },

                    async updateBackgroundImage() {
                        try {
                            if (this.selectedUpMemory && this.selectedUpMemory.length > 0) {
                                const cardDetails = this.selectedUpMemory[0].imageUrl;
                                console.log(this.selectedUpMemory,cardDetails);
                                this.backgroundImageUrl = cardDetails || this.defaultImageUrl;
                            } else {
                                this.backgroundImageUrl = this.defaultImageUrl;
                                console.log("没有检查到图片");
                            }
                        } catch (error) {
                            console.error('Error fetching card details:', error);
                            this.backgroundImageUrl = this.defaultImageUrl;
                        }
                    },
                    playAnimation() {
                        // 检查图片是否已经加载完毕
                        if (this.imgUrl && this.imgUrl.length > 0) {
                            console.log("图片已经加载完成，开始播放动画...");
                            this.animationPlaying = true;

                            // 使用 $nextTick 确保 DOM 更新完成后再执行动画播放
                            this.$nextTick(() => {
                                this.frameIndex = 1;
                                this.updateFrame(); // 开始更新动画帧
                            });
                        } else {
                            console.error("图片还未加载完成，无法播放动画。");
                        }
                    },
                    updateFrame() {
                        const frameElement = this.$refs.frame;

                        if (frameElement) {
                            if (this.frameIndex <= this.totalFrames) {
                                frameElement.src = this.imgUrl[this.frameIndex - 1];
                                this.frameIndex += 1;

                                setTimeout(() => {
                                    this.updateFrame();
                                }, this.frameInterval);
                            } else {
                                // 动画结束后，停留在抽卡结果的图片上
                                if (this.currentDraw && this.currentDraw.length > 0 && this.currentDraw[0].imageUrl) {
                                    frameElement.src = this.currentDraw[0].imageUrl;
                                }
                                this.animationPlaying = false;
                                this.showResult = true; // 显示抽卡结果
                            }
                        }
                    },
                    returnToDraw() {
                        // 用户点击结果后返回抽卡界面
                        this.showResult = false;
                        this.animationPlaying = false; // 确保动画状态也重置
                        this.currentDraw = []; // 重置当前抽卡结果
                    },

                    preloadImages(imgUrls) {
                        return Promise.all(
                            imgUrls.map((url) => {
                                return new Promise((resolve, reject) => {
                                    const img = new Image();
                                    img.src = url;
                                    img.onload = () => resolve();
                                    img.onerror = () => reject();
                                });
                            })
                        );
                    },
                           
                    // 检查五星和四星的总和是否超过 100
                    checkTotal() {
                        const total = this.inputFive + this.inputFour;
                        if (total > 100) {
                            // 如果总和超过 100，将它们重置为初始值
                            alert('五星和四星的总和不能超过100%，已重置为初始值');
                            this.inputFive = 1;
                            this.inputFour = 7;
                        }
                        else if(this.inputFive < 0 || this.inputFour < 0){
                            alert('概率值不能小于零，已重置为初始值');
                            this.inputFive = 1;
                            this.inputFour = 7;
                        }
                        else{
                            this.fourStarProbability = parseFloat((this.inputFour / 100).toFixed(2));
                            this.fiveStarProbability = parseFloat((this.inputFive / 100).toFixed(2));
                            //console.log(this.fiveStarProbability);
                        }
                    },
                    // 更新分页数据方法，强制触发重新计算
                    updatePaginatedResults() {
                        // 触发 paginatedResults 重新计算
                        this.$forceUpdate();
                    },
                    // 更新五星和四星的概率
                    updateProbabilities() {
                        console.log('Updated Five Star Probability:', this.fiveStarProbability);
                        if (this.noFiveStarStreak > 60) {
                            this.fiveStarProbability = Math.min(1, parseFloat((0.01 + 0.1 * (this.noFiveStarStreak - 60)).toFixed(2)));
                        } else {
                            this.fiveStarProbability = parseFloat((this.inputFive / 100).toFixed(2));
                        }
                        this.fourStarProbability = parseFloat((this.inputFour / 100).toFixed(2));
                    },
                    //十抽的卡面排列绘制
                    getCardStyle(index) {
                        const styles = [
                            { left: '10px', top: '26%' },
                            { left: 'calc(20% + 8px)', top: '24%' },
                            { left: 'calc(40% + 8px)', top: '22%' },
                            { left: 'calc(60% + 8px)', top: '20%' },
                            { left: 'calc(80% + 8px)', top: '18%' },

                            { left: '10px', bottom: '21%' },
                            { left: 'calc(20% + 8px)', bottom: '24%' },
                            { left: 'calc(40% + 8px)', bottom: '27%' },
                            { left: 'calc(60% + 8px)', bottom: '30%' },
                            { left: 'calc(80% + 8px)', bottom: '33%' }
                        ];

                        return styles[index] || {};
                    },
                    //解析长图的地址
                    async getCardImageUrl(cardName) {
                        const imageUrl = await this.fetchCardDetails(cardName); // 获取长图链接
                        return imageUrl ? imageUrl : '默认图片的URL'; // 如果找不到链接，返回默认图片
                    },
                    //从长图页面获取盒子内容
                    async fetchCardDetails(cardName) {
                        const url = `https://wiki.biligame.com/lysk/${cardName}#/media/文件-:思念长图-${cardName}.png`; // 目标页面的 URL
                    
                        try {
                            const response = await fetch(url);
                            const data = await response.text();
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(data, 'text/html');
                    
                            // 查找与卡片相关的 <img> 标签
                            const cardImage = doc.querySelector(`img[alt*='思念长图-${cardName}.png']`);
                            if (cardImage) {
                                const imageUrl = cardImage.getAttribute('src');
                                return imageUrl; // 返回图片的URL
                            } else {
                                return ''; // 没有找到时返回空字符串
                            }
                        } catch (error) {
                            console.error('Error fetching card details:', error);
                            return ''; // 出错时返回空字符串
                        }
                    },
                    drawFromCoronaPool() {
                        let result;

                        // 确保两个 `selectedUpMemories` 交替出现
                        if (this.lastCoronaMemory === this.selectedUpMemories[0]) {
                            result = this.selectedUpMemories[1]; // 如果上次抽的是第一个，这次抽第二个
                        } else {
                            result = this.selectedUpMemories[0]; // 否则抽第一个
                        }

                        // 更新 `lastCoronaMemory` 为这次抽到的卡
                        this.lastCoronaMemory = result;

                        return result;
                    },
                    async wishOnce() {
                        this.totalWishes++;
                        this.noFiveStarStreak++;
                        this.noFourStarStreak++;
                        this.noUpFiveStarStreak++;
                        this.updateProbabilities(); // 更新概率
                        //console.log(this.noFiveStarStreak);
                        let result;
                        const rand = this.rng.next(); // 使用Xorshift生成随机数
                    
                        // 判断是否命中五星
                        if (rand < this.fiveStarProbability) {
                            this.noFiveStarStreak = 0;
                            this.noFourStarStreak = 0;
                            
                            //result = this.randomFrom(this.pool.fiveStar);
                            // 75% 概率出限定卡
                            const isLimited = (Math.random() < 0.75 || this.hitUpFive === false);
                            if (isLimited && this.selectedUpMemory.length > 0) {
                                // 判断是否在日冕池
                                if (this.selectedActivity.position === '日冕') {
                                    result = this.drawFromCoronaPool(); // 使用日冕池的交替逻辑
                                } else {
                                    result = this.randomFrom(this.selectedUpMemory); // 普通限定卡逻辑
                                    
                                }
                                this.upFiveStarCount++; // 增加限定五星计数
                                this.hitUpFive = true;
                                this.noUpFiveStarStreak = 0;
                            } 
                            else if(this.selectedActivity.category === '其他' && this.selectedUpMemories.length > 0){
                                result = this.randomFrom(this.selectedUpMemories)
                                this.permanentFiveStarCount++; // 抽卡结果不在 upMemories 中时增加计数                 
                                this.hitUpFive = true;
                            }
                            else {
                                result = this.randomFrom(this.pool.fiveStar); // 常驻卡
                                if (!this.upMemories.includes(result)) {
                                    this.permanentFiveStarCount++; // 抽卡结果不在 upMemories 中时增加计数
                                }
                                this.bigGuaranteeCount++;
                                this.hitUpFive = false;
                            }
                        } else if (rand < (this.fiveStarProbability + this.fourStarProbability)) {
                            this.noFourStarStreak = 0;
                            result = this.randomFrom(this.pool.fourStar);
                        } else {
                            // 如果 10 次内未出4星或以上，强制保底
                            if (this.noFourStarStreak >= 10) {
                                this.noFourStarStreak = 0;
                                result = this.randomFrom(this.pool.fourStar);
                            } else {
                                result = this.randomFrom(this.pool.threeStar);
                            }
                        }
                    
                        // 获取卡片的图片 URL 并存储
                        //const imageUrl = await this.getCardImageUrl(result.name);
                        //result.imageUrl = imageUrl;
                        // 获取当前时间并加入结果
                        result.time = new Date().toLocaleString(); // 保存抽卡时间
                        this.results.push(result);
                        this.currentDraw = [result];
                        
                        // 启动抽卡动画
                        this.playAnimation();
                        return result; 
                       
                    },
                    // 抽卡一次，不等待异步操作
                    wishOnceSync() {
                        this.totalWishes++;
                        this.noFiveStarStreak++;
                        this.noFourStarStreak++;
                        this.noUpFiveStarStreak++;
                        this.updateProbabilities(); // 更新概率
                        //console.log(this.fiveStarProbability);
                      
                        let result;
                        const rand = this.rng.next(); // 使用Xorshift生成随机数
                    
                        // 判断是否命中五星
                        if (rand < this.fiveStarProbability) {
                            this.noFiveStarStreak = 0;
                            this.noFourStarStreak = 0;
                            
                            //console.log("没有更新前的命中",this.hitUpFive);
                            //result = this.randomFrom(this.pool.fiveStar);
                            // 75% 概率出限定卡
                            const isLimited = (Math.random() < 0.75 || this.hitUpFive === false);
                            if (isLimited && this.selectedUpMemory.length > 0) {
                                // 判断是否在日冕池
                                if (this.selectedActivity.position === '日冕') {
                                    result = this.drawFromCoronaPool(); // 使用日冕池的交替逻辑
                                } else {
                                    result = this.randomFrom(this.selectedUpMemory); // 普通限定卡逻辑
                                }
                                this.upFiveStarCount++; // 增加限定五星计数
                                this.hitUpFive = true;
                                this.noUpFiveStarStreak = 0;
                                //console.log("更新后的命中",this.hitUpFive);
                            } 
                            else if(this.selectedActivity.category === '其他' && this.selectedUpMemories.length > 0){
                                result = this.randomFrom(this.selectedUpMemories)
                                this.permanentFiveStarCount++; // 增加常驻五星计数
                                this.hitUpFive = true;
                            }
                            else {
                                result = this.randomFrom(this.pool.fiveStar); // 常驻卡
                                // 检查抽卡结果是否在 upMemories 中
                                if (!this.upMemories.includes(result)) {
                                    this.permanentFiveStarCount++; // 抽卡结果不在 upMemories 中时增加计数
                                }
                                this.bigGuaranteeCount++;
                                this.hitUpFive = false;
                                //console.log("更新后的命中",this.hitUpFive);
                            }
                        } else if (rand < (this.fiveStarProbability + this.fourStarProbability)) {
                            this.noFourStarStreak = 0;
                            result = this.randomFrom(this.pool.fourStar);
                        } else {
                            // 如果 10 次内未出4星或以上，强制保底
                            if (this.noFourStarStreak >= 10) {
                                this.noFourStarStreak = 0;
                                result = this.randomFrom(this.pool.fourStar);
                            } else {
                                result = this.randomFrom(this.pool.threeStar);
                            }
                        }
                        // 获取当前时间并加入结果
                        result.time = new Date().toLocaleString(); // 保存抽卡时间
                        this.results.push(result);
                        return result; // 返回抽卡结果
                    },
                    
                    // 十连抽，生成十张卡片并并行获取图片URL
                    async wishTenTimes() {
                        this.currentTenDrawFiveStarCount = 0;
                        const currentTenResults = [];
                    
                        // 一次性生成十张卡片
                        for (let i = 0; i < 10; i++) {
                            const result = this.wishOnceSync();
                            currentTenResults.push(result);
                            // 如果是五星卡，计数增加
                            if (result.star === 5) {
                                this.currentTenDrawFiveStarCount++;
                            }
                        }
                         // 判断十连是否获得双金
                        if (this.currentTenDrawFiveStarCount >= 2) {
                            this.doubleGoldCount++; // 增加十连双金计数
                        }

                    
                        // 并行获取所有卡片的图片URL
                        //await Promise.all(currentTenResults.map(async result => {
                        //    const imageUrl = await this.getCardImageUrl(result.name);
                        //    result.imageUrl = imageUrl;
                        //}));
                    
                        // 全部完成后一次性更新抽卡结果
                        this.currentDraw = currentTenResults;
                    },
                    
                    // 获取思念图鉴的卡片信息
                    async fetchMemoriesData() {
                        const dataPage = "思念:筛选"; // 数据页面
                        const gameName = "lysk";
                        const url = `https://wiki.biligame.com/${gameName}/${dataPage}`;
    
                        try {
                            const response = await fetch(url);
                            const data = await response.text();
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(data, 'text/html');
                            const elements = doc.querySelectorAll("#CardSelectTr .divsort");
    
                            const memories = [];
                            for (const element of elements) {
                                const cardName = element.querySelector('.card-name') ? element.querySelector('.card-name').textContent.trim() : '未知';
    
                                const cardImgSrc = element.querySelector('.card-img img') ? element.querySelector('.card-img img').src : '';
                                const role = element.getAttribute('data-param1');
                                const star = parseInt(element.getAttribute('data-param2'));
                                const starchart = element.getAttribute('data-param3');
                                const position = element.getAttribute('data-param4');
                                const talent = element.getAttribute('data-param5');
                                const isCommon = element.getAttribute('data-param6') === '常驻' ? 1 : 0;
                                const bigImg = element.getAttribute('data-param7');
    
                                memories.push({
                                    name: cardName,
                                    path: cardImgSrc,
                                    role: role,
                                    star: star,
                                    starchart: starchart,
                                    position: position,
                                    talent: talent,
                                    flag: isCommon, // 获取途径：1表示公共池，0表示活动池
                                    imageUrl:bigImg
                                });
                            }
                            this.memories = memories;
    
                            // 将卡片按照星级分类到不同的卡池
                            this.pool.fiveStar = memories.filter(memory => memory.star === 5);
                            this.pool.fourStar = memories.filter(memory => memory.star === 4);
                            this.pool.threeStar = memories.filter(memory => memory.star === 3);
    
                            console.log('Data loaded successfully.');
                            this.loading = false;
                        } catch (error) {
                            console.error('Error fetching data:', error);
                            this.loading = false;
                        }
                    },

                    //获取活动信息
                    async fetchActivitiesData() {
                        const dataPage = "活动";
                        const gameName = "lysk";
                        const url = `https://wiki.biligame.com/${gameName}/${dataPage}`;

                        try {
                            const response = await fetch(url);
                            const data = await response.text();
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(data, 'text/html');
                            const rows = doc.querySelectorAll('tr[data-param1="许愿"]');
                            console.log(rows.length);
                            const activities = [];

                            for (const row of rows) {
                                // 获取活动名称
                                const nameElement = row.querySelector('td .actTitle a');
                                const name = nameElement ? nameElement.getAttribute('title') : '未知';
                               

                                // 获取活动Banner图片URL
                                const bannerImg = row.querySelector('td a img');
                                const banner = bannerImg ? bannerImg.src : '';

                                // 获取活动Category和Position
                                let category = row.getAttribute('data-param2') || '未知';
                                let position = '';

                                if (category === '单人月卡池') {
                                    category = '单人池';
                                    position = '月晖';
                                } else if (category === '单人日卡池') {
                                    category = '单人池';
                                    position = '日冕';
                                } else if (category === '多人月卡池') {
                                    category = '多人池';
                                    position = '月晖';
                                }

                                // 获取Memory数据
                                const memoryCells = row.querySelectorAll('td:nth-child(5) a img');
                                let memory;

                                if (memoryCells.length > 1) {
                                    // 如果有多个思念，则存为数组
                                    memory = [];
                                    for (const memoryCell of memoryCells) {
                                        const fullName = memoryCell.getAttribute('alt') || '';
                                        const cleanedName = fullName.replace(/思念图标-|\.png/g, '');
                                        
                                        // 通过名称在 memories 中找到对应的 role
                                        const matchingMemory = this.memories.find(mem => mem.name === cleanedName);
                                        const role = matchingMemory ? matchingMemory.role : '未知';
                                        
                                        memory.push({
                                            name: cleanedName,
                                            path: memoryCell.src,
                                            role: role
                                        });
                                    }
                                } else if (memoryCells.length === 1) {
                                    // 如果只有一个思念，则存为对象
                                    const memoryCell = memoryCells[0];
                                    const fullName = memoryCell.getAttribute('alt') || '';
                                    const cleanedName = fullName.replace(/思念图标-|\.png/g, '');

                                    // 通过名称在 memories 中找到对应的 role
                                    const matchingMemory = this.memories.find(mem => mem.name === cleanedName);
                                    const role = matchingMemory ? matchingMemory.role : '未知';

                                    memory = {
                                        name: cleanedName,
                                        path: memoryCell.src,
                                        role: role
                                    };
                                } else {
                                    // 如果没有思念
                                    memory = null;
                                }

                                // 构造活动对象
                                activities.push({
                                    name,
                                    position,
                                    category,
                                    time: '', // 时间属性留空
                                    banner,
                                    memory
                                });
                            }

                            this.activities = activities;
                            console.log('Activities loaded successfully:', activities, activities.length);
                        } catch (error) {
                            console.error('Error fetching activities:', error);
                        }
                    },


                    // 从卡池中随机选择
                    randomFrom(arr) {
                        if (arr.length === 0) return null;
                        const index = Math.floor(this.rng.next() * arr.length);
                        return arr[index];
                    },
                   

                    selectActivity(activity) {
                        this.selectedActivity = activity;
                        this.noUpFiveStarStreak = 0;
                        console.log("Selected Activity:", activity.category);
                        
                        // 公共池活动，例如“极空回响”
                        if (activity.name === "极空回响") {
                            this.pool.fiveStar = this.memories.filter(memory => memory.star === 5 && memory.flag === 1);
                            this.pool.fourStar = this.memories.filter(memory => memory.star === 4 && memory.flag === 1);
                            this.pool.threeStar = this.memories.filter(memory => memory.star === 3 && memory.flag === 1);
                            this.selectedUpMemory = [];
                            this.selectedUpMemories = [];
                            this.availableMemories = [];
                        }else if(activity.category === "其他"){
                            console.log(this.selectedActivity.name);
                            const fiveStarPool = this.memories.filter(memory => memory.star === 5 && memory.flag === 1);
                            const fourStarPool = this.memories.filter(memory => memory.star === 4 && memory.flag === 1);
                            const threeStarPool = this.memories.filter(memory => memory.star === 3 && memory.flag === 1);                           
                            this.pool.fourStar = this.memories.filter(memory => memory.star === 4 && memory.flag === 1);
                            this.pool.threeStar = this.memories.filter(memory => memory.star === 3 && memory.flag === 1);
                           
                            this.selectedUpMemory = [];
                            this.selectedUpMemories = [];
                            this.availableMemories = [];

                        }
                        else if (activity.category !== "其他") {
                            // 获取活动中的限定思念
                            const memoryNames = Array.isArray(activity.memory)
                                ? activity.memory.map(mem => mem.name)
                                : [activity.memory.name];
                            
                            // 过滤出限定思念（upMemories）
                            this.upMemories = this.memories.filter(memory => memoryNames.includes(memory.name));
                            
                            // 单人池：常驻卡 + 限定卡                       
                            // 常驻卡
                            const fiveStarPool = this.memories.filter(memory => memory.star === 5 && memory.flag === 1);
                            const fourStarPool = this.memories.filter(memory => memory.star === 4 && memory.flag === 1);
                            const threeStarPool = this.memories.filter(memory => memory.star === 3 && memory.flag === 1);                           
                            // 限定卡
                            const limitedMemory = this.upMemories.filter(memory => memory.star === 5);            
                            // 设置五星池子
                            this.pool.fiveStar = [...fiveStarPool, ...limitedMemory];                            
                            // 四星和三星仍然使用常驻卡
                            this.pool.fourStar = fourStarPool;
                            this.pool.threeStar = threeStarPool  ;
                            if(activity.category === "单人池") {
                                
                                this.selectedUpMemory = this.upMemories;
                                this.selectedUpMemories = this.upMemories;
                                this.availableMemories = this.upMemories;
                            } else if (activity.category === "多人池") {
                                // 设置多人月卡池默认状态下所有限定卡共享75%的概率
                                this.selectedUpMemory = [];
                                this.availableMemories = this.upMemories;
                                if(this.upMemories.length === 3){
                                    this.selectedUpMemories = this.upMemories;
                                }
                                else{
                                    this.selectedUpMemories = [];
                                }
                            }  
                                                
                        }

                    },

                    filterActivities() {
                        let filtered = [...this.activities, this.commonEvent];
                        
                        if (this.selectedCategory !== '全部') {
                            filtered = filtered.filter(activity => activity.category === this.selectedCategory);
                        }
                        if(this.selectedCategory === '单人池'){
                                if (this.selectedPosition !== '全部' ) {
                                filtered = filtered.filter(activity => activity.position === this.selectedPosition);
                            }
        
                            if (this.selectedRole !== '全部角色') {
                                filtered = filtered.filter(activity => {
                                    const memories = Array.isArray(activity.memory) ? activity.memory : [activity.memory];
                                    return memories.some(mem => mem.role === this.selectedRole);
                                });
                            }
                        }
                        
                        this.filteredActivities = filtered;
                        this.currentPage = 1;
                    },
                    filterCategory(category) {
                        this.selectedCategory = category;
                        this.filterActivities();
                    },
                    filterPosition() {
                        this.filterActivities();
                    },
                    filterRole() {
                        this.filterActivities();
                    },
                    togglePosition() {
                        this.isPositionVisible = !this.isPositionVisible;
                    },
                    toggleRole() {
                        this.isRoleVisible = !this.isRoleVisible;
                    },
                    toggleStar() {
                        this.isStarVisible = !this.isStarVisible;
                    },
                    toggleHistoryRole() {
                        this.isHistoryRoleVisible = !this.isHistoryRoleVisible;
                    },
                    selectStar(starLabel) {
                        const starMapping = {
                            '全部星级':'全部星级',
                            "五星": 5,
                            "四星": 4,
                            "三星": 3
                        };
                        
                        // 如果 starLabel 存在于映射中，使用其对应的数字，否则置为空
                        this.filterStar = starLabel;
                        this.selectedStar = starMapping[starLabel];
                        this.isStarVisible = false;
                        this.filterResults();

                    },

                    selectHistoryRole(role) {
                        this.selectedHistoryRole = role;  // 更新选中的角色
                        this.isHistoryRoleVisible = false;
                        this.filterResults(); // 执行组合筛选
                    },

                    // 组合筛选方法
                    filterResults() {
                        let filteredResult = this.results;

                        // 默认情况显示全部结果
                        if (this.selectedStar === '全部星级' && this.selectedHistoryRole === '全部角色') {
                            filteredResult.sort((a, b) => new Date(b.time) - new Date(a.time));

                            this.filteredResults = filteredResult;
                            return;
                        }
                        if (this.selectedStar !== '全部星级') {
                            filteredResult = filteredResult.filter(result => result.star === this.selectedStar);
                        }
                        
    
                        if (this.selectedHistoryRole !== '全部角色') {
                            filteredResult = filteredResult.filter(result => result.role === this.selectedHistoryRole);
                        }
                        // 根据时间从新到旧排序
                        filteredResult.sort((a, b) => new Date(b.time) - new Date(a.time));

                        this.filteredResults = filteredResult;
                        // 筛选后重置分页
                        this.currentResultPage = 1;
                    },
                    selectPosition(position) {
                        console.log(position,position.name);
                        this.selectedPosition = position.name;
                        this.isPositionVisible = false;
                        this.filterPosition();
                    },
                    selectRole(role) {
                        console.log(role);
                        this.selectedRole = role;
                        this.isRoleVisible = false;
                        this.filterRole();
                    },
                    changePage(page) {
                        this.currentPage = page;
                    },
                    changeResultPage(page) {
                        this.currentResultPage = page;
                    },
                    delay(ms) {
                        return new Promise(resolve => setTimeout(resolve, ms));
                    },
                    clearDrawHistory() {
                        this.results = []; // 清空抽卡记录数组
                        this.currentDraw = []; // 清除当前抽卡结果
                        this.totalWishes = 0;
                        this.noFiveStarStreak = 0;
                        this.noFourStarStreak=0;
                        this.noUpFiveStarStreak=0;
                        this.upFiveStarCount=0;// 获得限定五星的次数
                        this.permanentFiveStarCount=0;// 获得常驻五星的次数
                        this.bigGuaranteeCount=0;// 触发大保底的次数
                        this.doubleGoldCount=0;// 十连双金的次数
                        this.currentTenDrawFiveStarCount=0; // 当前十连抽中的五星数量
                        
                        this.updateProbabilities(); // 更新概率
                        this.filterResults();
                        console.log('抽卡记录已清空');
                    },
                    // 获取缓存数据的方法
                    getCachedData(key) {
                        const data = localStorage.getItem(key);
                        if (!data) return null;

                        const parsedData = JSON.parse(data);
                        const now = new Date();

                        if (now.getTime() > parsedData.expiration) {
                            localStorage.removeItem(key);
                            return null;
                        }

                        return parsedData.value;
                    },

                    // 保存数据到缓存的方法
                    setCachedData(key, value) {
                        const now = new Date();
                        const expiration = now.getTime() + 7 * 24 * 60 * 60 * 1000; // 一周的过期时间

                        const dataToStore = {
                            value,
                            expiration
                        };

                        localStorage.setItem(key, JSON.stringify(dataToStore));
                    },
                },
                
                async mounted() {
                    const memoriesData = this.getCachedData('memories');
                    const activitiesData = this.getCachedData('activities');

                    if (memoriesData) {
                        this.memories = memoriesData;
                    } else {
                        await this.fetchMemoriesData();
                    }

                    if (activitiesData) {
                        this.activities = activitiesData;
                    } else {
                        await this.fetchActivitiesData();
                    }
                    this.filterActivities();
                    // 使用 nextTick 在 DOM 更新完成后再进行图片预加载
                    this.$nextTick(() => {
                        this.preloadImages(this.imgUrl)
                            .then(() => {
                                console.log('所有图片加载完成，准备进行动画...');
                            })
                            .catch((error) => {
                                console.error('图片加载失败：', error);
                            });
                    });
                }
                
            }).mount('.row-container');
        </script>
    </body>
    </html></includeonly>