<template>
  <el-popover
    v-model:visible="visible"
    placement="top"
    trigger="hover"
    :popper-style="{ width: 'auto' }"
    :persistent="false"
  >
    <template #default
      ><StatusTable
        v-if="visible"
        :status="status"
        :statusMeta="statusMeta"
        :taskTypeMap="taskTypeMap"
        :stateMap="stateMap"
      ></StatusTable>
    </template>
    <template #reference>
      <el-text
        class="color-text-primary"
        v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED"
      >
        <el-icon class="color-success"><SuccessFilled /></el-icon>
        {{ stateMap[aggStatus.value](aggStatus.key) }}
      </el-text>
      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.FAILURE">
        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
        {{ stateMap[aggStatus.value](aggStatus.key) }}
      </el-text>
      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.STARTED">
        <el-icon class="is-loading color-primary"><Loading /></el-icon>
        {{ stateMap[aggStatus.value](aggStatus.key) }}
      </el-text>
      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.PENDING">
        <el-icon class="is-loading color-primary"><Loading /></el-icon>
        {{ stateMap[aggStatus.value](aggStatus.key) }}
      </el-text>
      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.REVOKE">
        <el-icon class="is-loading color-primary"><Loading /></el-icon>
        {{ stateMap[aggStatus.value](aggStatus.key) }}
      </el-text>
    </template>
  </el-popover>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { TaskType, State } from '@/utils/status'
import StatusTable from '@/views/document/component/StatusTable.vue'
import { t } from '@/locales'
const props = defineProps<{ status: string; statusMeta: any }>()
const visible = ref<boolean>(false)
const checkList: Array<string> = [
  State.REVOKE,
  State.STARTED,
  State.PENDING,
  State.FAILURE,
  State.REVOKED,
  State.SUCCESS,
]
const aggStatus = computed(() => {
  let obj = { key: 0, value: '' }
  for (const i in checkList) {
    const state = checkList[i]
    const index = props.status.indexOf(state)
    if (index > -1) {
      obj = { key: props.status.length - index, value: state }
      break
    }
  }
  return obj
})
const startedMap = {
  [TaskType.EMBEDDING]: t('views.document.fileStatus.EMBEDDING'),
  [TaskType.GENERATE_PROBLEM]: t('views.document.fileStatus.GENERATE'),
  [TaskType.SYNC]: t('views.document.fileStatus.SYNC'),
}
const taskTypeMap = {
  [TaskType.EMBEDDING]: t('views.knowledge.setting.vectorization'),
  [TaskType.GENERATE_PROBLEM]: t('views.document.generateQuestion.title'),
  [TaskType.SYNC]: t('views.knowledge.setting.sync'),
}
const stateMap: any = {
  [State.PENDING]: (type: number) => t('views.document.fileStatus.PENDING'),
  [State.STARTED]: (type: number) => startedMap[type],
  [State.REVOKE]: (type: number) => t('common.status.REVOKE'),
  [State.REVOKED]: (type: number) => t('common.status.success'),
  [State.FAILURE]: (type: number) => t('common.status.fail'),
  [State.SUCCESS]: (type: number) => t('common.status.success'),
}
</script>
<style lang="scss" scoped></style>
