import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'component-card',
  styleUrl: 'card.css'
})
export class Card {
  @State() orderId: number = 123456; // 初始订单编号
  @State() cards: Array<{ id: number }> = []; // 存储卡片的数组

  // 增加订单编号并生成新卡片的方法
  addNewCard() {
    const newCardId = this.orderId + this.cards.length + 1; // 新卡片订单编号
    this.cards = [...this.cards, { id: newCardId }]; // 将新卡片添加到数组中
  }

  render() {
    return [
      <ion-header translucent={true}>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button defaultHref="/"></ion-back-button>
          </ion-buttons>
          <ion-title style={{ textAlign: 'center' }}>销售单</ion-title> {/* 标题居中 */}
          <ion-buttons slot="end">
            <ion-button onClick={() => this.addNewCard()}>增加订单编号</ion-button> {/* 增加按钮 */}
          </ion-buttons>
        </ion-toolbar>
      </ion-header>,

      <ion-content fullscreen={true}>
        {this.cards.map(card => (
          <ion-card key={card.id}>
            <ion-card-header>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                  <strong>{new Date().toLocaleTimeString()}</strong> {/* 显示当前时间 */}
                </div>
                <div>
                  <strong>订单编号：{card.id}</strong> {/* 显示自增的订单编号 */}
                </div>
              </div>
              <ion-card-title>Card Title</ion-card-title>
              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
            </ion-card-header>

            <ion-card-content>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                  应收：575元 &nbsp; 实收：575元
                </div>
              </div>
              <div style={{ marginTop: '10px' }}>
                <strong>销件：4件</strong>
              </div>
            </ion-card-content>
          </ion-card>
        ))}
      </ion-content>
    ];
  }
}