import{i as h,a as y,b as t,n as o}from"./property-ChPqBGW_.js";var u=Object.defineProperty,s=(n,a,d,c)=>{for(var i=void 0,l=n.length-1,p;l>=0;l--)(p=n[l])&&(i=p(a,d,i)||i);return i&&u(a,d,i),i};const r=class r extends h{constructor(){super(...arguments),this.layout="gallery",this.hideHeader=!1,this.hideControls=!1,this.showParticipants=!1,this.showHandRaises=!1}renderGalleryLayout(){return t`
      <div class="layout-body gallery">
        <div class="video-area">
          <slot name="video-grid"></slot>
          ${this.renderFloatingPanels()}
        </div>
      </div>
    `}renderSpeakerLayout(){return t`
      <div class="layout-body speaker">
        <div class="main-video">
          <slot name="main-video"></slot>
        </div>
        <div class="side-panel ${this.showParticipants?"open":""}">
          <slot name="participants-panel"></slot>
        </div>
      </div>
    `}renderSidebarLayout(){return t`
      <div class="layout-body sidebar">
        <div class="main-content">
          <div class="video-area">
            <slot name="video-grid"></slot>
            ${this.renderFloatingPanels()}
          </div>
        </div>
        <div class="side-panel ${this.showParticipants?"open":""}">
          <slot name="participants-panel"></slot>
        </div>
      </div>
    `}renderFloatingPanels(){return t`
      <div class="floating-panels">
        ${this.showHandRaises?t`
          <div class="hand-raise-panel">
            <slot name="hand-raise-panel"></slot>
          </div>
        `:""}
        ${this.showParticipants&&this.layout==="gallery"?t`
          <div class="participants-panel">
            <slot name="participants-panel"></slot>
          </div>
        `:""}
      </div>
    `}render(){let a;switch(this.layout){case"speaker":a=this.renderSpeakerLayout();break;case"sidebar":a=this.renderSidebarLayout();break;default:a=this.renderGalleryLayout()}return t`
      <div class="meeting-layout">
        <div class="layout-header">
          <slot name="header"></slot>
        </div>
        ${a}
        <div class="layout-footer">
          <slot name="controls"></slot>
        </div>
      </div>
    `}};r.styles=y`
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }

    .meeting-layout {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background: #1a1a2e;
      overflow: hidden;
    }

    /* 头部区域 */
    .layout-header {
      flex-shrink: 0;
    }

    /* 主体区域 */
    .layout-body {
      flex: 1;
      display: flex;
      min-height: 0;
      position: relative;
    }

    /* 画廊布局 */
    .layout-body.gallery {
      flex-direction: column;
    }

    .layout-body.gallery .video-area {
      flex: 1;
      min-height: 0;
    }

    /* 演讲者布局 */
    .layout-body.speaker {
      flex-direction: row;
    }

    .layout-body.speaker .main-video {
      flex: 1;
      min-width: 0;
    }

    .layout-body.speaker .side-panel {
      width: 240px;
      flex-shrink: 0;
      border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 侧边栏布局 */
    .layout-body.sidebar {
      flex-direction: row;
    }

    .layout-body.sidebar .main-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .layout-body.sidebar .main-content .video-area {
      flex: 1;
      min-height: 0;
    }

    .layout-body.sidebar .side-panel {
      width: 280px;
      flex-shrink: 0;
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.3);
    }

    /* Video area */
    .video-area {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* 悬浮面板 */
    .floating-panels {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 10;
    }

    .floating-panels > * {
      pointer-events: auto;
    }

    .hand-raise-panel {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 20;
    }

    .participants-panel {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 20;
    }

    /* 控制栏区域 */
    .layout-footer {
      flex-shrink: 0;
    }

    /* 隐藏Status */
    :host([hide-header]) .layout-header {
      display: none;
    }

    :host([hide-controls]) .layout-footer {
      display: none;
    }

    /* 响应式 */
    @media (max-width: 768px) {
      .layout-body.speaker .side-panel,
      .layout-body.sidebar .side-panel {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 30;
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }

      .layout-body.speaker .side-panel.open,
      .layout-body.sidebar .side-panel.open {
        transform: translateX(0);
      }
    }
  `;let e=r;s([o({type:String})],e.prototype,"layout");s([o({type:Boolean,attribute:"hide-header"})],e.prototype,"hideHeader");s([o({type:Boolean,attribute:"hide-controls"})],e.prototype,"hideControls");s([o({type:Boolean,attribute:"show-participants"})],e.prototype,"showParticipants");s([o({type:Boolean,attribute:"show-hand-raises"})],e.prototype,"showHandRaises");customElements.get("m7s-meeting-room-layout")||customElements.define("m7s-meeting-room-layout",e);export{e as MeetingRoomLayout};
