<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Left } from '@icon-park/vue-next'
import UploadLocalDocument from './upload-local-document/index.vue'
import { fetchGetKnowledgeDetail, fetchUpdateKnowledgeInfo } from '@/apis/knowledge'
import EditKnowledgeModal, { KnowledgeFormDataInterface } from '../components/edit-knowledge-modal.vue'

const { t } = useI18n()

const router = useRouter()

const currentKnowledgeId = ref(0)
const uploadKnowledgeType = ref('')

const isShowEditKnowledgeModal = ref(false)
const updateKnowledgeInfoBtnLoading = ref(false)
const currentKnowledgeData = ref<KnowledgeFormDataInterface>({
  knowledgeName: '',
  desc: '',
})

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

  uploadKnowledgeType.value = router.currentRoute.value.params.type as string

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

  await handleGetKnowledgeDetail()
})

async function handleGetKnowledgeDetail() {
  const res = await fetchGetKnowledgeDetail<KnowledgeFormDataInterface>(currentKnowledgeId.value)

  currentKnowledgeData.value = res.data
}

function handleBackKnowledgeList() {
  router.back()
}

function handleShowEditKnowledgeModal() {
  isShowEditKnowledgeModal.value = true
}

async function handleUpdateKnowledgeInfo(knowledgeData: KnowledgeFormDataInterface) {
  updateKnowledgeInfoBtnLoading.value = true
  const res = await fetchUpdateKnowledgeInfo<KnowledgeFormDataInterface>({
    id: currentKnowledgeId.value,
    knowledgeName: knowledgeData.knowledgeName,
    desc: knowledgeData.desc,
  }).finally(() => (updateKnowledgeInfoBtnLoading.value = false))

  if (res.code === 0) {
    window.$message.success(t('common_module.save_success_message'))
    currentKnowledgeData.value = res.data
    isShowEditKnowledgeModal.value = false
  }
}
</script>

<template>
  <div class="flex h-full w-full flex-col overflow-hidden">
    <div class="my-3 flex h-8 items-center">
      <Left theme="outline" size="20" fill="#333" class="cursor-pointer" @click="handleBackKnowledgeList" />

      <div class="flex items-center">
        <span class="text-font-color ml-[2px] h-8 select-none text-lg leading-[30px]">
          {{ currentKnowledgeData.knowledgeName }}
        </span>
        <i
          class="iconfont icon-edit text-gray-font-color ml-[5px] cursor-pointer text-[15px] leading-none"
          @click="handleShowEditKnowledgeModal"
        />
      </div>
    </div>

    <UploadLocalDocument v-if="uploadKnowledgeType === 'text-local-document'" />

    <EditKnowledgeModal
      v-model:is-show-modal="isShowEditKnowledgeModal"
      :btn-loading="updateKnowledgeInfoBtnLoading"
      :knowledge-data="currentKnowledgeData"
      @confirm="handleUpdateKnowledgeInfo"
    />
  </div>
</template>
