<template>
  <div class="question-container">
    <!-- 顶部横幅 -->
    <div class="question-banner">
      <h1>{{ $t('questionPage["bannerTitle"]') }}</h1>
      <p>{{ $t('questionPage["bannerDesc"]') }}</p>

      <!-- 搜索框 -->
      <div class="question__search-box">
        <input
          type="text"
          v-model="searchQuery"
          :placeholder="$t(`questionPage['bannerSearchPlaceholder']`)"
          @keyup.enter="searchQuestions"
        />
        <button @click="searchQuestions">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
            />
          </svg>
          {{ $t(`questionPage['bannerSearchBtn']`) }}
        </button>
      </div>
    </div>

    <!-- 主要内容区--移动端 -->
    <section class="width-1200 question-main-768">
      <div class="question-main__container question-main__container-768">
        <!-- 问题列表&内容 -->
        <div class="question-content">
          <template v-if="!currentQuestion">
            <!-- 搜索结果列表 -->
            <div v-if="searchResults.length > 0" class="search-results question-list">
              <h2>
                <span style="flex: 1; padding-right: 16px; padding-right: 1rem; line-height: 1.3">{{
                  $t('questionPage["searchResultTitle"]', { count: searchResults.length })
                }}</span>
                <div class="category-menu-btn" @click="showCategoryDrawer">
                  <span>{{ $t('questionPage["questionCategoryMenuBtn"]') }}</span>
                  <img src="@/public/images/icons/menu_icon.png" alt="" />
                </div>
              </h2>
              <div
                v-for="item in searchResults"
                :key="item.id"
                class="question-item"
                @click="showQuestionDetail(item)"
              >
                <div class="question-title">
                  {{ item.title }}
                </div>
                <div class="question-preview" v-html="item.content"></div>
              </div>
            </div>

            <!-- 问题列表 -->
            <div v-else class="question-list">
              <h2>
                <span style="flex: 1; padding-right: 16px; padding-right: 1rem; line-height: 1.3">{{
                  activeCategoryInfo ? activeCategoryInfo.name : ''
                }}</span>
                <div class="category-menu-btn" @click="showCategoryDrawer">
                  <span>{{ $t('questionPage["questionCategoryMenuBtn"]') }}</span>
                  <img src="@/public/images/icons/menu_icon.png" alt="" />
                </div>
              </h2>

              <template v-if="activeCategoryInfo">
                <div
                  v-for="(question, index) in activeCategoryInfo.lists"
                  :key="index"
                  class="question-item"
                  @click="showQuestionDetail(question)"
                >
                  <div class="question-title">
                    {{ question.title }}
                    <!-- <div v-if="question.isHot" class="question-tag hot-tag">
                      {{ $t('questionPage["questionTagHot"]') }}
                    </div>
                    <div v-if="question.isNew" class="question-tag new-tag">
                      {{ $t('questionPage["questionTagNew"]') }}
                    </div> -->
                  </div>
                  <div class="question-preview" v-html="question.content"></div>
                </div>
              </template>
            </div>
          </template>

          <!-- 问题详情 -->
          <div v-else class="question-detail">
            <div class="detail-footer">
              <button class="back-btn" @click="backToList">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  viewBox="0 0 16 16"
                >
                  <path
                    fill-rule="evenodd"
                    d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                  />
                </svg>
                {{ $t('questionPage["questionDetailBackbtn"]') }}
              </button>

              <!-- <div class="feedback">
                <span>这篇回答对您有帮助吗？</span>
                <button class="feedback-btn yes">有帮助</button>
                <button class="feedback-btn no">没帮助</button>
              </div> -->
            </div>

            <div class="detail-header">
              <h2>{{ currentQuestion.title }}</h2>
            </div>

            <div class="detail-content" v-html="currentQuestion.content"></div>
          </div>
        </div>

        <div class="loading-box" v-show="isLoading">
          <a-spin :spinning="isLoading" size="large" />
        </div>
      </div>

      <!-- 分类导航侧边抽屉 -->
      <a-drawer
        :open="visible"
        :closable="false"
        :title="$t(`questionPage['questionDrawerTitle']`)"
        placement="right"
        width="70%"
        getContainer=".question-main__container-768"
        class=""
        @close="closeCategoryDrawer"
      >
        <div class="question-sidebar">
          <div
            v-for="category in categoryList"
            :key="category.id"
            class="category-item"
            :class="{ active: activeCategoryId === category.id }"
            @click="changeCategory(category)"
          >
            <label class="category-item__name">{{ category.name }}</label>
            <span class="count">{{
              $t('questionPage["questionCategoryCountTxt"]', { count: category.lists.length })
            }}</span>
          </div>
        </div>
      </a-drawer>
    </section>

    <!-- 主要内容区 -->
    <div class="question-main__container question-main-normal width-1200">
      <!-- 左侧分类导航 -->
      <div class="question-sidebar">
        <a-skeleton-button
          :active="true"
          size="large"
          shape="default"
          block="true"
          v-if="isLoading"
        />
        <template v-else>
          <div
            v-for="category in categoryList"
            :key="category.id"
            class="category-item"
            :class="{ active: activeCategoryId === category.id }"
            @click="changeCategory(category)"
          >
            <label class="category-item__name">{{ category.name }}</label>
            <span class="count">{{
              $t('questionPage["questionCategoryCountTxt"]', { count: category.lists.length })
            }}</span>
          </div>
        </template>
      </div>

      <!-- 右侧内容 -->
      <div class="question-content">
        <!-- 问题列表 -->
        <template v-if="!currentQuestion">
          <!-- 搜索结果列表 -->
          <div v-if="searchResults.length > 0" class="search-results">
            <h3>{{ $t('questionPage["searchResultTitle"]', { count: searchResults.length }) }}</h3>
            <div
              v-for="item in searchResults"
              :key="item.id"
              class="question-item"
              @click="showQuestionDetail(item)"
            >
              {{ item.title }}
            </div>
          </div>

          <!-- 问题列表 -->
          <div v-else class="question-list">
            <h2>{{ activeCategoryInfo ? activeCategoryInfo.name : '' }}</h2>

            <template v-if="activeCategoryInfo">
              <div
                v-for="question in activeCategoryInfo.lists"
                :key="question.id"
                class="question-item"
                @click="showQuestionDetail(question)"
              >
                <div class="question-title">
                  {{ question.title }}
                  <!-- <div v-if="question.isHot" class="question-tag hot-tag">
                    {{ $t('questionPage["questionTagHot"]') }}
                  </div>
                  <div v-if="question.isNew" class="question-tag new-tag">
                    {{ $t('questionPage["questionTagNew"]') }}
                  </div> -->
                </div>
                <div class="question-preview" v-html="question.content"></div>
              </div>
            </template>
          </div>
        </template>

        <!-- 问题详情 -->
        <div v-else class="question-detail">
          <div class="detail-header">
            <h2>{{ currentQuestion.title }}</h2>
          </div>

          <div class="detail-content" v-html="currentQuestion.content"></div>

          <div class="detail-footer">
            <button class="back-btn" @click="backToList">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                viewBox="0 0 16 16"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                />
              </svg>
              {{ $t('questionPage["questionDetailBackbtn"]') }}
            </button>

            <!-- <div class="feedback">
              <span>这篇回答对您有帮助吗？</span>
              <button class="feedback-btn yes">有帮助</button>
              <button class="feedback-btn no">没帮助</button>
            </div> -->
          </div>
        </div>

        <div class="loading-box" v-show="isLoading">
          <a-spin :spinning="isLoading" size="large" />
        </div>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="contact-section width-1200">
      <h3>{{ $t('questionPage["contactTitle"]') }}</h3>
      <p>{{ $t('questionPage["contactDesc"]') }}</p>
      <div class="contact-methods">
        <div class="contact-method">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"
            />
          </svg>
          <div>
            <strong>{{ $t('questionPage["contactForPhoneTitle"]') }}</strong>
            <p>+852-30623063</p>
            <p>{{ $t('questionPage["contactForPhoneWorkTime"]') }}</p>
          </div>
        </div>

        <div class="contact-method">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"
            />
          </svg>
          <div>
            <strong>{{ $t('questionPage["contactForEmailTitle"]') }}</strong>
            <p>vavabuy@163.com</p>
            <p>{{ $t('questionPage["contactForEmailWorkTime"]') }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import useSystemStore from '@/stores/useSystemStore'
import useData from './hooks/useData'

const { t } = useI18n()
const systemStore = useSystemStore()
const { locale } = storeToRefs(systemStore)

const {
  categoryList,
  isLoading,
  activeCategoryId,
  activeCategoryInfo,
  currentQuestion,
  searchQuery,
  searchResults,
  changeCategory,
  showQuestionDetail,
  searchQuestions,
  backToList,
} = useData()

const visible = ref<boolean>(false)

const showCategoryDrawer = () => {
  visible.value = true
}

const closeCategoryDrawer = () => {
  visible.value = false
}

// 格式化日期
const formatDate = (dateString: string, lang: string) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(dateString).toLocaleDateString(lang, options as Object)
}
</script>

