import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton, IonGrid, IonCol, IonCardHeader, IonLabel, IonThumbnail, IonCardContent, IonCardTitle, IonCard, IonIcon, IonSearchbar, IonModal, IonButtons } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { FmChatModalInput } from 'fmode-ng';
import { IonRow, IonItem } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { SaleCardComponent } from '../component/sale-card/sale-card.component';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonButton, IonGrid, IonRow, IonCol, IonCardHeader, IonItem, IonLabel, IonThumbnail, IonCardContent,
    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule, SaleCardComponent,
    FmChatModalInput, IonModal, IonButtons
  ]
})
export class Tab3Page {
  showDetailModal = false;  // 控制模态显示与否
  currentProduct: any;      // 当前选择的商品信息

  constructor(
    private modalCtrl:ModalController,
    private router:Router,
  ) {}

  categories = [
    { name: '皮肤用药', image: '../../assets/image/doctor7.png' },
    { name: '妇科用药', image: '../../assets/image/doctor7.png' },
    { name: '肠胃消化', image: '../../assets/image/doctor7.png' },
    { name: '呼吸用药', image: '../../assets/image/doctor7.png' },
    { name: '营养补充', image: '../../assets/image/doctor7.png' },
    { name: '家庭常备', image: '../../assets/image/doctor7.png' },
    { name: '耳鼻咽喉', image: '../../assets/image/doctor7.png' },
    { name: '男科用药', image: '../../assets/image/doctor7.png' },
  ];
  
  products = [
    { 
      title: '热销🔥🔥🔥', 
      subtitle: '药品', 
      name: '藿香正气水', 
      price: '¥120', 
      image: '../../assets/image/doctor7.png',
      prescription: false, 
      usage: '口服，每次5-10毫升，每天2次', 
      function: '解表化湿，理气和中。',
      spec: '10ml*10支/盒', 
      composition: '藿香、紫苏叶、白芷、法半夏、厚朴等',
      taboo: '孕妇慎用'
    },
    { 
      title: '特价💰💰💰', 
      subtitle: '药品', 
      name: '知柏地黄丸', 
      price: '¥200', 
      image: '../../assets/image/doctor7.png',
      prescription: true,
      usage: '口服，一次6克，一日2次',
      function: '滋阴清热，用于阴虚火旺所致的潮热盗汗。',
      spec: '9g*10丸/盒',
      composition: '知母、黄柏、熟地黄、山药等',
      taboo: '孕妇、严重肝肾功能不全者慎用'
    },
    { 
      title: '特价💰💰💰', 
      subtitle: '药品', 
      name: '知柏地黄丸', 
      price: '¥200', 
      image: '../../assets/image/doctor7.png',
      prescription: true,
      usage: '口服，一次6克，一日2次',
      function: '滋阴清热，用于阴虚火旺所致的潮热盗汗。',
      spec: '9g*10丸/盒',
      composition: '知母、黄柏、熟地黄、山药等',
      taboo: '孕妇、严重肝肾功能不全者慎用'
    },
  ];

  openDetailModal(product: any) {
    this.currentProduct = product;
    this.showDetailModal = true;
  }

  closeDetailModal() {
    this.showDetailModal = false;
    this.currentProduct = null;
  }
}