import { Component } from '@angular/core';
import Swiper from 'swiper';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
 
})
export class Tab1Page {
  // 上方轮播图

  public attractions = [
    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点1' },
    { image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.4sCrXFdufaW6NLTTeTJFdQHaEq?w=229&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点2' },
    { image: "https://ts1.cn.mm.bing.net/th/id/R-C.90139666f8943b728df6af35d9e0f82a?rik=V2B9Csf%2be9hAdA&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f20141231%2f2014123116175167177807.jpg&ehk=AryhWxX8LTLpPs4rb31XISqXKyw0zFPNtxRenGZli8M%3d&risl=&pid=ImgRaw&r=0", name: '景点3' }
  ];


  //多图标卡片
  cards = [
    { icon: 'map-outline', title: '找攻略' },
    { icon: 'flame-outline', title: '当季热门' },
    { icon: 'newspaper-outline', title: '看游记' },
    { icon: 'people-outline', title: '找搭子' },
    { icon: 'bed-outline', title: '订酒店' },
    { icon: 'happy-outline', title: '亲子游' },
    { icon: 'car-outline', title: '自驾游' },
    { icon: 'flag-outline', title: '国内游' },
    { icon: 'airplane-outline', title: '海外游' },
    { icon: 'compass-outline', title: '周边游' }
  ];

  chunkedCards: any[] = [];

  
  constructor(private router: Router) {
    this.chunkSize(this.cards);
  }
 
  //跳转到新页面
  navigateToShouyeViewPage() {
    this.router.navigate(['/tab1/shouye-view']);
  }


  chunkSize(cards: any[]) {
    const chunkSize: number = 5;
    this.chunkedCards = [];
    for (let i: number = 0; i < cards.length; i += chunkSize) {
      this.chunkedCards.push(cards.slice(i, i + chunkSize));
    }
  }
 


  ngOnInit() {
    const swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      autoplay: {
        delay: 3000, // 自动播放间隔时间为3秒
      },  

    });

  }
  
}
