<template>
  <view
    class="home-page page2"
    :style="{
      backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-2.png)`,
    }"
  >
    <view class="logo">
      <image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
    </view>
    <!-- 内容 -->
    <view class="title"> 环节介绍 </view>
    <view class="desc">
      见证一滴牛奶华丽变身为奶粉的全过程， 了解高品质产品背后的科学知识
    </view>
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      :circular="true"
      previous-margin="90rpx"
      next-margin="90rpx"
      :current="current"
      @change="handleChange"
    >
      <swiper-item
        v-for="(item, index) in list"
        :key="index"
        style="position: relative"
      >
        <view class="swiper-item">
          <view
            class="swiper-item-box"
            :class="current === index ? 'swiper-item-active' : ''"
          >
            <video
              :src="item.url"
              autoplay
              :play-strategy="1"
              :enable-progress-gesture="false"
              loop
              :controls="false"
              object-fit="cover"
            ></video>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <!--  -->
    <view class="sub-title" style="margin-bottom: 26rpx">
      {{ list[current].title }}
    </view>
    <view class="desc" style="width: 450rpx; margin-top: 0; line-height: 36rpx">
      {{ list[current].desc }}
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入图片
import { baseUrl } from '@/reservation/config'

defineOptions({
  name: 'page2',
})

const current = ref(0)
const list = ref([
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_tour_01.mp4',
    title: '深入体验飞鹤品牌文化',
    desc: '了解飞鹤的愿景、缘起和腾飞',
  },
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_tour_02.mp4',
    title: '身临其境感受科技实力',
    desc: '参观智能工厂，国内首条乳铁蛋白生产线、研发实验室',
  },
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_tour_03.mp4',
    title: '寓教于乐的互动体验',
    desc: '显微镜观察实验、冰淇淋DIY、手工',
  },
])

const handleChange = (e) => {
  current.value = e.detail.current
  console.log(current.value)
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
