APPmy/src/app/tab2/tab2.page.ts

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
  
})
export class Tab2Page {
  companies = [
    {
      name: '和美空间设计',
      starRating: 4.7,
      reviewCount: 150,
      description: '和美空间设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
      services: '室内装修设计\n定制家具设计\n空间规划布局\n装饰材料供应',
      advantages: '专业团队：拥有经验丰富的设计师和施工团队，保证项目质量\n创意设计：注重细节，根据客户需求量身定制设计方案\n优质材料：选用优质装饰材料，确保装修质量和耐久性\n贴心服务：全程跟踪服务，提供周到的售后服务，保障客户满意度。',
      cases: '客厅装修案例：现代简约风格，打造温馨舒适的家居空间。\n卧室装修案例：北欧风格，简约清新，注重自然光线的利用。\n餐厅装修案例：中式风格，传统与现代相结合，展现东方韵味。'
     },
    {
      name: '灵感装修工程',
      starRating: 4.5,
      reviewCount: 120,
      description: '灵感装修工程是一家注重细节、追求品质的室内装修设计公司。我们拥有一支充满激情和创意的设计团队，致力于为客户打造高品质、个性化的居家空间。',
      services: '室内装修设计与施工\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
      advantages: '设计创新：注重细节，追求设计的个性化与独特性\n施工质量：严格把控每一个施工环节，确保工程质量\n售后服务：提供专业的售后服务，保障客户满意度\n团队实力：拥有一支技术过硬、经验丰富的设计与施工团队',
      cases: '书房装修案例： 现代简约风格，打造宁静工作空间\n阳台装修案例： 自然清新风格，打造休闲放松空间\n儿童房装修案例： 欧式童趣风格，创造温馨童话空间'
    },
    {
      name: '璞心设计工作室',
      starRating: 4.8,
      reviewCount: 180,
      description: '璞心设计工作室是一家注重创意与实用性的室内设计公司，致力于为客户提供个性化、舒适的家居环境。我们以客户需求为中心，打造具有温暖和美感的居家空间。',
      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n装饰材料供应与选择',
      advantages: '创意设计：注重细节，打造独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户至上：提供周到的售后服务，确保客户满意度',
      cases: '客厅装修案例： 现代简约风格，打造温馨舒适的家居空间\n卧室装修案例： 北欧风格，清新简约，注重自然元素的融入\n餐厅装修案例： 中式风格，传统与现代结合，展现东方文化魅力'
    },
    {
      name: '悦居室内设计',
      starRating: 4.6,
      reviewCount: 140,
      description: '悦居室内设计专注于为客户打造温馨、舒适的家居环境。我们拥有一支充满创意和激情的设计团队，致力于提供个性化、高品质的装修设计服务。',
      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
      advantages: '创新设计：注重细节，打造独特的家居空间\n施工质量：严格把控施工过程，确保工程质量\n专业团队：设计师和施工团队经验丰富，提供专业服务\n客户满意：关注客户需求，提供贴心的售后服务，确保客户满意度',
      cases: '客厅装修案例： 现代简约风格，营造温馨家庭氛围\n卧室装修案例： 北欧风格，清新舒适，注重舒眠体验\n餐厅装修案例： 中式风格，传统与现代结合，展现东方韵味'
    },
    {
      name: '彩虹装饰工程',
      starRating: 4.9,
      reviewCount: 200,
      description: '彩虹装饰工程致力于为客户提供创新、个性化的室内设计与装修服务。我们拥有一支充满创意和激情的设计团队，以客户需求为中心，打造独特、舒适的居家空间。',
      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n装饰材料供应与选择',
      advantages: '创意设计：打造个性化、独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户至上：提供周到的售后服务，确保客户满意度',
      cases: '客厅装修案例： 现代简约风格，打造温馨舒适的家居空间\n卧室装修案例： 北欧风格，清新简约，注重自然元素的融入\n餐厅装修案例： 中式风格，传统与现代结合，展现东方文化魅力'
    },
    {
      name: '素雅装饰设计',
      starRating: 4.8,
      reviewCount: 160,
      description: '素雅装饰设计专注于为客户提供创新、独特的室内设计与装修方案。我们以客户需求和个性为出发点，致力于打造与众不同、舒适宜居的家居环境。',
      services: '室内设计与装修\n定制家具设计与制作\n空间规划与布局设计\n软装配饰搭配',
      advantages: '创意设计：注重细节，打造独特的空间氛围\n专业团队：设计师和施工团队经验丰富，保证项目质量\n优质材料：选用高品质装饰材料，确保装修质量与耐久性\n客户满意：关注客户需求，提供贴心的售后服务，确保客户满意度',
      cases: '客厅装修案例： 欧式古典风格，彰显典雅与奢华\n卧室装修案例： 现代简约风格，打造舒适宁静的休息空间\n餐厅装修案例： 中式传统风格，展现东方文化韵味'
    }
    // 添加更多装修公司信息
  ];
  selectedSegment: string = 'company';
  
