<script setup lang="ts">
import { readConfig } from '@/utils/readJson.ts'
import { ref, computed, onMounted } from 'vue'

interface Iod {
  name: string
  data_space: string
  doId: string
  fromRepo: string
}

const data = ref<Iod[]>([])
const displayIndex = ref(0)

const displayIod = computed(() => {
  return data.value[displayIndex.value]!
})

onMounted(async () => {
  const res = await readConfig<{ data: Iod[] }>('iodConfig.json')
  data.value = res.data
})

function handleNext() {
  if (displayIndex.value === data.value.length - 1) {
    displayIndex.value = 0
  } else {
    displayIndex.value++
  }
}

function handlePrev() {
  if (displayIndex.value === 0) {
    displayIndex.value = data.value.length - 1
  } else {
    displayIndex.value--
  }
}
</script>

<template>
  <el-popover
    trigger="hover"
    width="440"
    popper-style="background-color: var(--color-bg-result); border: none;"
  >
    <template #reference>
      <div
        class="rounded-full w-[20px] h-[20px] bg-[var(--color-bg-quaternary)] flex justify-center items-center cursor-pointer"
      >
        {{ data.length }}
      </div>
    </template>
    <template #default v-if="data.length">
      <div class="bg-[var(--color-bg-result)]">
        <div class="flex justify-between items-center p-2 pb-0 rounded-[8px] text-[16px] font-bold">
          <span>数联网搜索结果</span>
          <div class="flex items-center gap-3">
            <!-- <div>{{ `${displayIndex + 1}/${data.length}` }}</div>
            <el-button type="primary" size="small" @click="handleNext">下一个</el-button> -->
            <!-- 关闭 -->
            <!-- <SvgIcon icon-class="close" size="15px" /> -->
          </div>
        </div>
        <!-- 分割线 -->
        <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
        <div class="p-2 pt-0">
          <div class="flex items-center w-full gap-3">
            <div class="font-bold w-[75px] text-right flex-shrink-0">名称:</div>
            <div class="text-[var(--color-text-detail)] flex-1 break-words">
              {{ displayIod.name }}
            </div>
          </div>
          <div class="flex items-center w-full gap-3">
            <div class="font-bold w-[75px] text-right flex-shrink-0">数据空间:</div>
            <div class="text-[var(--color-text-detail)] lex-1 break-words">
              {{ displayIod.data_space }}
            </div>
          </div>
          <div class="flex items-center w-full gap-3">
            <div class="font-bold w-[75px] text-right flex-shrink-0">DOID:</div>
            <div class="text-[var(--color-text-detail)] lex-1 break-words">
              {{ displayIod.doId }}
            </div>
          </div>
          <div class="flex items-center w-full gap-3">
            <div class="font-bold w-[75px] text-right flex-shrink-0">来源仓库:</div>
            <div class="text-[var(--color-text-detail)] flex-1 break-words break-al">
              {{ displayIod.fromRepo }}
            </div>
          </div>
          <div>
            <div
              class="card-item w-[80px] h-[25px] flex justify-between items-center rounded-[25px] bg-[#b1b1b1] ml-auto px-2"
            >
              <div class="text-[14px] text-[#ffffff] font-medium">
                {{ `${displayIndex + 1}/${data.length}` }}
              </div>
              <div class="flex items-center gap-1">
                <svg-icon
                  icon-class="left"
                  size="15px"
                  @click="handlePrev"
                  class="cursor-pointer hover:opacity-70"
                ></svg-icon>
                <svg-icon
                  icon-class="right"
                  size="15px"
                  @click="handleNext"
                  class="cursor-pointer hover:opacity-70"
                ></svg-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-popover>
</template>

<style scoped lang="scss"></style>
