<template>
  <view class="page">
    <view class="hero">
      <text class="hero-title">实习推荐</text>
      <text class="hero-sub">热门实习岗位，点击直接模拟面试</text>
    </view>

    <view class="body">
      <view class="section-title">🔥 热门实习</view>
      <view class="position-list card">
        <view class="pos-item" v-for="(item, idx) in positions" :key="idx" @click="startInterview(item)">
          <view class="pos-left">
            <view class="pos-rank">{{ idx + 1 }}</view>
            <view class="pos-body">
              <text class="pos-name">{{ item.name }}</text>
              <text class="pos-company">{{ item.company }}</text>
            </view>
          </view>
          <text class="pos-salary">{{ item.salary }}</text>
        </view>
      </view>

      <view class="empty" v-if="!loading && positions.length === 0">
        <text class="empty-text">暂无实习岗位数据</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '../../config'

const positions = ref([])
const loading = ref(true)

onMounted(async () => {
  try {
    const res = await uni.request({ url: api('/positions/hot'), method: 'GET' })
    if (res.statusCode === 200) positions.value = res.data || []
  } catch(e) { console.error(e) }
  finally { loading.value = false }
})

const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/interview?position=${encodeURIComponent(pos.name)}` })
</script>

<style scoped>
.page { min-height: 100vh; background: var(--color-bg); }
.hero { background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%); padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx; }
.hero-title { font-size: 40rpx; font-weight: 700; color: #FFFFFF; display: block; }
.hero-sub { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 8rpx; display: block; }
.body { padding: 32rpx; margin-top: -40rpx; }
.section-title { font-size: 28rpx; font-weight: 600; color: var(--color-text); margin-bottom: 16rpx; }
.position-list { border-radius: var(--radius-lg); overflow: hidden; }
.pos-item { padding: 24rpx 28rpx; border-bottom: 1rpx solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.pos-item:active { background: #F9FAFB; }
.pos-item:last-child { border-bottom: none; }
.pos-left { display: flex; align-items: center; gap: 16rpx; }
.pos-rank { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 22rpx; font-weight: 700; color: var(--color-primary); flex-shrink: 0; }
.pos-body { display: flex; flex-direction: column; }
.pos-name { font-size: 28rpx; font-weight: 600; color: var(--color-text); }
.pos-company { font-size: 22rpx; color: var(--color-text-tertiary); margin-top: 4rpx; }
.pos-salary { font-size: 24rpx; color: var(--color-primary); font-weight: 600; }
.empty { display: flex; justify-content: center; padding: 60rpx 0; }
.empty-text { font-size: 26rpx; color: var(--color-text-tertiary); }
</style>