  designCompanies = [
    {
      name: 'Creativa Studio',
      starRating: 4.8,
      reviewCount: 1123,
      description: 'Creativa Studio是一家享誉业界的设计机构，致力于为客户提供创新、个性化的设计解决方案。我们拥有一支充满激情和创造力的设计团队，致力于将客户的梦想转化为现实。',
      services: '室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
      advantages: '多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
      cases: [
        {
          image: 'https://img.zcool.cn/community/019ff85a03f99fa80121985c79061b.jpg@1280w_1l_2o_100sh.jpg',
          description: '这是一处别墅室内设计案例，注重空间利用和光线的运用。',
          style: '现代简约'
        },
        {
          image: 'https://img.zcool.cn/community/01928b5c9736cea801214168667881.jpg@1280w_1l_2o_100sh.jpg',
          description: ' 这是一家咖啡厅的室内设计案例，营造出温馨舒适的氛围。',
          style: '北欧风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'https://img.zcool.cn/community/018fae5a9f4cfba801219586b6e26b.jpg@1280w_1l_2o_100sh.jpg',
          name: '王小明',
          style: '现代风格',
          serviceArea: '北京',
          price: '￥2000/m²'
        },
        {
          avatar: 'https://img.zcool.cn/community/01baae5dab200fa8012163ba498eaa.jpg@2o.jpg',
          name: '张美丽',
          style: '北欧风格',
          serviceArea: '上海',
          price: '￥2200/m²'
        },
        // 添加更多设计师
      ],
      designConcept: ' Creativa Studio秉承“创意无限，设计无限”的理念，致力于为客户提供独一无二的设计方案。',
      serviceProcess: '初步沟通与需求确认\n方案设计与初步呈现\n修改与确认设计方案\n施工图绘制与施工管理\n完工验收与售后服务',
      userReviews: [
        {
          text: 'Creativa Studio的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
          image: 'review1.jpg',
          starRating: 4.7
        },
        {
          text: '感谢Creativa Studio的团队，他们的设计让我们的商铺焕然一新，效果超出预期',
          image: 'review1.jpg',
          starRating: 4.4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '创意天地设计',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '艺境空间设计',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '星辰创意设计室',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '创意空间探索所',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    }
    // 添加更多设计机构信息
  ];
  selectedTab: string = 'designCompany';
  
  designers = [
    {
      username: '李宛如',
      avatar: 'Assets\img\designer1.jpg',
      bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
      portfolioImage: 'Assets\img\designer1.jpg',
      portfolioCount: 50,
      style: '现代简约、北欧风格',
      serviceArea: '北京',
      price: '平均每平米价格为1000元',
      rating: 4.8
    },
    {
      username: '张晨光',
      avatar: 'assets/designer2.jpg',
      bio: '张晨光是一位充满创意和热情的室内设计师，擅长将空间与艺术相融合，为客户打造独特、舒适的家居环境。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 80,
      style: '现代简约、工业风格',
      serviceArea: '上海',
      price: '平均每平米价格为1500元',
      rating: 4.6
    },
    {
      username: '王梦洁',
      avatar: 'assets/designer2.jpg',
      bio: '王梦洁是一位注重细节和品质的室内设计师，擅长通过色彩和材质搭配打造温馨、时尚的居住空间。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 60,
      style: '北欧风格、现代简约',
      serviceArea: '广州',
      price: '平均每平米价格为1200元',
      rating: 4.5
    },
    {
      username: '刘阳光',
      avatar: 'assets/designer2.jpg',
      bio: '刘阳光是一位富有创意和想象力的室内设计师，致力于为客户打造个性化、独特的空间体验。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 45,
      style: '中式风格、现代简约',
      serviceArea: '成都',
      price: '平均每平米价格为1000元',
      rating: 4.6
    },
    {
      username: '陈思慧',
      avatar: 'assets/designer2.jpg',
      bio: ' 陈思慧是一位充满激情和创意的室内设计师，专注于打造具有个性和温暖感的居家空间，致力于为客户提供高品质的设计服务。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 70,
      style: '现代简约、地中海风格',
      serviceArea: '广州',
      price: '平均每平米价格为1300元',
      rating: 4.8
    }
    // 添加更多设计师信息
  ];
  selectedDesignerSegment: string = 'designer';

  constructor(private sanitizer: DomSanitizer) {}
  selectedCompany: any;

toggleDetails(company: any) {
  if (this.selectedCompany === company) {
    this.selectedCompany = null;
  } else {
    this.selectedCompany = company;
  }
}

  formatHtmlContent(content: string): SafeHtml {
    const formattedContent = content.replace(/\n/g, '<br>');
    return this.sanitizer.bypassSecurityTrustHtml(formattedContent);
  }
  segmentChanged(event: CustomEvent) {
    this.selectedSegment = event.detail.value;
  }
}