import { Component, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';

@Component({
  selector: 'app-services-modal',
  standalone: true,
  imports: [CommonModule, IonicModule],
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>我的服务</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="dismiss()">关闭</ion-button>
        </ion-buttons>
      </ion-toolbar>
      <ion-toolbar>
        <ion-segment value="inProgress" (ionChange)="segmentChanged($event)">
          <ion-segment-button value="inProgress">
            <ion-label>进行中</ion-label>
          </ion-segment-button>
          <ion-segment-button value="completed">
            <ion-label>已完成</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item *ngFor="let service of services">
          <ion-avatar slot="start">
            <img [src]="service.userAvatar || 'https://ionicframework.com/docs/img/demos/avatar.svg'">
          </ion-avatar>
          <ion-label>
            <h2>{{ service.userName }}</h2>
            <p>{{ service.description }}</p>
            <p>服务类型: {{ service.serviceType }}</p>
            <p>积分: {{ service.points }} | 状态: {{ service.status === 'inProgress' ? '进行中' : '已完成' }}</p>
            <p>创建时间: {{ service.createTime | date:'yyyy-MM-dd' }}</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  `
})
export class ServicesModalPage {
    @Input() services: any[] = [];
    segmentValue: any;
  

  constructor(private modalCtrl: ModalController) {
    this.loadServices();
  }
  storeList: CloudObject[]=[]

  async loadServices() {
    try {
      let query = new CloudQuery("Progressing");
      this.storeList = await query.find();
      
      // 确保所有字段都有默认值
      this.services = this.storeList.map(item => ({
        userName: item.get('userName') || '未知用户',
        userAvatar: item.get('userAvatar') || 'https://ionicframework.com/docs/img/demos/avatar.svg',
        description: item.get('description') || '无描述',
        points: item.get('points') || 0,
        status: item.get('status') || 'inProgress',
        // 添加其他需要的字段
        createTime: item.get('createTime') || new Date().toISOString(),
        serviceType: item.get('serviceType') || '普通服务'
      }));
      
      console.log('加载的服务数据:', this.services); // 调试用
    } catch (error) {
      console.error('加载服务数据失败:', error);
      this.services = []; // 出错时清空列表
    }
  }

  segmentChanged(event: any) {
    this.segmentValue = event.detail.value;
    if(this.segmentValue === 'inProgress') {
        this.loadServices(); // 点击"进行中"时加载数据
    } else {
        this.services = []; // 点击"已完成"时清空数据
    }
}

  

  dismiss() {
    this.modalCtrl.dismiss();
  }

  ionViewWillEnter() {
    this.loadServices(); // 每次打开模态框时刷新数据
  }
}