import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

import Swiper from 'swiper';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {

  selectedSegment: string = 'explore';
  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined

  selectedCategory: string = 'company'; // 默认选中装修公司页
  selectedCompanyCategory: string = 'one-stop'; // 默认选中一站式整装

  selectedDesignerCategory: string = 'full-design'; // 默认选中全案设计
  selectedPackageCategory: string = 'top-listed-package'; // 默认选中上榜套餐
  selectedMaterialsCategory: string = 'decoration-materials'; // 默认选中装修建材
  
  constructor(private navCtrl: NavController,private router: Router) {}

  ngOnInit() {
    // 延迟500毫秒加载
    setTimeout(() => {
      this.initSwiper();
    }, 500);
  }
  
  goto3D(){
    this.router.navigate(['/babylon']);
  }
  // 初始化轮播图
  slide1:Swiper|undefined
  initSwiper(){
  console.log(this.slide1Comp)
    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
      loop:true,
      autoplay:{
        delay:500,
      },
      mousewheel: {
        forceToAxis: true,
      },
      pagination:{
        el:".swiper-pagination",
        clickable:true
      }
    });
  }


  segmentChanged(event: CustomEvent) {
    this.selectedSegment = event.detail.value;
  }

  // 在此处定义和初始化数据
  onestopList = [
    { 
      image: 'assets/img/logo1.jpg', 
      title: '江西创艺装饰', 
      score: 4.6, 
      price: 10-15, 
      locate: '红谷滩区', 
      people: 109,
      tag1: '十年老店' ,
      tag2: '透明报价' 

    },
    { 
      image: 'assets/img/logo2.jpg', 
      title: '南昌雅美居装饰', 
      score: 4.4, 
      price: 8-13, 
      locate: '红谷滩区', 
      people: 98,
      tag1: '十年老店' ,
      tag2: '透明报价' 
    },
    { 
      image: 'assets/img/logo3.jpg', 
      title: '江西海峰装饰', 
      score: 4.2, 
      price: 7-12, 
      locate: '东湖区', 
      people: 22,
      tag1: '十年老店' ,
      tag2: '透明报价' 
    },
    { 
      image: 'assets/img/logo4.jpg', 
      title: '南昌创美乐居装饰', 
      score: 4.1, 
      price: 7-12, 
      locate: '南昌县', 
      people: 11,
      tag1: '十年老店',
      tag2: '毛坯装修' 
    },
    { 
      image: 'assets/img/logo5.jpeg', 
      title: '圣都整装南昌分公司', 
      score: 4.3, 
      price: 15-20, 
      locate: '青山湖区', 
      people: 22,
      tag1: '十年老店',
      tag2: '毛坯装修' 
    },
    // 添加更多示例数据
  ];
  
  videos: { videoUrl: string, title: string, description: string }[] = [
    {
      videoUrl: 'assets/videos/video1.mp4',
      title: '房屋装修设计指南',
      description: '了解如何打造理想的家居装修风格'
    },
    {
      videoUrl: 'assets/videos/video2.mp4',
      title: '家具选购攻略',
      description: '挑选适合你家的家具，打造舒适空间'
    },
    {
      videoUrl: 'assets/videos/video3.mp4',
      title: '客厅装饰灵感',
      description: '打造温馨舒适的客厅装饰'
    },
    {
      videoUrl: 'assets/videos/video4.mp4',
      title: '卧室设计技巧',
      description: '掌握卧室设计的实用技巧'
    },
    {
      videoUrl: 'assets/videos/video5.mp4',
      title: '厨房装修实例',
      description: '欣赏不同风格的厨房装修案例'
    },
    {
      videoUrl: 'assets/videos/video6.mp4',
      title: '阳台花园布置',
      description: '打造美丽的阳台花园'
    },
    {
      videoUrl: 'assets/videos/video7.mp4',
      title: '书房设计灵感',
      description: '打造宁静的读书空间'
    },
    {
      videoUrl: 'assets/videos/video8.mp4',
      title: '浴室装修技巧',
      description: '打造舒适的浴室空间'
    },
    {
      videoUrl: 'assets/videos/video9.mp4',
      title: '家居风水指南',
      description: '了解家居风水的重要性'
    },
    {
      videoUrl: 'assets/videos/video10.mp4',
      title: '家庭影院布置',
      description: '打造私人家庭影院'
    }
    // 可以根据需要添加更多视频数据
  ];

  styleList = [

    {
      style:'现代简约风',
      img:'assets/img/style4.jpg'
    },
    {
      style:'日式风',
      img:'assets/img/style5.jpg'
    },
    {
      style:'复古风',
      img:'assets/img/style6.jpg'
    },
    {
      style:'中式风',
      img:'assets/img/style1.png'
    },
    {
      style:'北欧风',
      img:'assets/img/style2.png'
    },
    {
      style:'原木风',
      img:'assets/img/style3.png'
    },
    {
      style:'中式风',
      img:'assets/img/style1.png'
    },
    {
      style:'中式风',
      img:'assets/img/style1.png'
    },
    {
      style:'中式风',
      img:'assets/img/style1.png'
    },
    {
      style:'中式风',
      img:'assets/img/style1.png'
    },
  ];

  caseList = [
    {
      img:'assets/img/case1.jpg',
      title: "现代简约风格客厅装修",
      description: "这是一个现代简约风格的客厅装修案例，以简洁清爽的设计风格为主，色彩搭配明快，营造出舒适宜人的居家氛围。"
    },
    {
      img:'assets/img/case2.jpg',
      title: "北欧风格卧室装修",
      description: "这是一个典型的北欧风格卧室装修案例，以白色和木质元素为主，简约清新，打造出温馨舒适的睡眠空间。"
    },
    {
      img:'assets/img/case3.jpg',
      title: "现代中式餐厅装修",
      description: "这个现代中式餐厅装修案例融合了传统中式元素和现代设计理念，色彩典雅，家具摆设充满东方韵味。"
    },
    {
      img:'assets/img/case4.jpg',
      title: "欧式风格厨房装修",
      description: "这个欧式风格厨房装修案例采用了浪漫优雅的欧式设计风格，金色装饰和复古家具营造出奢华典雅的厨房空间。"
    },
    {
      img:'assets/img/case1.jpg',
      title: "现代工业风办公室装修",
      description: "这是一个现代工业风格的办公室装修案例，以金属、混凝土和木质元素为主，展现出独特的工业风情。"
    },
    {
      img:'assets/img/case2.jpg',
      title: "简欧风格客厅装修",
      description: "这是一个简欧风格的客厅装修案例，结合简约和欧式元素，打造出典雅、舒适的客厅空间。"
    },
    {
      img:'assets/img/case3.jpg',
      title: "地中海风格卧室装修",
      description: "这是一个地中海风格的卧室装修案例，以蓝色、白色和黄色为主色调，营造出轻松、海洋风情的卧室氛围。"
    },
    {
      img:'assets/img/case4.jpg',
      title: "现代农村风格厨房装修",
      description: "这是一个现代农村风格的厨房装修案例，注重自然、简约的设计风格，展现出田园般的温馨氛围。"
    },
    {
      img:'assets/img/case1.jpg',
      title: "日式和风风格卫生间装修",
      description: "这是一个日式和风风格的卫生间装修案例，以木质、竹子和瓷砖为主要材料，营造出宁静、清新的日式风情。"
    },
    {
      img:'assets/img/case2.jpg',
      title: "现代艺术风格客厅装修",
      description: "这是一个现代艺术风格的客厅装修案例，结合艺术元素和现代设计，打造出独特、富有个性的客厅空间。"
    }
  ];

}