
<template>
  <div class="flex flex-col w-full">
    <div class="box-border flex items-center justify-between p-15px mb-15px bg-gray-50 rounded-6px">
      <span class="text-16px font-500 text-gray-600 select-none">普通题目</span>
      <n-button
        type="primary"
        ghost
        :disabled="!currBookPage"
        @click="addTopic"
      >
        <template #icon>
          <icon-solar-question-circle-outline />
        </template>
        添加题目
      </n-button>
    </div>
    <div class="flex flex-col flex-1 w-full h-full max-h-full bg-gray-50 rounded-10px overflow-hidden">
      <n-scrollbar
        v-if="currBookPage && currBookPageLayout.length > 0"
        class="flex-1 w-full h-full max-h-full bg-gray-50 rounded-10px"
        content-style="height: auto; min-height: 100%"
      >
        <ul class="p-15px">
          <li v-for="(topicInfo, topicInfoIndex) in currBookPageLayout" :key="topicInfoIndex" class="mb-10px">
            <right-topic-item
              :topicInfo="topicInfo"
              :currBookPage="currBookPage"
              @editTopic="editTopic"
              @releaseTask="releaseTask"
              @addAnalysis="openAddAnalysisBubble"
            ></right-topic-item>
          </li>
        </ul>
      </n-scrollbar>
      <div v-else-if="!currBookPage" class="flex items-center justify-center h-auto min-h-full">
        <n-empty description="请在目录中选择页码" class="bg-white" />
      </div>
      <div v-else-if="currBookPageLayout.length <= 0" class="flex items-center justify-center h-auto min-h-full">
        <n-empty description="暂无数据" class="bg-white" />
      </div>
    </div>
    <add-topic-form-bubble ref="addTopicFormBubbleRef"></add-topic-form-bubble>
    <edit-info-bubble ref="editInfoBubbleRef"></edit-info-bubble>
    <release-task-bubble ref="releaseTaskBubbleRef"></release-task-bubble>
    <add-analysis-bubble ref="addAnalysisBubbleRef"></add-analysis-bubble>
  </div>
</template>

<script setup lang="ts">
  import { computed, defineProps, onMounted, useTemplateRef } from 'vue';
  import { NButton, NScrollbar, NEmpty, useMessage } from 'naive-ui';
  import IconSolarQuestionCircleOutline from '~icons/solar/question-circle-outline';
  import RightTopicItem from './components/right-topic-item.vue';
  import type { CurrBookPageAllInfo, TopicInfo } from '../../../../types';
  import AddTopicFormBubble from './components/add-topic-form-bubble.vue';
  import EditInfoBubble from './components/edit-info-bubble.vue';
  import type { BookReviewInput, QuestionFromInfo } from '@/service/api/book';
  import ReleaseTaskBubble from './components/release-task-bubble.vue';
  import { $mitt, open_book_topic_edit } from '@/utils/event-bus';
  import AddAnalysisBubble from './components/add-analysis-bubble.vue';

  const props = defineProps({
    /** 当前页码信息 */
    currBookPage: { type: Object as PropType<CurrBookPageAllInfo>, default: undefined },
  });

  const message = useMessage();

  onMounted(() => {
    $mitt.on(open_book_topic_edit, (data: any) => {
      const topicInfo = currBookPageLayout.value.find((item) => item.questionId === data!.questionId);
      topicInfo && editTopic(topicInfo);
    });
  });
  const addTopicFormBubbleRef = useTemplateRef('addTopicFormBubbleRef');
  const editInfoBubbleRef = useTemplateRef('editInfoBubbleRef');
  const releaseTaskBubbleRef = useTemplateRef('releaseTaskBubbleRef');
  const addAnalysisBubbleRef = useTemplateRef('addAnalysisBubbleRef');

  const currBookPageLayout = computed(() => {
    const list = props.currBookPage?.currBookPageData.layout || [];
    return list.filter((item) => item.question.type && item.question.type < 100);
  });

  /**
   * 新增题目
   */
  function addTopic(event: MouseEvent) {
    if (!props.currBookPage) {
      message.error('请先在目录中选择页码');
      return;
    }

    addTopicFormBubbleRef.value?.show({
      eventElement: event,
      currBookPage: props.currBookPage,
    });
  }

  function releaseTask(event: MouseEvent, releaseTaskData: BookReviewInput) {
    const currQuestion = props.currBookPage!.currBookPageData.questions.find((item) => item.id === releaseTaskData.id);
    if (currQuestion?.assign) {
      message.error('已发布任务，不能重复发布');
      return;
    }
    releaseTaskBubbleRef.value?.show({
      eventElement: event,
      releaseTaskData,
    });
  }

  /**
   * 编辑题目
   */
  function editTopic(topicInfo: TopicInfo) {
    const questionId = topicInfo.questionId;
    const questions = props.currBookPage!.currBookPageData.questions;
    const questionIndex = questions.findIndex((item) => item.id === questionId);

    if (props.currBookPage && questions && topicInfo && questionIndex >= 0) {
      editInfoBubbleRef.value?.show({
        questions,
        topicInfo,
        questionIndex,
        currBookPage: props.currBookPage,
      });
    }
  }

  function openAddAnalysisBubble(event: MouseEvent, questionFromInfo: QuestionFromInfo) {
    addAnalysisBubbleRef.value?.show({
      eventElement: event,
      questionFromInfo,
    });
  }
</script>

<style scoped></style>
