<template>
  <div class="question-list">
    <el-collapse v-model="activeNames" class="question-collapse">
      <el-collapse-item
        v-for="question in questions"
        :id="`q-${question.id}`"
        :key="question.id"
        :title="question.title"
        :name="question.id"
      >
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="html-typography" v-html="question.content || ''" />
        <!-- <div v-if="!hydrated" v-html="question.content" /> -->
        <!-- <div v-else> -->
        <!--   <html-renderer -->
        <!--     class="html-typography" -->
        <!--     :html="question.content || ''" -->
        <!--   /> -->
        <!-- </div> -->
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    questions: {
      type: Array as PropType<ProductQuestionView[]>,
      default: () => [],
    },
  });
  const route = useRoute();

  const activeNames = ref<(string | number)[]>([]);

  const hydrated = ref(false);

  // 当路由变化（包括初次挂载）时，检查是否需要聚焦
  watch(
    () => route.query.focus,
    async (focusId) => {
      if (!focusId) return;
      if (!import.meta.client) return;

      // 确保渲染完成后再操作 DOM
      await nextTick();

      const target = props.questions.find((q) => q.id === focusId);
      if (!target) return;

      // 展开目标项
      activeNames.value = [target.id];

      await nextTick();
      await new Promise((resolve) => setTimeout(resolve, 100)); // 等待动画完成

      // 平滑滚动到对应位置
      // const el = document.querySelector(`#q-${target.id}`);
      // el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      setTimeout(() => {
        const el = document.querySelector(`#q-${target.id}`);
        el?.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
        });
      }, 200); // 与 el-collapse 的 transition 时间匹配
    },
    { immediate: true }
  );

  onMounted(() => {
    hydrated.value = true;
  });
</script>

<style scoped>
  .question-list {
    width: 100%;
  }

  .question-collapse {
    border: none;
  }

  .question-collapse :deep(.el-collapse-item) {
    margin-bottom: 1rem;
    border-radius: 8px;
  }

  .question-collapse :deep(.el-collapse-item__header) {
    font-size: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f5f7fa;

    transition: all 0.3s ease;

    &.is-active {
      background-color: #e1e6eb;
      color: var(--el-color-primary);
    }
  }

  .question-collapse :deep(.el-collapse-item__wrap) {
    border: none;
  }

  .question-collapse :deep(.el-collapse-item__content) {
    padding: 1rem;
    font-size: 0.9rem;
  }
</style>
