<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" color="light"></ion-back-button>
    </ion-buttons>
    <ion-title>找医生</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)" class="segment-control">
    <ion-segment-button *ngFor="let segment of segments" [value]="segment">
      {{segment}}
    </ion-segment-button>
  </ion-segment>

  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-card class="doctor-card" *ngFor="let doctor of doctors" (click)="openDetailModal(doctor)">
          <ion-item lines="none">
            <ion-avatar slot="start">
              <img [src]="doctor.get('avatar')" alt="医生头像">
            </ion-avatar>
            <ion-label>
              <div class="doctor-header">
                <h2>{{doctor.get('name')}}</h2>
                <span class="title">{{doctor.get('title')}}</span>
                <span class="specialty">{{doctor.data["specialty"]}}</span>
                <ion-badge color="primary">可开处方</ion-badge>
              </div>
              <div class="hospital-info">
                <span>{{doctor.get('hospital')}}</span>
                <ion-badge color="success">{{doctor.get('hospitalLevel')}}</ion-badge>
                <ion-badge color="warning">{{doctor.get('hospitalType')}}</ion-badge>
              </div>
            </ion-label>
          </ion-item>

          <ion-item lines="none">
            <ion-text color="medium" class="expertise">
              {{doctor.get('expertise')}}
            </ion-text>
          </ion-item>

          <ion-item lines="none">
            <div class="stats">
              <div>
                <ion-text color="warning">{{doctor.get('rating')}}</ion-text>
                <ion-icon name="star" color="warning"></ion-icon>
              </div>
              <div>接诊量 {{doctor.get('consultations')}}</div>
              <div>同行认可 {{doctor.get('recommendations')}}</div>
            </div>
          </ion-item>

          <ion-item lines="none">
            <div class="consultation-types">
              <ion-button fill="outline">图文 ¥{{doctor.data["prices"]?.text}}</ion-button>
              <ion-button fill="outline">电话 ¥{{doctor.data["prices"]?.voice}}</ion-button>
              <ion-button fill="outline">视频 ¥{{doctor.data["prices"]?.video}}</ion-button>
              <ion-button color="success">年度好医生</ion-button>
            </div>
          </ion-item>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 医生详情模态框 -->
  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="closeDetailModal()">关闭</ion-button>
          </ion-buttons>
          <ion-buttons slot="end">
            <ion-button>分享</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <ion-card class="doctor-detail-card">
          <div class="doctor-header1">
            <div class="verification-badge" *ngIf="doctor1.get('isVerified')">
              <ion-icon name="checkmark-circle"></ion-icon>
              已通过实名认证
            </div>
            <div class="qualification-badge">
              执业资质已审核通过
            </div>
          </div>

          <div class="doctor-info1" style="display: flex;">
            <div class="left-section">
              <div class="name-title">
                <h2>{{doctor1.get('name')}}</h2>
                <ion-badge *ngIf="doctor1.get('isExpert')" color="warning">知名专家</ion-badge>
              </div>

              <div class="position">
                <span>{{doctor1.get('specialty')}}</span>
                <span>{{doctor1.get('title')}}</span>
              </div>

              <div class="hospital">
                <span>{{doctor1.get('hospital')}}</span>
                <ion-badge color="success">{{doctor1.get('hospitalLevel')}}</ion-badge>
              </div>

              <div class="stats">
                <div class="rating">
                  <span class="number">{{doctor1.get('rating')}}</span>
                  <ion-icon name="star" color="warning"></ion-icon>
                </div>
                <div class="consult">
                  <span>接诊量 {{doctor1.get('recommendation')}}</span>
                </div>
                <div class="service">
                  <span>服务态度好</span>
                </div>
              </div>
            </div>

            <div class="right-section">
              <ion-avatar>
                <img [src]="doctor1.get('avatar')" alt="医生头像">
              </ion-avatar>
              <ion-button fill="outline" size="small" color="success">
                + 关注
              </ion-button>
            </div>
          </div>

          <div class="tags">
            <ion-chip *ngFor="let tag of doctor1.data['tags']" outline>
              {{tag}}
            </ion-chip>
          </div>
        </ion-card>

        <div class="info-section">
          <div class="info-header">
            <h1>擅长与简介</h1>
          </div>
          <div class="info-content">
            <p>{{doctor1?.get('expertise')}}</p>
          </div>
        </div>

        <div class="consult-options">
          <div class="option-grid">
            <div class="option-item" 
                 *ngFor="let option of options"
                 [class.selected]="option.isSelected"
                 [class.disabled]="!option.isAvailable"
                 (click)="selectOption(option)">
              
              <div class="option-content">
                <div class="icon-wrapper">
                  <ion-icon [name]="option.icon"></ion-icon>
                  <ion-icon *ngIf="option.isSelected" 
                            name="checkmark-circle" 
                            class="check-icon">
                  </ion-icon>
                </div>
                
                <div class="title1">{{option.title}}</div>
                
                <div class="price" *ngIf="option.price > 0">
                  ¥{{option.price}}/{{option.unit}}
                </div>
                <div class="status" *ngIf="!option.isAvailable">
                  暂未开通
                </div>
              </div>
              
            </div>
          </div>
        </div>

        <div class="info">
          <div class="info-header">
            <h1>保证服务</h1>
          </div>
          <div class="info-content guarantee">
            <p>保证医生真实      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  未使用随时退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        不满意可申诉</p>
            <p></p>
            <p></p>
          </div>
        </div>

      </ion-content>
      <ion-footer>
        <ion-button color="primary" expand="block" (click)="appoint()">立即预约</ion-button>
        <ion-button class="consult-button" expand="block" color="success" (click)="openConsult()">立即咨询（点击付款）</ion-button>
      </ion-footer>
    </ng-template>
  </ion-modal>

  <!-- 收款码模态框 -->
  <ion-modal [isOpen]="isPaymentModalOpen" cssClass="payment-modal" (ionBackdropTap)="closePaymentModal()">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>支付方式</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="closePaymentModal()">关闭</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding payment-content">
        <div class="payment-codes">
          <img src="../../../assets/image/paya.png" alt="收款码A" class="payment-image">
          <img src="../../../assets/image/payb.png" alt="收款码B" class="payment-image">
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>