<template>
  <div>
    <n-grid cols="1" responsive="screen">
      <n-gi>
        <n-button
          @click="copyToClipboard"
          tag="a"
          href="https://arkntools.app/#/material"
          target="_blank"
        >
          明日方舟工具箱代码 点击复制
        </n-button>
        <!-- <n-button @click="showModal = true">抽卡资源明细</n-button>
        <n-modal v-model:show="showModal">
          <n-card
            style="width: 600px"
            title="抽卡资源明细"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
          >
            <table>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[0].key }}</td>
                <td>{{ sortedReportData.A常用[0].number }}</td>
              </tr>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[1].key }}</td>
                <td>{{ sortedReportData.A常用[1].number }}</td>
              </tr>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[3].key }}</td>
                <td>{{ sortedReportData.A常用[3].number }}</td>
              </tr>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[4].key }}</td>
                <td>{{ sortedReportData.A常用[4].number }}</td>
              </tr>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[5].key }}</td>
                <td>{{ sortedReportData.A常用[5].number }}</td>
              </tr>
              <tr>
                <td>+</td>
                <td>{{ sortedReportData.A常用[6].key }}</td>
                <td>{{ sortedReportData.A常用[6].number }}</td>
              </tr>
              <tr>
                <td>=</td>
                <td>总和</td>
                <td>123</td>
              </tr>
            </table>
          </n-card>
        </n-modal> -->
        <n-divider />
      </n-gi>
      <n-gi>
        扫描时间：{{ reportData[2] }}
        <br />
        注：万以下的数字并不会计入，如“龙门币 245万” “资质凭证 2万”
        <n-divider />
      </n-gi>
      <n-gi v-for="(categoryItems, categoryName) in sortedReportData" :key="categoryName">
        <n-h2>{{ categoryName.slice(1) }}</n-h2>
        <n-grid x-gap="10px" y-gap="10px" cols="2 m:6 l:6 " responsive="screen">
          <n-gi v-for="itemData in categoryItems" :key="itemData">
            <n-thing>
              <template #avatar>
                <n-avatar color="000" size="large" :src="'/depot/' + itemData['icon'] + '.webp'" />
              </template>
              <template #header>{{ itemData['key'] }}</template>
              <template #description>拥有：{{ itemData['number'] }}</template>
            </n-thing>
          </n-gi>
        </n-grid>
        <n-divider />
      </n-gi>
    </n-grid>
  </div>
</template>
<style></style>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { usedepotStore } from '@/stores/depot'
const depotStore = usedepotStore()
const { getDepotinfo } = depotStore

const reportData = ref([])
let sortedReportData = ref([])
async function fetchData() {
  reportData.value = await getDepotinfo()
  sortReportData()
}

function sortReportData() {
  sortedReportData.value = { ...reportData.value[0] }
  for (const key in sortedReportData.value) {
    if (sortedReportData.value.hasOwnProperty(key)) {
      const innerData = sortedReportData.value[key]
      const sortedInnerData = Object.entries(innerData)
        .map(([k, v]) => ({ key: k, ...v }))
        .sort((a, b) => a.sort - b.sort)
      sortedReportData.value[key] = sortedInnerData
    }
  }
}
onMounted(fetchData)
const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(reportData.value[1])
    console.log('Text copied:', reportData.value[1])
  } catch (err) {
    console.error('Failed to copy text:', err)
  }
}
const showModal = ref(false)
</script>
