<template>
    <div class="superpre-container">
        <header>
            <div class="container">
            <section class="intro">
                <h1>MC超先行更新进度&介绍</h1>
                <p>MC超先行服是一个快速更新游戏王新卡的先行测试服务器。在正式更新之前，卡片都需经过超先行的测试。一般在有新卡情报公开的1天内便会更新。</p>
            </section>
            <section class="server-info">
                <h2>MC超先行服主机地址</h2>
                <p>主机地址：<code>mygo.superpre.pro</code> 端口：<code>888</code></p>
                <p>房间名留空时，即为随机对战模式。与其他直连服务器<a href="https://ygo233.com/usage" target="_blank">使用方法</a>相同。</p>
                <p>若遇到了Bug需要反馈，请在<a href="https://ygobbs2.com/c/10" class="feedback">MC社区BUG区</a>发帖反馈。</p>
                <p>如果你想参与开发，请见本文：<a href="https://ygobbs2.com/t/449691">YGOPro更新事务招人</a>。</p>
            </section>
            <section class="update-method">
                <h2>使用方法</h2>
                <p><a href="https://cdn02.moecube.com:444/ygopro-super-pre/archive/ygopro-super-pre.ypk" class="btn download">超先行补丁下载</a></p>
                <ol>
                <li>下载超先行补丁。</li>
                <li>你会下载到一个ypk文件。<br>
                    将该文件放在你的YGOPro/YGOPro2/YGOMobile游戏目录下的expansions文件夹，并重启游戏。</li>
                <li>更新时重新下载补丁并替换expansions文件夹中的原有文件。<br>
                    超先行卡经常更新，请积极更新你的补丁。</li>
                <li>如果你使用的是YGOMobile，也可以在YGOMobile自带的先行卡界面一键下载安装。</li>
                <li>使用MC超先行服务器，开始决斗！</li>
                </ol>
                <p>超先行更新时间：<span class="updateTime"></span></p>
                <p style="text-decoration: line-through;">有没有人能来拯救一下这个UI</p>
            </section>
            </div>
        </header>
        
        <main style="margin: 0 auto;padding:5px;max-width: 800px;">
            <h1 style="margin:25px 15px 15px 15px;">超先行卡列表</h1>
            <p style="margin:0px 15px 10px 15px;">按发布时间排序，最新的卡在前</p>
            <table id="preTable">
                <thead>
                <tr>
                    <th>卡图</th>
                    <th>效果</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="loading" class="loading">
                    <td colspan="2">
                    <span class="loader"></span>
                    </td>
                </tr>
                <tr v-for="(card, index) in cards" :key="index" style="border-top:2px solid #ccc">
                    <td class="img" style="vertical-align: top;">
                      <div style="display: inline-block; vertical-align: top;padding:5px;">
                        <img :src="card.picUrl" :alt="card.name" loading="lazy" class="card-image">
                      </div>
                    </td>
                    <td class="text" style="vertical-align: top;">
                      <div style="display: inline-block; vertical-align: top; padding: 5px;">
                        <p class="name" style="margin:10px 0px 10px 0px;">{{ card.name }}</p>
                        <p class="overallString">{{ card.overallString }}</p>
                        <p class="desc">{{ card.desc }}</p>
                        <p class="time">发布日期：<span class="createTime">{{ formatDateFromUnixTimestamp(card.createTime) }}</span><br>
                        最后更新：<span class="updateTime">{{ formatDateFromUnixTimestamp(card.updateTime) }}</span></p>
                       </div>
                    </td>
                </tr>
                </tbody>
                <tfoot v-if="showMore">
                    <tr>
                        <td colspan="2">
                        查看更多（共<span>{{ cards.length }}</span>张）
                        </td>
                    </tr>
                </tfoot>
            </table>
        </main>

        <section class="comment">
            <div id="tcomment"></div>
        </section>

        <button @click="returnToTop" class="return-to-top" v-if="showReturnToTopButton">
            返回顶端
        </button>
    </div>

</template>

