<template>
  <div class="recommend-section">
    <div class="tab-navigation">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <span>{{ tab.title }}</span>
      </div>
      <button class="view-all" @click="viewAll">
        <span>查看全部</span>
        <span class="icon-right">›</span>
      </button>
    </div>

    <!-- 内容区域 -->
    <recommend-list />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentTab = ref(0)
const tabs = ref([
  { title: '推荐图纸', type: 'drawings' },
  { title: '推荐模型', type: 'models' },
  { title: '推荐文本', type: 'documents' },
])

function switchTab(index: number) {
  currentTab.value = index
}

function viewAll() {
  const type = tabs.value[currentTab.value].type
  router.push(`/mobile/${type}/list`)
}
</script>

<style lang="scss" scoped>
.recommend-section {
  //   padding: 0 20rpx;
  //   margin: 30rpx 0 50rpx;
}

.tab-navigation {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.tab-item {
  padding: 8rpx 0;
  margin-right: 40rpx;
  font-size: 29rpx;
  color: #333;
  position: relative;
  transition: all 0.3s ease;

  &.active {
    color: #2970ff;
    position: relative;

    &::after {
      content: "";
      background-image: url("@/static/images/bg-yy.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 0rpx;
      left: 0;
      width: 100%;
      height: 8px;
    }
  }
}

.view-all {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
}
.view-all .icon-right {
  margin-left: 4rpx;
  font-size: 20rpx;
}
</style>
