<template>
  <view class="container">
    <swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="onSwiperChange">
      <swiper-item indicator-active-color="#347053" v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item">
          <u-image height="300" shape="circle" :src="item.image" ></u-image>
          <h2 style="margin-top: 150rpx">{{ item.title }}</h2>
          <text>{{ item.text }}</text>
          <!-- 新增按钮 -->
          <view class="start-btn" v-if="item.isShow" @click="goNewChat">GET STARTED!</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        {
          image: '../../static/imgs/first1.png',
          text: 'Request a ride get picked upby a\n' +
              'nearbycommunitydriver',
          title: 'Request Ride',
          isShow:false
        },
        {
          image: '../../static/imgs/first2.png',
          text: 'Al Agents represent a paradigm\n' +
              'shift from passive Al to proactive,\n' +
              'tool-augmented systems',
          title: 'AI Agent',
          isShow:true
        }
      ]
    };
  },
  onShow() {
    console.log('进入了jjj');
  },
  methods: {
    onSwiperChange(e) {
      console.log('当前滑动的索引:', e.detail.current);
    },
    goNewChat() {
      //设置缓存
      uni.setStorageSync('isFirst', '1');
      uni.navigateTo({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

image {
  width: 100%;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

text {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
  text-align: center;
}

.start-btn {
  margin-top: 40rpx;
  padding: 20rpx 60rpx;
  background-color: #337151;
  color: #fff;
  font-size: 32rpx;
  border-radius: 40rpx;
  text-align: center;
  box-shadow: 0 4rpx 10rpx rgba(51, 113, 81, 0.3);
}
</style>
