<ion-content class="content">
  <div class="header">
    <div class="top">
      <ion-segment
        [scrollable]="true"
        (ionChange)="segmentChanged($event)"
        layout="icon-bottom"
        [value]="currentValue"
        mode="md"
      >
        @for (item of options; track $index) {
        <ion-segment-button
          (click)="getRoom(item?.value)"
          [value]="item?.value"
          class="tabs"
        >
          <ion-label>{{ item?.label }}</ion-label>
        </ion-segment-button>
        }
      </ion-segment>
      <div class="more">
        <img (click)="isOpen = true" src="/img/more.png" alt="" />
        <img src="/img/search.png" alt="" (click)="search()" />
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        @for (item of banner; track $index) {
        <div class="swiper-slide">
          <img [src]="item?.get('image')" alt="" />
        </div>
        }
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div class="notice">
    <img src="/img/通知广播.png" alt="" class="notice-icon" />
    <div class="swiper swiper-notice">
      <div class="swiper-wrapper">
        @for (item of notices; track $index) {
        <div class="swiper-slide notice-item" (click)="presentAlert(item)">
          <div class="notice-item-title">
            <div class="notice-item-text">
              {{ item?.title }}
            </div>
          </div>
          <div class="notice-item-content">
            {{ item?.content }}
          </div>
        </div>
        }
      </div>
    </div>
  </div>
  <div class="bar">
    <ion-select
      label="主播列表"
      [placeholder]="sex"
      cancelText="关闭"
      okText="确定"
      (ionChange)="onChangeSex($event)"
    >
      <ion-select-option value="all">全部</ion-select-option>
      <ion-select-option value="女">女主播</ion-select-option>
      <ion-select-option value="男">男主播</ion-select-option>
    </ion-select>
  </div>
  <div class="room-list">
    @for (item of roomList; track $index) {
    <div
      class="list-row"
      (click)="toUrl('user/profile/' + item.uid)"
      [style.background-image]="'url(' + item?.cover + ')'"
    >
      <div class="title-tag">在线聊天</div>
      <div class="live-tag">
        <!-- <span></span>  -->
        <img src="/img/live.gif" alt="" />
        在线
      </div>
      <div class="room-footer">
        <div class="user">
          {{ item?.nickname || item?.mobile }}
        </div>
        <div class="desc">{{ item?.title }}</div>
        <div class="city-block">
          <div class="row-li">
            <ion-icon name="location-outline"></ion-icon>
            江西
          </div>
          <div class="row-li" style="margin-left: 4px">
            <img
              src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
              alt=""
            />
            {{ item.birthdate }}
          </div>
        </div>
      </div>
    </div>
    }
  </div>
</ion-content>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  (didDismiss)="onDidDismiss($event)"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="cancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="cancel('confirm', currentValue)">确认</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column
        [value]="currentValue"
        (ionChange)="onIonChange($event)"
      >
        @for (item of options; track $index) {
        <ion-picker-column-option value="{{ item?.value }}">{{
          item?.label
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>