<style scoped lang="less">
.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  margin: 0 auto 50px;
  margin: 0 auto 3.125rem;
}

.loading-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.width-1200 {
  padding: 0 15px 60px;
  padding: 0 0.9375rem 3.75rem;
}

.question-banner {
  width: 100%;
  background: rgba(0, 0, 0, 1);
  color: white;
  padding: 40px 15px;
  padding: 2.5rem 0.9375rem;
  text-align: center;
  margin-bottom: 30px;
  margin-bottom: 1.875rem;

  h1 {
    font-size: 40px;
    font-size: 2.5rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
  }

  p {
    font-size: 1.125rem;
    margin-bottom: 25px;
    margin-bottom: 1.5625rem;
    opacity: 0.9;
  }
}

.question__search-box {
  width: 100%;
  max-width: 600px;
  max-width: 37.5rem;
  margin: 0 auto;
  display: flex;

  input {
    flex: 1;
    padding: 12px 15px;
    padding: 0.75rem 0.9375rem;
    border: none;
    border-radius: 4px 0 0 4px;
    border-radius: 0.25rem 0 0 0.25rem;
    font-size: 1rem;
    color: #333;
  }

  button {
    padding: 0 20px;
    padding: 0 1.25rem;
    background: var(--color-active);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    gap: 0.5rem;
    font-weight: 500;
    letter-spacing: 2px;
  }
}

