<template>
  <el-card shadow="never">
    <el-row>
      <el-col span="24">
        <el-button @click="refresh">刷新</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="24">
        <el-link href="https://gitlab.com/JJins/wuhu-torn-helper/-/raw/dev/CHANGELOG.md" target="_blank">
          https://gitlab.com/JJins/wuhu-torn-helper/-/raw/dev/CHANGELOG.md
        </el-link>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="24">
        <div v-loading="!respond" class="wh-change-log-view-render" v-html="html"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import CommonUtils from "../ts/class/utils/CommonUtils";
import { Container } from "../ts/container/Container";
import MDUtils from "../ts/class/utils/MDUtils";

const mdUtils = Container.factory(MDUtils)

const respond = ref('')
const html = ref('')

const refresh = async () => {
  respond.value = ''
  html.value = ''
  try {
    respond.value = await CommonUtils.COFetch('https://gitlab.com/JJins/wuhu-torn-helper/-/raw/dev/CHANGELOG.md?' + performance.now())
    html.value = mdUtils.parse(respond.value).innerHTML
  } catch (e) {
    html.value = '错误: ' + e.message
  }
}

onMounted(() => {
  refresh()
})
</script>

<style>
.wh-change-log-view-render h2, .wh-change-log-view-render h3, .wh-change-log-view-render h4 {
  margin-top: 20px;
}
</style>
