import { Component, OnInit } from '@angular/core';
import { OrderService } from '../services/order.service';
import { AlertController } from '@ionic/angular';
import { Order } from '../services/order.service'; // 确保路径正确
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.page.html',
  styleUrls: ['./orders.page.scss'],
  animations: [
    trigger('orderAnimation', [
      state('void', style({ opacity: 0, transform: 'translateY(-10px)' })),
      state('*', style({ opacity: 1, transform: 'translateY(0)' })),
      transition(':enter', [animate('300ms ease-in')]),
      transition(':leave', [animate('300ms ease-out')])
    ])
  ]
})
export class OrdersPage implements OnInit {
  orders: Order[] = [];

  constructor(
    private orderService: OrderService,
    private alertController: AlertController
  ) {}

  ngOnInit() {
    this.loadOrders();
  }

  loadOrders() {
    this.orders = this.orderService.getOrders();
  }

  async confirmDeleteOrder(order: Order) {
    const alert = await this.alertController.create({
      header: '确认删除',
      message: '确定要删除此订单吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: '确定',
          handler: () => {
            this.deleteOrder(order);
          }
        }
      ]
    });

    await alert.present();
  }

  deleteOrder(order: Order) {
    this.orderService.deleteOrder(order.id);

    // 重新加载订单列表以反映更改
    this.loadOrders();

    // 提示用户删除成功
    console.log('订单删除成功');
  }

  doRefresh(event: any) {
    console.log('Begin async operation');
    setTimeout(() => {
      console.log('Async operations have ended');
      event.target.complete();
    }, 1000);
  }

}