<script>
export default {
  data() {
    return {
      cards: [],
      loading: true,
      showMore: false,
      showReturnToTopButton: false
    };
  },
  mounted() {
    this.getPre();
    this.getVersion();
    // this.initializeTwikoo();
  },
  methods: {

    async getPre() {
        try {
            const res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/test-release-v2.json');
            const cards = await res.json();

            this.cards = cards; 

            this.loading = false;
            console.log("line99", cards.length, this.showMore)
            if (cards.length > 10) {
            this.showMore = true; 
            }
            console.log("line104", cards.length, this.showMore)
        } catch (error) {
            console.error('Error fetching card data from test-release-v2.json:', error);
        }
    },

    async getVersion() {
      try {
        let res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/version.txt');
        let version = await res.text();
        document.querySelector('header .updateTime').innerText = this.formatDateFromUnixTimestamp(version);
        document.querySelector('a.download').href = document.querySelector('a.download').href + "?v=" + version;
      } catch (error) {
        console.error('Error fetching version:', error);
        // Handle error if necessary
      }
    },
    formatDateFromUnixTimestamp(timestamp) {
      var date = new Date(timestamp * 1000);
      var year = date.getFullYear();
      var month = ('0' + (date.getMonth() + 1)).slice(-2);
      var day = ('0' + date.getDate()).slice(-2);
      var hours = ('0' + date.getHours()).slice(-2);
      var minutes = ('0' + date.getMinutes()).slice(-2);
      var seconds = ('0' + date.getSeconds()).slice(-2);
      var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      return formattedDate;
    },
    returnToTop() {
        window.scrollTo({
        top: 0,
        behavior: 'smooth' // Optional: scroll behavior animation
        });
    },
    // initializeTwikoo() {
    //   twikoo.init({
    //     envId: 'https://ygo233.com/tcomment',
    //     el: '#tcomment',
    //     path: 'mycard-pre'
    //   });
    // }
  }
}
</script>
  
<style scoped>

    .superpre-container {
    background-color: #c5d0e8; 
    padding-top: 60px;
    }

	header {
	padding: 40px 0;
	}

	.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
	}

	.intro h1 {
	color: #333;
	font-size: 36px;
	margin-bottom: 20px;
	}

	.intro p {
	color: #666;
	font-size: 18px;
	line-height: 1.6;
	}

  .server-info code {
  color: #444;
  background-color: #d2d9e7;
  }

	.server-info, .update-method {
	margin-top: 40px;
	}

	.server-info h2, .update-method h2 {
	color: #333;
	font-size: 24px;
	margin-bottom: 20px;
	}

	.server-info p, .update-method p {
	color: #666;
	font-size: 16px;
	margin-bottom: 15px;
	}

	.update-method ol {
	list-style-type: decimal;
	padding-left: 20px;
	}

	.update-method ol li {
	color: #666;
	font-size: 16px;
	margin-bottom: 10px;
	}

	.btn {
	display: inline-block;
	background-color: #007bff;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 5px;
	}

	.btn:hover {
	background-color: #0056b3;
	}


	main {
		width: auto;
		padding: 20px 200px;
		background-color: #021123;
		color: #c5d0e8;
	}

	#preTable {
		width: 100%;
		border: 0;
	}

	#preTable thead {
		display: none;
	}

  #preTable .desc {
    white-space: pre-wrap;
  }

	.text {
		vertical-align: top;
	}

	.name {
		font-size: 22px;
		font-weight: bold;
	}

	.time {
		font-size: 12px;
		color: #555555;
	}

	.loading td {
		width: 100%;
		height: 80px;
		text-align: center;
	}

	.loading .loader {
		width: 48px;
		height: 48px;
		border: 5px solid #FFF;
		border-bottom-color: transparent;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

    .card-image {
        width: 199px; 
        height: 290px;
        object-fit: cover;
        padding-top: 10px;
        padding-bottom: 10px; 
        padding-right: 10px;
        align-items: center;
		text-align: center;
    }


	@keyframes rotation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	#preList tr:nth-child(n+10) {
		display: none;
	}

	#preList.expanded tr {
		display: table-row;
	}

	#preTable tfoot {
		display: none;
	}

	#preTable tfoot td {
		height: 60px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-color: #072549;
	}

	section.comment {
		width: auto;
		padding: 20px 200px;
		background-color: white;
	}

	footer {
		width: auto;
		height: 240px;
		padding: 20px 200px;
		text-align: center;
		background: #021123;
		color: #c5d0e8;
	}

	footer img {
		width: 200px;
		height: 200px;
	}

    .return-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        z-index: 999; /* Ensure the button is above other content */
        }

    .return-to-top:hover {
        background-color: #45a049;
    }
</style>
