<template>
  <view class="page safe-bottom">
    <view class="nav-title">球队百科</view>
    <view class="search-box card">
      <input v-model="keyword" placeholder="搜索球队、外号或三字码" confirm-type="search" @confirm="loadTeams" />
      <button class="search-btn" @tap="loadTeams">搜索</button>
    </view>

    <view class="team-list" v-if="teams.length">
      <view class="team-card card" v-for="team in teams" :key="team.id" @tap="openTeam(team.id)">
        <view class="team-top">
          <view>
            <text class="team-name">{{ team.name_zh || team.name_en }}</text>
            <text class="team-code">{{ team.short_name }} · {{ team.group_code || '未分组' }}</text>
          </view>
          <text class="stars" v-if="team.world_cup_titles">{{ team.world_cup_titles }} 星</text>
        </view>
        <view class="nickname-row">
          <text class="tag" v-for="name in (team.nicknames || []).slice(0, 2)" :key="name">{{ name }}</text>
        </view>
        <text class="intro">{{ team.intro_short || team.best_result || '查看外号、历史成绩和球队梗图' }}</text>
      </view>
    </view>

    <view class="fallback" v-else>
      <view class="team-card card" v-for="team in fallbackTeams" :key="team.name_zh">
        <view class="team-top">
          <view>
            <text class="team-name">{{ team.name_zh }}</text>
            <text class="team-code">{{ team.short_name }}</text>
          </view>
          <text class="stars">{{ team.stars }}</text>
        </view>
        <view class="nickname-row">
          <text class="tag" v-for="name in team.nicknames" :key="name">{{ name }}</text>
        </view>
        <text class="intro">{{ team.copy }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getTeams } from '@/api/worldcup'

const keyword = ref('')
const teams = ref([])

const fallbackTeams = [
  { name_zh: '巴西', short_name: 'BRA', stars: '5 星', nicknames: ['五星巴西', '桑巴军团'], copy: '五次世界杯冠军，进攻足球的世界级记忆点。' },
  { name_zh: '阿根廷', short_name: 'ARG', stars: '3 星', nicknames: ['潘帕斯雄鹰', '蓝白军团'], copy: '技术、速度与自由，是中文球迷熟悉的南美想象。' },
  { name_zh: '德国', short_name: 'GER', stars: '4 星', nicknames: ['德国战车'], copy: '纪律、力量和效率，是德国队最经典的传播标签。' }
]

onLoad(loadTeams)
onPullDownRefresh(async () => {
  await loadTeams()
  uni.stopPullDownRefresh()
})

async function loadTeams() {
  try {
    const res = await getTeams({ keyword: keyword.value })
    teams.value = res.data?.items || []
  } catch (e) {}
}

function openTeam(id) {
  uni.navigateTo({ url: `/pages/team-detail/index?id=${id}` })
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
  height: 82rpx;
  padding: 0 18rpx;
}

input {
  flex: 1;
  height: 82rpx;
  font-size: 27rpx;
}

.search-btn {
  width: 112rpx;
  height: 56rpx;
  border-radius: 8rpx;
  color: #ffffff;
  background: #0b6b53;
  font-size: 24rpx;
}

.team-list,
.fallback {
  margin-top: 24rpx;
}

.team-card {
  padding: 24rpx;
  margin-bottom: 18rpx;
}

.team-top {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
}

.team-name {
  display: block;
  font-size: 34rpx;
  font-weight: 900;
}

.team-code {
  display: block;
  margin-top: 8rpx;
  color: #66736d;
  font-size: 23rpx;
}

.stars {
  color: #c8493a;
  font-size: 28rpx;
  font-weight: 900;
}

.nickname-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 18rpx;
}

.intro {
  display: block;
  margin-top: 18rpx;
  color: #66736d;
  font-size: 25rpx;
  line-height: 1.45;
}
</style>

