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

// @Component({
//   tag: 'component-reorder',
//   styleUrl: 'reorder.css'
// })
// export class Reorder {
//   @State() items: Array<{ id: number; title: string; url: string }> = [
//     { id: 1, title: '你了解亚马逊的运营流程吗？一个老卖家的经验分享', url: 'https://zhuanlan.zhihu.com/p/435669094?zpf=1852381247596273664' },
//     { id: 2, title: 'Item 2', url: '#' },
//     { id: 3, title: 'Item 3', url: '#' },
//     { id: 4, title: 'Item 4', url: '#' },
//   ];

//   handleReorder = ({ detail }) => {
//     detail.complete();
//   }

//   toggleReorder = () => {
//     const reorderGroup = document.getElementById('reorder') as HTMLIonReorderGroupElement;
//     reorderGroup.disabled = !reorderGroup.disabled;
//   }

//   async presentActionSheet(itemId: number) {
//     const actionSheet = await actionSheetController.create({
//       header: '确认删除',
//       buttons: [
//         {
//           text: '取消',
//           role: 'cancel'
//         },
//         {
//           text: '删除',
//           handler: () => {
//             this.deleteItem(itemId);
//           }
//         }
//       ]
//     });
//     await actionSheet.present();
//   }

//   deleteItem(itemId: number) {
//     // 使用 filter 方法更新 items 数组
//     this.items = this.items.filter(item => item.id !== itemId);
//   }

//   render() {
//     return [
//       <ion-header translucent={true}>
//         <ion-toolbar>
//           <ion-buttons slot="start">
//             <ion-back-button defaultHref="/"></ion-back-button>
//           </ion-buttons>
//           <ion-title>收藏</ion-title>
//           <ion-buttons slot="end">
//             <ion-button 
//               onClick={this.toggleReorder} 
//               style={{ backgroundColor: 'white', color: 'blue', border: 'none' }}
//             >
//               管理
//             </ion-button>
//           </ion-buttons>
//         </ion-toolbar>
//       </ion-header>,

//       <ion-content fullscreen={true}>
//         <ion-list>
//           <ion-list-header>
//             <ion-label>
//               文章收藏
//             </ion-label>
//           </ion-list-header>
//           <ion-reorder-group id="reorder" onIonItemReorder={this.handleReorder}>
//             {this.items.map(item => (
//               <ion-item key={item.id}>
//                 <ion-label>
//                   <a 
//                     href={item.url} 
//                     target="_blank" 
//                     style={{ color: 'black', textDecoration: 'none', transition: 'color 0.3s' }} 
//                     onMouseOver={(e) => {
//                       (e.currentTarget as HTMLAnchorElement).style.color = 'lightcoral';
//                     }} 
//                     onMouseOut={(e) => {
//                       (e.currentTarget as HTMLAnchorElement).style.color = 'black';
//                     }}
//                   >
//                     {item.title}
//                   </a>
//                 </ion-label>
                
//                 <ion-buttons slot="end">
//                   <ion-button>
//                     <ion-icon slot="icon-only" ios="heart-outline" md="heart-sharp"></ion-icon>
//                   </ion-button>
//                   <ion-button onClick={() => this.presentActionSheet(item.id)}>
//                     <ion-icon slot="icon-only" ios="trash-outline" md="trash-sharp"></ion-icon>
//                   </ion-button>
//                 </ion-buttons>
                
//                 <ion-reorder slot="end"></ion-reorder>
//               </ion-item>
//             ))}
//           </ion-reorder-group>
//         </ion-list>
//       </ion-content>
//     ];
//   }
// }
import { Component, h, State } from '@stencil/core';
import { actionSheetController } from '@ionic/core';

@Component({
  tag: 'component-reorder',
  styleUrl: 'reorder.css'
})
export class Reorder {
  @State() items: Array<{ id: number; title: string; url: string }> = [
    { id: 1, title: '你了解亚马逊的运营流程吗？一个老卖家的经验分享', url: 'https://zhuanlan.zhihu.com/p/435669094?zpf=1852381247596273664' },
    { id: 2, title: 'Item 2', url: '#' },
    { id: 3, title: 'Item 3', url: '#' },
    { id: 4, title: 'Item 4', url: '#' },
  ];

  handleReorder = ({ detail }) => {
    detail.complete();
  }

  toggleReorder = () => {
    const reorderGroup = document.getElementById('reorder') as HTMLIonReorderGroupElement;
    reorderGroup.disabled = !reorderGroup.disabled;
  }

  async presentActionSheet(itemId: number) {
    const actionSheet = await actionSheetController.create({
      header: '确认删除',
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '删除',
          handler: () => {
            this.deleteItem(itemId);
          }
        }
      ]
    });
    await actionSheet.present();
  }

  deleteItem(itemId: number) {
    this.items = this.items.filter(item => item.id !== itemId);
  }

  render() {
    return [
      <ion-header translucent={true}>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button defaultHref="/"></ion-back-button>
          </ion-buttons>
          <ion-title>收藏</ion-title>
          <ion-buttons slot="end">
            <ion-button 
              onClick={this.toggleReorder} 
              style={{ backgroundColor: 'white', color: 'blue', border: 'none' }}
            >
              管理
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>,

      <ion-content fullscreen={true}>
        <ion-list>
          <ion-list-header>
            <ion-label>
              文章收藏
            </ion-label>
          </ion-list-header>
          <ion-reorder-group id="reorder" onIonItemReorder={this.handleReorder}>
            {this.items.map(item => (
              <ion-item key={item.id}>
                <ion-label>
                  <a 
                    href={item.url} 
                    target="_blank" 
                    style={{ color: 'black', textDecoration: 'none', transition: 'color 0.3s' }} 
                    onMouseOver={(e) => {
                      (e.currentTarget as HTMLAnchorElement).style.color = 'lightcoral';
                    }} 
                    onMouseOut={(e) => {
                      (e.currentTarget as HTMLAnchorElement).style.color = 'black';
                    }}
                  >
                    {item.title}
                  </a>
                </ion-label>
                
                <ion-buttons slot="end">
                  <ion-button style={{ opacity: '0.6', color: 'red' }}>
                    <ion-icon slot="icon-only" ios="heart-outline" md="heart-sharp"></ion-icon>
                  </ion-button>
                  <ion-button style={{ opacity: '0.6', color: 'gray' }} onClick={() => this.presentActionSheet(item.id)}>
                    <ion-icon slot="icon-only" ios="trash-outline" md="trash-sharp"></ion-icon>
                  </ion-button>
                </ion-buttons>
                
                <ion-reorder slot="end"></ion-reorder>
              </ion-item>
            ))}
          </ion-reorder-group>
        </ion-list>
      </ion-content>
    ];
  }
}