<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import UploadFile from './upload-file.vue'
import DataSetting from './data-setting.vue'
import { fetchTrainKnowledge } from '@/apis/knowledge'

interface StepItem {
  stepId: number
  title: string
}

const { t } = useI18n()

const router = useRouter()

const stepList = ref<StepItem[]>([
  {
    stepId: 1,
    title: t('common_module.upload'),
  },
  {
    stepId: 2,
    title: t('personal_space_module.knowledge_module.upload_document_module.data_process'),
  },
])

const currentStepId = ref(1)
const currentKdIdList = ref<number[]>([])
const currentKnowledgeId = ref(0)

onMounted(() => {
  if (!router.currentRoute.value.params.id) {
    window.$message.warning(t('personal_space_module.knowledge_module.not_find_knowledge_message'))
    router.replace({ name: 'PersonalSpaceKnowledge' })
    return
  }

  currentKnowledgeId.value = Number(router.currentRoute.value.params.id)
})

async function handleToDataProcess(kdId: number[]) {
  currentKdIdList.value = kdId

  const res = await fetchTrainKnowledge({
    knowledgeInfoId: currentKnowledgeId.value,
    kdIds: currentKdIdList.value,
    segmentationConfig: {},
  })

  if (res.code === 0) {
    currentStepId.value = 2
  }
}

function handleToKnowledgeList() {
  router.replace({ name: 'KnowledgeDocument', params: { id: currentKnowledgeId.value } })
}
</script>

<template>
  <div class="flex flex-1 flex-col overflow-hidden">
    <ul class="mx-auto my-10 flex w-[870px] shrink-0 duration-500 ease-in">
      <li
        v-for="(stepItem, index) in stepList"
        :key="stepItem.stepId"
        class="relative flex flex-1 shrink-0 flex-col items-center justify-center"
      >
        <div
          v-show="stepItem.stepId !== 1"
          class="absolute left-0 top-[24px] w-[calc((100%-48px)/2)] border-t"
          :class="[currentStepId >= stepItem.stepId ? 'border-[#9EA3FF]' : 'border-inactive-border-color']"
        />
        <div class="flex flex-col items-center justify-center">
          <div
            class="relative mb-3 flex h-12 w-12 items-center justify-center rounded-full border text-lg"
            :class="{
              'border-[#6F77FF] bg-[#6F77FF]': stepItem.stepId === currentStepId,
              'border-inactive-border-color text-gray-font-color': stepItem.stepId > currentStepId,
              'bg-[#9ea3ff]': stepItem.stepId < currentStepId,
            }"
          >
            <span
              v-show="currentStepId <= stepItem.stepId"
              class="select-none text-xl"
              :class="stepItem.stepId === currentStepId ? 'text-white' : 'text-gray-font-color'"
            >
              {{ index + 1 }}
            </span>
            <Check v-show="currentStepId > stepItem.stepId" theme="outline" size="24" fill="#fff" :stroke-width="3" />
          </div>

          <span
            class="text-base"
            :class="[currentStepId === stepItem.stepId ? 'text-theme-color' : 'text-gray-font-color']"
          >
            {{ stepItem.title }}
          </span>
        </div>

        <div
          v-show="index < stepList.length - 1"
          class="absolute right-0 top-[24px] w-[calc((100%-48px)/2)] border-t"
          :class="[currentStepId > stepItem.stepId ? 'border-[#9EA3FF]' : 'border-inactive-border-color']"
        />
      </li>
    </ul>

    <div class="mx-10 flex-1 overflow-hidden">
      <NScrollbar class="max-h-full! px-10">
        <div v-show="currentStepId === 1">
          <UploadFile @next="handleToDataProcess" />
        </div>

        <div v-if="currentStepId === 2">
          <DataSetting :kd-ids="currentKdIdList" @confirm="handleToKnowledgeList" />
        </div>
      </NScrollbar>
    </div>
  </div>
</template>
