<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '深泉教育',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <Tabs v-model:modelValue="currentIndex" :tabs="tabs"></Tabs>
    <swiper :current="currentIndex" class="flex-1" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <image :src="item.image" mode="scaleToFill" class="w-full h-full" />
      </swiper-item>
    </swiper>
    <ShareButtonGroup
      phone-number="18516500555"
      friend-image="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/tianjiawx-liuxue.jpg"
    />
  </view>
</template>

<script lang="ts" setup>
import Tabs from '@/components/tab/Tabs.vue'
import ShareButtonGroup from './components/ShareButtonGroup.vue'

const currentIndex = ref(0)

const tabs = [
  {
    title: '科廷大学',
    image: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/lx-banner1.png',
  },
  {
    title: '伦敦大学',
    image: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/lx-banner2.png',
  },
  {
    title: '更多大学',
    image: 'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/lx-banner3.png',
  },
]

const handleSwiperChange = (val: { detail: { current: number } }) => {
  currentIndex.value = val.detail.current
}
</script>