.question-main__container {
  display: flex;
  gap: 30px;
  gap: 1.875rem;

  .question-sidebar {
    min-width: 250px;
    min-width: 15.625rem;
    max-width: 300px;
    max-width: 18.75rem;
    flex-shrink: 0;

    .category-item {
      flex: 1;
      padding: 12px 15px;
      padding: 0.75rem 0.9375rem;
      border-left: 4px solid transparent;
      border-left: 0.25rem solid transparent;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      margin-bottom: 0.3125rem;
      border-radius: 4px;
      border-radius: 0.25rem;
    }

    .category-item:hover {
      background: #f5f5f5;
    }

    .category-item.active {
      border-left-color: var(--color-active);
      background: #e3f2fd;
      // font-weight: bold;
    }

    .category-item__name {
      flex: 1;
      padding-right: 12px;
      padding-right: 0.75rem;
      /*  white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; */
    }

    .count {
      min-width: 64px;
      min-width: 4rem;
      color: #757575;
      font-size: 0.9rem;
    }

    .category-item.active .count {
      color: var(--color-active);
    }
  }

  .question-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    border-radius: 0.5rem;
    padding: 18px;
    padding: 1.125rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .search-results {
    h3 {
      font-size: 20px;
      font-size: 1.25rem;
      margin-bottom: 15px;
      margin-bottom: 0.9375rem;
      color: var(--color-active);
    }
  }

  .question-list {
    h2 {
      margin-bottom: 20px;
      margin-bottom: 1.25rem;
      padding: 10px 0;
      padding: 0.625rem 0;
      border-bottom: 1px solid #eee;
      font-size: 24px;
      font-size: 1.5rem;
    }
  }

  .question-item {
    padding: 15px;
    padding: 0.9375rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
  }

  .question-item:hover {
    background: #f9f9f9;
  }

  .question-title {
    font-weight: bold;
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    gap: 0.625rem;
  }

  .question-preview {
    max-height: 24px;
    max-height: 1.5rem;
    color: #666;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .question-tag {
    height: 20px;
    padding: 0 10px;
    line-height: 20px;
    color: white;
    font-size: 0.75rem;
    border-radius: 12px;
    border-radius: 0.75rem;
  }

  .hot-tag {
    background: #ff5722;
  }

  .new-tag {
    background: #4caf50;
  }

  .question-detail {
    .detail-header {
      margin-bottom: 24px;
      margin-bottom: 1.5rem;
      padding-bottom: 15px;
      padding-bottom: 0.9375rem;
      border-bottom: 1px solid #eee;

      h2 {
        font-size: 28px;
        font-size: 1.75rem;
        margin-bottom: 10px;
        margin-bottom: 0.625rem;
        text-align: center;
      }
    }

    .detail-footer {
      margin-top: 36px;
      margin-top: 2.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      padding-top: 1.25rem;
      border-top: 1px solid #eee;

      .back-btn {
        background: #f5f5f5;
        border: none;
        padding: 8px 15px;
        padding: 0.5rem 0.9375rem;
        border-radius: 4px;
        border-radius: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        gap: 0.3125rem;
      }

      .back-btn:hover {
        background: #eee;
      }

      /* .feedback {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .feedback span {
        color: #757575;
      }

      .feedback-btn {
        padding: 5px 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
        cursor: pointer;
      }

      .feedback-btn.yes {
        background: #e8f5e9;
        color: #2e7d32;
      }

      .feedback-btn.no {
        background: #ffebee;
        color: #c62828;
      } */
    }
  }
}

.question-main-normal {
  position: relative;
  min-height: 370px;
}

