<ion-header>
  <ion-toolbar color="primary">
    <ion-title>装修页</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 搜索框 -->
  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>

  <!-- 导航栏 -->
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="company">
      <ion-icon name="business"></ion-icon>
      装修公司
    </ion-segment-button>
    <ion-segment-button value="design">
      <ion-icon name="brush"></ion-icon>
      设计机构
    </ion-segment-button>
    <ion-segment-button value="designer">
      <ion-icon name="person"></ion-icon>
      独立设计师
    </ion-segment-button>
  </ion-segment>

  <!-- 区域用来展示详情页 -->
  <div class="details-container">
    <!-- 装修公司详情页 -->
    <div *ngIf="selectedSegment === 'company'">
      <!-- 装修公司详情页 -->
      <ion-card>
        <ion-card-header>
          公司名称
        </ion-card-header>
        <ion-card-content>
          <ion-item>
            <ion-label>星级评分:</ion-label>
            <ion-text>{{ company.starRating }}</ion-text>
          </ion-item>
          <ion-item>
            <ion-label>评价数量:</ion-label>
            <ion-text>{{ company.reviewCount }}</ion-text>
          </ion-item>
          <ion-item>
            <ion-label>公司简介:</ion-label>
            <ion-text>{{ company.description }}</ion-text>
          </ion-item>
          <!-- 公司介绍 -->
          <ion-card>
            <ion-card-header>
              公司介绍
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <ion-item>
                  <ion-label>公司服务:</ion-label>
                  <ion-text>{{ company.services }}</ion-text>
                </ion-item>
                <ion-item>
                  <ion-label>优势:</ion-label>
                  <ion-text>{{ company.advantages }}</ion-text>
                </ion-item>
                <ion-item>
                  <ion-label>案例:</ion-label>
                  <ion-text>{{ company.cases }}</ion-text>
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
          <!-- 服务项目 -->
          <ion-card>
            <ion-card-header>
              服务项目
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <ion-item>全屋定制</ion-item>
                <ion-item>局部改造</ion-item>
                <ion-item>硬装</ion-item>
                <ion-item>软装</ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
          <!-- 案例展示 -->
          <ion-card>
            <ion-card-header>
              案例展示
            </ion-card-header>
            <ion-card-content>
              <!-- 展示公司完成的装修案例 -->
            </ion-card-content>
          </ion-card>
          <!-- 团队介绍 -->
          <ion-card>
            <ion-card-header>
              团队介绍
            </ion-card-header>
            <ion-card-content>
              <!-- 展示公司设计师和施工团队的信息 -->
            </ion-card-content>
          </ion-card>
          <!-- 用户评价 -->
          <ion-card>
            <ion-card-header>
              用户评价
            </ion-card-header>
            <ion-card-content>
              <!-- 展示用户对公司的评价 -->
            </ion-card-content>
          </ion-card>
          <!-- 底部按钮 -->
          <ion-button expand="full">电话</ion-button>
          <ion-button expand="full">预约</ion-button>
          <ion-button expand="full">咨询</ion-button>
          <ion-button expand="full">查看案例</ion-button>
        </ion-card-content>
      </ion-card>
    </div>
    <div *ngIf="selectedSegment === 'company'">
      <!-- 公司详情页内容 -->
    </div>

    <!-- 设计机构详情页 -->
    <div *ngIf="selectedSegment === 'design'">
      <!-- 机构详情页内容 -->
    </div>

    <!-- 设计师详情页 -->
    <div *ngIf="selectedSegment === 'designer'">
      <!-- 设计师详情页内容 -->
    </div>
  </div>
</ion-content>