<template>
  <div class="product-detail">
    <el-tabs v-model="activeName" class="product-tabs" stretch>
      <el-tab-pane :label="$t('product-tab.details')" name="details">
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div v-if="!hydrated" v-html="product.description || ''" />
        <div v-else>
          <html-renderer
            class="html-typography"
            :html="product.description || ''"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('product-tab.specs')" name="specs">
        <spec-table :data="product.specs" />
      </el-tab-pane>
      <el-tab-pane :label="$t('product-tab.faq')" name="faq">
        <question-list :questions="product.faqs" />
      </el-tab-pane>
      <el-tab-pane :label="$t('product-tab.documents')" name="documents">
        <document-list :documents="product.documents" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    product: {
      type: Object as PropType<ProductView>,
      required: true,
    },
  });

  const hydrated = ref(false);

  const activeName = ref('details'); // 默认选中概览标签

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

<style scoped>
  .product-tabs ::v-deep(.el-tabs__nav) {
    min-width: 30%;
    float: right;
  }

  .product-tabs ::v-deep(.el-tabs__content) {
    padding: 10px;
  }

  .product-detail h2 {
    color: var(--el-text-color-primary);
    margin: 0;
  }

  @media (max-width: 768px) {
    .product-tabs ::v-deep(.el-tabs__nav) {
      float: none;
      min-width: 100%;
    }
  }
</style>
