<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useIntervalFn } from '@vueuse/core'
import { fetchGetKnowledgeDocumentListByKdIds } from '@/apis/knowledge'

interface Props {
  kdIds: number[]
}

interface Emit {
  (e: 'confirm'): void
}

enum TrainStatus {
  UNOPENED = 'Unopened',
  LINE = 'Line',
  TRAINING = 'Training',
  COMPLETE = 'Complete',
  FAIL = 'Fail',
}

interface TrainFileItem {
  kdId: number
  documentName: string
  documentUrl: string
  trainStatus: TrainStatus
  knowledgeId: string
  documentSize: string
}

const { t } = useI18n()

const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const trainFileList = ref<TrainFileItem[]>([])

onMounted(() => {
  !!props.kdIds.length && handleGetKnowledgeDocumentList()
})

const trainFileText = computed(() => (status: TrainStatus) => {
  switch (status) {
    case TrainStatus.COMPLETE:
      return 'personal_space_module.knowledge_module.upload_document_module.process_success'
    case TrainStatus.FAIL:
      return 'personal_space_module.knowledge_module.upload_document_module.process_fail'
    default:
      return 'personal_space_module.knowledge_module.upload_document_module.processed'
  }
})

const trainFileFontColor = computed(() => (status: TrainStatus) => {
  switch (status) {
    case TrainStatus.COMPLETE:
      return '#0B7DFF'
    case TrainStatus.FAIL:
      return '#F25744'
    default:
      return '#333333'
  }
})

const trainFileIcon = computed(() => (documentUrl: string) => {
  const type = documentUrl.substring(documentUrl.lastIndexOf('.') + 1)

  return `https://gsst-poe-sit.gz.bcebos.com/icon/${type}.svg`
})

const isTrainFileListFinish = computed(() => {
  return trainFileList.value.every((trainFileItem) => {
    return [TrainStatus.FAIL, TrainStatus.COMPLETE].includes(trainFileItem.trainStatus)
  })
})

watch(
  () => isTrainFileListFinish.value,
  (newVal) => {
    newVal ? pauseIntervalFn() : resumeIntervalFn()
  },
  { deep: true },
)

const { pause: pauseIntervalFn, resume: resumeIntervalFn } = useIntervalFn(
  async () => {
    handleGetKnowledgeDocumentList()
  },
  2000,
  { immediateCallback: false, immediate: false },
)

async function handleGetKnowledgeDocumentList() {
  const res = await fetchGetKnowledgeDocumentListByKdIds<TrainFileItem[]>(props.kdIds)

  if (res.code === 0) {
    trainFileList.value = res.data
  }
}

function handleConfirm() {
  emit('confirm')
}
</script>

<template>
  <ul class="grid gap-[18px]">
    <li
      v-for="trainFileItem in trainFileList"
      :key="trainFileItem.kdId"
      class="border-inactive-border-color relative h-[90px] select-none overflow-hidden rounded-[10px] border bg-white p-6"
    >
      <div class="flex h-full items-center justify-between">
        <div class="flex items-center">
          <img :src="trainFileIcon(trainFileItem.documentUrl)" class="mr-[15px] h-9 w-9" />
          <div class="flex h-9 flex-col justify-between">
            <span class="text-font-color line-clamp-1 break-all text-sm leading-[14px]">
              {{ trainFileItem.documentName }}
            </span>

            <span class="text-gray-font-color line-clamp-1 break-all text-[13px] leading-[13px]">
              {{ trainFileItem.documentSize }}
            </span>
          </div>
        </div>

        <span :style="{ color: trainFileFontColor(trainFileItem.trainStatus) }">
          {{ t(trainFileText(trainFileItem.trainStatus)) }}
        </span>
      </div>

      <div
        v-show="![TrainStatus.COMPLETE, TrainStatus.FAIL].includes(trainFileItem.trainStatus)"
        class="animate-training absolute left-0 top-[-1px] h-[90px] w-full rounded-[10px] bg-gradient-to-r from-transparent via-[#9EA0FF] to-transparent"
      />
    </li>
  </ul>

  <div class="mt-14 flex items-center justify-end">
    <span class="text-gray-font-color mr-2.5 select-none text-xs">
      {{ t('personal_space_module.knowledge_module.upload_document_module.data_process_tip_message') }}
    </span>
    <NButton type="primary" :bordered="false" @click="handleConfirm">
      {{ t('common_module.confirm_btn_text') }}
    </NButton>
  </div>
</template>
