<template>
  <div class="help-center-page">
    <div class="nav-bar">
      <div class="nav-left" @click="goBack">
        <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">帮助中心</div>
      <div class="nav-right"></div>
    </div>

    <div class="content">

      <div class="section" v-for="(section, index) in listData" :key="index">
        <h2 class="section-title">{{ section.title }}</h2>

        <div class="card-list">
          <div
            class="list-item"
            v-for="(item, idx) in section.items"
            :key="idx"
            @click="handleJump(item)"
          >
            <div class="item-icon">
              <svg viewBox="0 0 1024 1024" width="12" height="12">
                 <path d="M340.864 149.312a29.12 29.12 0 0 1 41.728 0L737.28 504.256a29.12 29.12 0 0 1 0 41.728L382.592 900.928a29.12 29.12 0 0 1-41.728 0 29.12 29.12 0 0 1 0-41.728L674.688 525.12 340.864 191.04a29.12 29.12 0 0 1 0-41.728z" fill="#666"/>
              </svg>
            </div>
            <div class="item-text">{{ item.text }}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 模拟数据结构
const listData = ref([
  {
    title: '常见问题',
    items: [
      { id: 1, text: '常见问题文字描述内容', link: '/help/detail' },
      { id: 2, text: '常见问题文字描述内容常见问题文字描述内容常见问题文字描述内容', link: '/help/detail' },
      { id: 3, text: '常见问题文字描述内容常见问题文字描述内容', link: '/help/detail' },
      { id: 4, text: '常见问题文字描述内容常见问题文字描述内容常见问题文字描述内容', link: '/help/detail' },
    ]
  },
  {
    title: '交易指南',
    items: [
      { id: 5, text: '交易智能文字描述内容交易智能文字描述内容', link: '/trade/guide' },
      { id: 6, text: '交易智能文字描述内容交易智能文字描述内容交易智能文字描述内容', link: '/trade/guide' },
      { id: 7, text: '交易智能文字描述内容', link: '/trade/guide' },
      { id: 8, text: '交易智能文字描述内容交易智能文字描述内容交易智能文字描述内容', link: '/trade/guide' }
    ]
  }
]);

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转详情页
const handleJump = (item) => {
  console.log('点击了:', item.text);

  // 方式1：带参数跳转
  router.push({
    path: '/help/detail', // 请替换为你实际的路由地址
    query: { id: item.id,title: item.text }
  });

  // 方式2：如果是动态路由 /help/:id
  // router.push(`/help/${item.id}`);
};
</script>

<style scoped>
/* 基础容器 */
.help-center-page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

/* 顶部导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px; /* 移动端标准导航高度 */
  padding: 0 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.nav-left, .nav-right {
  width: 24px; /* 占位，保证标题居中 */
  display: flex;
  align-items: center;
}

/* 内容区域 */
.content {
  padding: 0 20px; /* 两侧留白 */
}

.section {
  margin-top: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* 列表项样式 */
.list-item {
  display: flex;
  align-items: flex-start; /* 顶部对齐，防止多行文字导致图标居中 */
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0; /* 细分割线 */
  cursor: pointer;
}

.list-item:active {
  background-color: #f9f9f9; /* 点击反馈 */
}

/* 左侧小箭头图标 */
.item-icon {
  margin-right: 10px;
  margin-top: 3px; /* 微调：让箭头跟第一行文字对齐 */
  display: flex;
  align-items: center;
}

/* 文字样式 */
.item-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5; /* 增加行高，多行阅读更舒适 */
  text-align: justify; /* 两端对齐，看起来更整齐 */
  flex: 1; /* 占满剩余空间 */
}
</style>