<script lang="ts" setup>

import { ElMessage } from "element-plus";
import { inject, onMounted, ref } from "vue";
import { LoggerKey } from "../ts/class/Logger";
import CommonUtils from "../ts/class/utils/CommonUtils";
import globVars from "../ts/globVars";

const logger = inject(LoggerKey)

const loading = ref(false)
const featureStatus = ref(globVars.featureStatus)
const now = performance.now()

const loadAndCopy = async () => {
  loading.value = true
  let latest: string
  try {
    latest = await CommonUtils.COFetch(`https://jjins.github.io/fyfuzhi/release.min.user.js?${ performance.now() }`)
  } catch (e) {
    logger.error(e.stack)
    ElMessage.error(e.message)
    loading.value = false
    throw e
  }

  if (navigator.clipboard) {
    await navigator.clipboard.writeText(latest)
    ElMessage.success('脚本已复制，请前往粘贴')
  } else {
    ElMessage.error('浏览器不支持复制指令')
  }
  loading.value = false

}

onMounted(() => logger.info({ featureStatus }))
</script>

<template>
  <el-card class="card" shadow="never">
    <template #header>更新</template>
    <el-space direction="vertical" style="width: 100%">
      <el-row>
        <el-text>最新版本:
          <el-image :src="'https://jjins.github.io/t2i/version.png?' + now" alt="latest"
                    style="width: 80px;height: 16px"/>
        </el-text>
      </el-row>
      <el-row>
        <el-text size="large">电脑</el-text>
      </el-row>
      <el-text>浏览器运行油猴等用户脚本扩展
        <el-image alt="tm.png" src="//jjins.github.io/tm.png"/>
        <el-image alt="vm.png"
                  src="//jjins.github.io/vm.png"/>
        时可以使用链接安装（自动更新）:
        <el-link
            href="//gitlab.com/JJins/wuhu-torn-helper/-/raw/dev/release.min.user.js" target="_blank"
            type="primary">点此安装
        </el-link>
        。
      </el-text>
      <el-divider/>
      <el-col>
        <el-text size="large">手机</el-text>
      </el-col>
      <el-text>安卓 (如 KIWI) 等可以用油猴脚本的浏览器也可以点上面的链接安装⬆️</el-text>
      <el-text>Torn PDA app 或 Alook 用户可打开
        <el-link href="//jjins.github.io/fyfuzhi/" target="_blank"
                 type="primary">此页面
        </el-link>
        快捷复制粘贴。
      </el-text>
      <el-text>注：Torn PDA 中，Injection time 请选择 Start 达到最好效果。</el-text>
      <el-divider/>
      <el-col>
        <el-text size="large">直接复制</el-text>
      </el-col>
      <el-text>加载脚本后复制粘贴到用户脚本处。</el-text>
      <el-button :loading="loading" @click="loadAndCopy">加载</el-button>
    </el-space>
  </el-card>

  <el-card class="card" shadow="never">
    <template #header>功能状况</template>
    <el-table :data="featureStatus" border style="width: 100%">
      <el-table-column label="描述" prop="desc"/>
      <el-table-column label="状态" prop="status"/>
      <el-table-column label="类名" prop="clazz"/>
      <el-table-column label="加载(ms)" prop="load"/>
    </el-table>
  </el-card>
</template>

<style scoped>
.el-image {
  width: 20px;
}

.card {
  margin-bottom: 10px;
}
</style>
