<script setup>
import { SyncCircle } from '@vicons/ionicons5'
import { form_item_label_style } from '@/styles/styles.js'

const notification = useNotification()

const update_able = inject('update_able')
const running = inject('running')
const version = inject('version')
const new_version = inject('new_version')

const check_running = ref(false)
const update_self_running = ref(false)

async function update_self() {
  running.value = true
  update_self_running.value = true
  const response = await pywebview.api.update_self(
    new_version.value['assets'][0]['browser_download_url']
  )
  notification['error']({
    content: '错误',
    meta: response,
    duration: 3000
  })
  update_self_running.value = false
  running.value = false
}

async function open_new_version_html() {
  window.open(new_version.value['html_url'])
}

async function check_update() {
  running.value = true
  check_running.value = true
  new_version.value = await pywebview.api.get_new_version()
  if (new_version.value.tag_name > version.value) {
    update_able.value = true
    notification['info']({
      content: '提示',
      meta: '有新版本可更新',
      duration: 3000
    })
  } else {
    update_able.value = false
    notification['info']({
      content: '提示',
      meta: '当前已是最新版本',
      duration: 3000
    })
  }
  check_running.value = false
  running.value = false
}
</script>

<template>
  <n-flex vertical style="gap: 16px; height: 100%; padding: 16px; box-sizing: border-box">
    <n-form label-placement="left" :show-feedback="false" label-width="auto" label-align="left">
      <n-form-item label="版本" :label-style="form_item_label_style">
        <n-space align="center">
          {{ version }}
          <n-button
            type="success"
            :loading="check_running"
            :disabled="running"
            @click="check_update"
          >
            <template #icon>
              <n-icon :component="SyncCircle"></n-icon>
            </template>
            检查更新
          </n-button>
        </n-space>
      </n-form-item>
      <n-alert style="margin: 8px 0" type="success" v-if="update_able">
        <template #header>
          最新版本：{{ `${new_version.tag_name} ${new_version.name}` }}
          <n-button style="float: right" @click="open_new_version_html">了解此版本</n-button>
        </template>
        <n-space>
          <n-button
            type="success"
            :loading="update_self_running"
            :disabled="running"
            @click="update_self"
          >
            立即更新
          </n-button>
        </n-space>
      </n-alert>
    </n-form>
  </n-flex>
</template>
