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



// @Component({
//   tag: 'component-input',
//   styleUrl: 'input.css'
// })

// export class Input {
//    




//   aa() {
//     window.location.href = '/component/picker';
//   }
//   @Element() el;
//   @State() firstName: string;
//   dismissOverlay() {
//     document.querySelector('ion-modal').dismiss();
//   }
//   processForm = async (event) => {
//     event.preventDefault();

//     const alert = await alertController.create({
//       header: 'Account Created',
//       message: `Created account for: ${this.firstName} `,
//       buttons: [{
//         text: 'OK'
//       }]
//     })

//     alert.present();
//   }

//   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-toolbar>

//       </ion-header>,

//       <ion-content fullscreen={true}>
//         <form class="form-container" onSubmit={this.processForm}>
//           <ion-list lines="full" class="ion-no-margin ion-no-padding">
//             <ion-item>
//               <ion-label position="stacked">商家名称 <ion-text color="danger">*</ion-text></ion-label>
//               <ion-input aria-label="First Name" required type="text" onInput={(e: any) => { this.firstName = e.target.value}} value={this.firstName}></ion-input>
//             </ion-item>


//             <ion-item>
//               <ion-label position="stacked">地址</ion-label>
//               <ion-input aria-label="住址" placeholder="住址"></ion-input>
//             </ion-item>
//             <ion-item>
//             <ion-select label="" label-placement="stacked" placeholder="营销方式" interface="popover">
//               <ion-select-option value="f">线上营销</ion-select-option>
//               <ion-select-option value="m">线上线下合体营销</ion-select-option>
//             </ion-select>
//           </ion-item>
//             <ion-item>
//             <ion-label position="stacked">基本信息</ion-label>
//               <ion-input aria-label="联系方式" placeholder="联系方式"></ion-input>             
//               <ion-input label="商家说明" labelPlacement="floating" placeholder="介绍一下"></ion-input>
//               <ion-textarea label="签名" ></ion-textarea>
//             </ion-item>
//             <ion-item href={'/component/picker'} style={{ display: 'flex', alignItems: 'center' }}>
//     <ion-icon slot="start" icon="your-icon-name"></ion-icon>
//     <ion-label style={{ flex: '1' }}>标签</ion-label>
//     <ion-icon 
//         slot="end" 
//         icon="chevron-forward" 
//         style={{ color: 'rgba(0, 0, 0, 0.5)' }} // 设置箭头为淡色
//     ></ion-icon>
// </ion-item>
//           </ion-list> 
//           <div class="ion-padding">
//             <ion-button expand="block" type="submit"  class="ion-text-wrap ion-no-margin">保存</ion-button>
//           </div>
//         </form>
//         <ion-fab horizontal="end" vertical="bottom" slot="fixed">
//   <ion-fab-button color="light">
//     <ion-icon name="share"></ion-icon>
//   </ion-fab-button>
//   <ion-fab-list side="top">
//     <ion-fab-button color="primary">
//     <ion-icon name="logo-whatsapp"></ion-icon>
//     </ion-fab-button>
//   </ion-fab-list>
//   <ion-fab-list side="end">
//     <ion-fab-button color="dark">
//       <ion-icon name="logo-twitter"></ion-icon>
//     </ion-fab-button>
//   </ion-fab-list>
//   <ion-fab-list side="bottom">
//     <ion-fab-button color="secondary">
//       <ion-icon name="logo-facebook"></ion-icon>
//     </ion-fab-button>
//   </ion-fab-list>
//   <ion-fab-list side="start">
//     <ion-fab-button color="light">
//       <ion-icon name="logo-google"></ion-icon>
//     </ion-fab-button>
//   </ion-fab-list>
// </ion-fab>
//       </ion-content>,
//     ];
//   }
 
// }
import { Component, Element, State, h } from '@stencil/core';
import { alertController } from '@ionic/core';

@Component({
  tag: 'component-input',
  styleUrl: 'input.css'
})

export class Input {
  @Element() el;
  @State() firstName: string;

  dismissOverlay() {
    document.querySelector('ion-modal').dismiss();
  }

  processForm = async (event) => {
    event.preventDefault();

    const alert = await alertController.create({
      header: 'Account Created',
      message: `Created account for: ${this.firstName}`,
      buttons: [{
        text: 'OK'
      }]
    });

    alert.present();
  }

  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-toolbar>
      </ion-header>,

      <ion-content fullscreen={true}>
        <form class="form-container" onSubmit={this.processForm}>
          <ion-list lines="full" class="ion-no-margin ion-no-padding">
            <ion-item>
              <ion-label position="stacked">商家名称 <ion-text color="danger">*</ion-text></ion-label>
              <ion-input aria-label="First Name" required type="text" onInput={(e: any) => { this.firstName = e.target.value }} value={this.firstName}></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked">地址</ion-label>
              <ion-input aria-label="住址" placeholder="住址"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked">营销方式</ion-label>
              <ion-select placeholder="选择营销方式" interface="popover">
                <ion-select-option value="f">线上营销</ion-select-option>
                <ion-select-option value="m">线上线下合体营销</ion-select-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label position="stacked">基本信息</ion-label>
              <ion-input aria-label="联系方式" placeholder="联系方式"></ion-input>
              <ion-input label="商家说明" labelPlacement="floating" placeholder="介绍一下"></ion-input>
              <ion-textarea label="签名" placeholder="输入签名"></ion-textarea>
            </ion-item>

            <ion-item href={'/component/picker'} style={{ display: 'flex'}}>
  <ion-label style={{ flex: '1' }}>标签</ion-label>
  <ion-icon 
    slot="end" 
    icon="chevron-forward" 
    style={{ color: 'rgba(0, 0, 0, 0.5)' }} // 设置箭头为淡色
  ></ion-icon>
</ion-item>
          </ion-list> 

          <div class="ion-padding">
            <ion-button expand="block" type="submit" class="ion-text-wrap ion-no-margin">保存</ion-button>
          </div>
        </form>

        <ion-fab horizontal="end" vertical="bottom" slot="fixed">
          <ion-fab-button color="light">
            <ion-icon name="share"></ion-icon>
          </ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button color="primary">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="end">
            <ion-fab-button color="dark">
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="bottom">
            <ion-fab-button color="secondary">
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="start">
            <ion-fab-button color="light">
              <ion-icon name="logo-google"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        </ion-fab>
      </ion-content>,
    ];
  }
}