<script setup>
import { inject, nextTick, onMounted, ref } from 'vue'

const mobile = inject('mobile')
const axios = inject('axios')

const sss_url = `${import.meta.env.VITE_HTTP_URL}/sss-copilot`

const sss_data = ref({ exists: false })

onMounted(async () => {
  const { data } = await axios.get(sss_url)
  sss_data.value = data
})

function import_sss({ event }) {
  sss_data.value = JSON.parse(event.target.response)
}

const token = inject('token')

const maa_code_input = ref(false)
const maa_code = ref('')
const loading = ref(false)
const code = ref(null)

function start_input() {
  maa_code.value = ''
  maa_code_input.value = true
  nextTick(() => code.value.focus())
}

async function download_maa_copilot() {
  loading.value = true
  const number = maa_code.value.replace('maa://', '')
  const { data } = await axios.get(`https://prts.maa.plus/copilot/get/${number}`, {
    transformRequest: [
      (data, headers) => {
        delete headers.token
        return JSON.stringify(data)
      }
    ]
  })
  const form_data = new FormData()
  form_data.append('copilot', new Blob([data.data.content], { type: 'application/json' }))
  const response = await axios.post(sss_url, form_data)
  sss_data.value = response.data
  maa_code_input.value = false
  loading.value = false
}

import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
const store = useConfigStore()
const { conf } = storeToRefs(store)
</script>

<template>
  <n-flex vertical>
    <n-alert title="请检查作业并修正其中的错误！" type="warning" />
    <n-form
      :label-placement="mobile ? 'top' : 'left'"
      :show-feedback="false"
      label-width="72"
      label-align="left"
    >
      <n-form-item label="难度选择">
        <n-radio-group v-model:value="conf.sss.mode">
          <n-flex>
            <n-radio value="normal">标准补给模式</n-radio>
            <n-radio value="ex">应急补给模式</n-radio>
          </n-flex>
        </n-radio-group>
      </n-form-item>
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.sss.choose_agent">
          自动编队（缺人时自动借助战）
        </n-checkbox>
      </n-form-item>
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.sss.finish_while_full">模组刷满时直接结束</n-checkbox>
      </n-form-item>
      <n-form-item label="导入作业">
        <div class="sss-container">
          <template v-if="maa_code_input">
            <n-input
              ref="code"
              v-model:value="maa_code"
              type="text"
              placeholder="maa://114514"
              :disabled="loading"
            />
            <n-button @click="download_maa_copilot" :loading="loading" :disabled="loading">
              下载
            </n-button>
            <n-button @click="maa_code_input = false">取消</n-button>
          </template>
          <template v-else>
            <n-button style="flex-grow: 1" @click="start_input">输入“神秘代码”</n-button>
            <n-upload
              style="width: auto; flex-grow: 1"
              trigger-style="width: 100%"
              :action="sss_url"
              :headers="{ token: token }"
              :show-file-list="false"
              name="copilot"
              @finish="import_sss"
            >
              <n-button style="width: 100%">选择作业文件</n-button>
            </n-upload>
          </template>
        </div>
      </n-form-item>
      <n-form-item label="作业信息">
        <n-flex vertical>
          <div class="wrapper" v-if="sss_data.exists">
            <div class="title">{{ sss_data.title }}</div>
            <n-scrollbar
              style="max-height: 500px"
              content-style="padding-right: 12px"
              trigger="none"
            >
              {{ sss_data.details }}
            </n-scrollbar>
          </div>
          <div v-else>未选择作业</div>
          <n-flex v-for="o in sss_data.operators" align="center">
            <n-avatar :src="`avatar/${o.name}.webp`" />
            <div>{{ o.name }}（{{ o.skill }}技能）</div>
          </n-flex>
        </n-flex>
      </n-form-item>
    </n-form>
  </n-flex>
</template>

<style scoped>
.sss-container {
  display: flex;
  width: 100%;
  gap: 8px;
}

.wrapper {
  white-space: pre-wrap;
  user-select: text;
}

.title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}
</style>
