<template>
  <div class="right-topic-item w-full transition-all duration-300 hover:shadow-light">
    <div class="flex items-center justify-between p-3.5 pr-2.5 bg-white rounded-md">
      <div class="flex items-center">
        <div class="flex items-center justify-center mr-1.5 text-xs text-primary select-none">
          <span>{{ topicInfo.question.no }}</span>
        </div>
        <div class="flex items-center justify-center px-2 py-0.5 ml-1 text-10px font-normal leading-none text-primary select-none bg-primary-light border border-primary rounded-full">
          <span>{{ showType }}</span>
        </div>
      </div>
      <div class="flex items-center">
        <n-tooltip trigger="hover" placement="top">
          <template #trigger>
            <n-button
              type="primary"
              text
              class="ml-0.5 text-18px"
              @click="($event) => emit('edit-topic', $event, topicInfo)"
            >
              <template #icon><icon-solar-pen-2-linear /></template>
            </n-button>
          </template>
          编辑或修改信息
        </n-tooltip>
        <n-tooltip trigger="hover" placement="top">
          <template #trigger>
            <n-button
              type="success"
              text
              class="ml-0.5 text-18px"
              @click="addAnswer"
            >
              <template #icon><icon-solar-add-square-linear /></template>
            </n-button>
          </template>
          点击添加区域
        </n-tooltip>
        <n-tooltip trigger="hover" placement="top">
          <template #trigger>
            <n-button
              type="error"
              text
              class="ml-0.5 text-18px"
              @click="delTopic"
            >
              <template #icon><icon-solar-trash-bin-minimalistic-outline /></template>
            </n-button>
          </template>
          删除题目
        </n-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { PropType } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
import type { CurrBookPageAllInfo, TopicInfo } from '@/views/template/template-detail/types';
import { defAnswerInfo, topicType2List } from '@/views/template/template-detail/def-data';
import { delBookAreaAxios, updateBookPageLayoutAxios } from '@/service/api/book';

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

const emit = defineEmits<{
  /** 编辑题目 */
  (e: 'edit-topic', event: MouseEvent, topicInfo: TopicInfo): void;
}>();

const dialog = useDialog();
const message = useMessage();

const showType = computed(() => {
  return topicType2List.find((item) => item.value === props.topicInfo.question.type)?.label || '默认';
});

function delTopic() {
  const d = dialog.warning({
    title: '温馨提示',
    content: '删除后不可恢复，您确定删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      d.loading = true;
      try {
        await delBookAreaAxios(props.topicInfo.questionId);
        const copy = [...props.currBookPage!.currBookPageData.layout];
        const index = [...props.currBookPage!.currBookPageData.layout].findIndex((item) => item.questionId === props.topicInfo.questionId);
        if (index > -1) {
          copy.splice(index, 1);
          await updateBookPageLayoutAxios({
            id: props.currBookPage!.currBookPageData!.bookPageId!,
            layout: JSON.stringify(copy),
          });
          props.currBookPage!.currBookPageData.layout.splice(index, 1);
          message.success('删除成功');
        }
      } catch (error: any) {
        message.error(error.msg || '删除失败，-BD004');
      } finally {
        d.loading = false;
      }
    },
  });
}

/**
 * 添加答题区域
 */
function addAnswer() {
  const answerInfo = defAnswerInfo(props.topicInfo.question.x);
  if (Array.isArray(props.topicInfo?.answerList)) {
    // eslint-disable-next-line vue/no-mutating-props
    props.topicInfo?.answerList?.push(answerInfo);
  } else {
    // eslint-disable-next-line vue/no-mutating-props
    props.topicInfo!.answerList = [answerInfo];
  }
}
</script>

<style scoped>
.text-primary {
  color: var(--n-color-primary); /* Naive UI var or UnoCSS */
}
.bg-primary-light {
  background-color: rgba(24, 160, 88, 0.1); /* Approximate Naive UI primary light */
}
.border-primary {
  border-color: var(--n-color-primary);
}
</style>
