<ion-content class="content">
  <div
    [ngClass]="{
      header: true,
      'pad-top-ios': deviceSer.isIOS,
      'hd-hei': deviceSer.isIOS
    }"
    [style.background-image]="'url(img/bg.png)'"
  >
    <div class="top">
      <div class="tabs">
        <ion-segment
          [scrollable]="true"
          (ionChange)="segmentChanged($event)"
          layout="icon-bottom"
          [value]="active"
          mode="md"
        >
          @for (item of options; track $index) {
          <ion-segment-button [value]="item?.value" class="tabs">
            <ion-label>{{ item?.label }}</ion-label>
          </ion-segment-button>
          }
        </ion-segment>
      </div>
      <ion-searchbar
        animated="true"
        [(ngModel)]="value"
        (keyup.enter)="toSearch()"
        placeholder="搜索"
        color="light"
      ></ion-searchbar>
    </div>
  </div>
  <div class="banner">
    <div class="swiper mySwiper1">
      <div class="swiper-wrapper">
        @for (item of banner; track $index) {
        <div class="swiper-slide" (click)="toUrl(item?.get('url'))">
          <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-notice1">
      <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?.get("title") }}】</div>
            <div class="notice-item-content">
              {{ item?.get("content") }}
            </div>
          </div>
          <div class="notice-item-time">
            {{ item?.createdAt | date : "yyyy-MM-dd HH:mm" }}
          </div>
        </div>
        }
      </div>
    </div>
  </div>
  <div class="bar">
    @if (active == 'user') {
    <ion-select
      label="用户列表"
      [placeholder]="sex"
      cancelText="关闭"
      okText="确定"
      (ionChange)="onChangeSex($event)"
      interface="action-sheet"
      [value]="sex"
    >
      <ion-select-option value="女">女</ion-select-option>
      <ion-select-option value="男">男</ion-select-option>
    </ion-select>
    } @else {
    <ion-select
      label="主播类型"
      [placeholder]="sex"
      cancelText="关闭"
      okText="确定"
      (ionChange)="onChange($event)"
      interface="action-sheet"
      [value]="currentValue"
    >
      <ion-select-option value="recommend">热门</ion-select-option>
      <ion-select-option value="news">新人</ion-select-option>
      <ion-select-option value="三星">三星</ion-select-option>
      <ion-select-option value="四星">四星</ion-select-option>
      <ion-select-option value="五星">五星</ion-select-option>
      <ion-select-option value="海外">海外</ion-select-option>
    </ion-select>
    }
    <div class="bar-right">
      <div class="city" (click)="isOpenCity = true">
        <ion-icon name="location-outline"></ion-icon>{{ city ? city : "全部" }}
      </div>
      @if (active == 'anchor') {
      <ion-icon
        (click)="isColumn = !isColumn"
        [name]="!isColumn ? 'grid' : 'list'"
        style="font-size: 24px; color: #fe4d53"
      ></ion-icon>
      }
    </div>
  </div>

  @if (active == 'anchor') {
  <div
    [ngClass]="{
        'room-list': true,
        'room-list-column': isColumn,
      }"
  >
    @for (item of roomList; track $index) {
    <div
      [ngClass]="{
          'list-row': true,
          'list-row-column': isColumn,
        }"
      (click)="toUrl('user/profile/' + item.uid)"
      [style.background-image]="'url(' + item?.cover + ')'"
    >
      <div class="title-tag">在线聊天</div>
      @if (userList?.includes(item.uid)) {
      <div class="live-tag">
        <img src="img/live.gif" alt="" />
        {{ userList?.includes(item.uid) ? "在线" : "" }}
      </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>
            {{ item.city }}
          </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>
  }@else { @for (item of userList; track $index) {
  <div class="list">
    <div class="list-item">
      <div class="list-item-left">
        <img [src]="item.avatar" alt="" class="avatar" />
      </div>
      <div class="list-item-right">
        <div class="user-detail">
          <div class="user-name">
            {{ item.nickname || item.name || item.uid }}
          </div>
          <div class="user-tp">
            {{ item.remark }}
            <span>{{ item.birthdate }}</span>
            <span>
              <ion-icon name="location-outline"></ion-icon>
              {{ item.city || "未知" }}</span
            >
          </div>
        </div>
        <div class="user-btn" (click)="onOpenGreetingPhrase(item)">
          <ion-icon name="chatbubble"></ion-icon>打招呼
        </div>
      </div>
    </div>
  </div>
  } } @if (disbable) {
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  }

  <ion-modal
    #modal
    trigger="open-modal-check"
    [isOpen]="isOpen"
    (didDismiss)="isOpen = false"
    [initialBreakpoint]="1"
    [breakpoints]="[0, 0.5, 1]"
  >
    <ng-template>
      <div class="msg-modal">
        @for (item of greetingPhrases; track $index) {
        <div class="msg-modal-item" (click)="changeGreetingPhrase(item)">
          {{ item }}
          <ion-icon name="send"></ion-icon>
        </div>
        }
      </div>
    </ng-template>
  </ion-modal>
</ion-content>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpenCity"
  backdropDismiss="false"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="changeCityCancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="changeCityCancel('confirm')">确定</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column
        [value]="province"
        (ionChange)="onIonChangeCity($event, 'province')"
      >
        @for (item of provinceColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
      <ion-picker-column
        [value]="city"
        (ionChange)="onIonChangeCity($event, 'city')"
      >
        @for (item of cityColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>