.question-main-768 {
  position: relative;
  display: none;
  padding-bottom: 0;
  min-height: 320px;
}

.question-main__container-768 {
  flex-direction: column;
  align-items: center;

  .question-sidebar {
    width: 100%;
  }

  .question-content {
    width: 100%;
    border-radius: 0px;
    border-radius: 0rem;
    padding: 0px 0;
    padding: 0rem 0;
    box-shadow: none;
  }

  .question-list {
    h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-items: flex-start;
      margin-bottom: 8px;
      margin-bottom: 0.5rem;
      color: var(--color-active);
      font-size: 18px;
      font-size: 1.125rem;
    }

    .category-menu-btn {
      min-width: 60px;
      min-width: 3.75rem;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 16px;
      font-size: 1rem;
      cursor: pointer;
    }

    .category-menu-btn img {
      width: 28px;
      width: 1.75rem;
      height: 28px;
      height: 1.75rem;
      margin-left: 6px;
      margin-left: 0.375rem;
    }
  }

  :deep(.ant-drawer-body) {
    padding: 15px 12px;
    padding: 0.9375rem 0.75rem;
  }

  .question-detail {
    .detail-header {
      margin-bottom: 24px;
      margin-bottom: 1.5rem;
      padding-bottom: 15px;
      padding-bottom: 0.9375rem;
      border-bottom: 1px solid #eee;

      h2 {
        padding-top: 15px;
        padding-top: 0.9375rem;
        margin-bottom: 4px;
        margin-bottom: 0.25rem;
        font-size: 24px;
        font-size: 1.5rem;
      }
    }

    .detail-footer {
      margin-top: 0;
      padding-top: 0;
      border-bottom: 1px solid #eee;
      border-top: 0;

      .back-btn {
        margin: 12px 0;
        margin: 0.75rem 0;
        color: var(--color-active);
        background-color: rgba(0, 0, 0, 0.02125);
      }
    }
  }
}

.contact-section {
  margin-top: 32px;
  margin-top: 2rem;
  text-align: center;
  padding: 30px;
  padding: 1.875rem;
  background: #f9f9f9;
  // border-radius: 8px;
  // border-radius: 0.5rem;

  h3 {
    font-size: 24px;
    font-size: 1.5rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
  }

  p {
    color: #666;
    margin-bottom: 25px;
    margin-bottom: 1.5625rem;
  }

  .contact-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    gap: 1.875rem;
    flex-wrap: wrap;
  }

  .contact-method {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    gap: 0.9375rem;
    text-align: left;
    max-width: 300px;
    max-width: 18.75rem;
    padding: 15px;
    padding: 0.9375rem;
    background: white;
    border-radius: 8px;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    svg {
      color: var(--color-active);
      margin-top: 3px;
    }

    strong {
      display: block;
      margin-bottom: 5px;
    }

    p {
      margin: 3px 0;
      font-size: 0.9375rem;
      color: #666;
    }
  }
}
</style>

<style>
.question-sidebar .ant-skeleton.ant-skeleton-element,
.question-sidebar .ant-skeleton.ant-skeleton-element .ant-skeleton-button {
  height: 100%;
}

/* 富文本内容样式 */
.detail-content h3,
.detail-content h4 {
  margin: 25px 0 15px;
  margin: 1.5625rem 0 0.9375rem;
  color: #333;
}

.detail-content h3 {
  font-size: 1.5rem;
}

.detail-content h4 {
  font-size: 1.25rem;
}

.detail-content p {
  margin: 15px 0;
  margin: 0.9375rem 0;
  line-height: 1.6;
}

.detail-content ol,
.detail-content ul {
  margin: 15px 0;
  margin: 0.9375rem 0;
  padding-left: 30px;
  padding-left: 1.875rem;
}

.detail-content li {
  margin: 0.5rem 0;
}

.question-content img,
.detail-content img {
  width: 100%;
}

.payment-method {
  margin: 20px 0;
  margin: 1.25rem 0;
}

.status {
  display: inline-block;
  padding: 2px 6px;
  padding: 2px 0.375rem;
  border-radius: 3px;
  font-size: 0.875rem;
}

.status.waiting {
  background: #fff3e0;
  color: #e65100;
}

.status.paid {
  background: #e3f2fd;
  color: #1565c0;
}

.status.shipped {
  background: #e8f5e9;
  color: #2e7d32;
}

.status.completed {
  background: #f1f8e9;
  color: #558b2f;
}

.status.cancelled {
  background: #ffebee;
  color: #c62828;
}
</style>


<style lang="less" scoped>
@import url('./css/styles@1200.less');
@import url('./css/styles@1024.less');
@import url('./css/styles@768.less');
</style>