import { css, html, LitElement, unsafeCSS } from 'lit'
import { customElement } from 'lit/decorators.js'
import desktopStyle from './css/desktop.scss?inline'

@customElement('desktop-element')
export class DesktopElement extends LitElement {
  static override styles = css`
    ${unsafeCSS(desktopStyle)}
  `

  private onContextMenu = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    console.log('contextmenu')
  }

  override render() {
    return html`
      <div class="desktop-root" @contextmenu=${this.onContextMenu}>
        <div class="desktop-container">
          <div class="desktop-icons-container"
               :style="gridStyle">
            <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
                     :iconInfo="appIcon" :gridTemplate="gridTemplate"
                     @dblclick="runApp(appIcon)"
            />
          </div>
        </div>
        <div class="task-bar">
          <div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">测试</div>
        </div>
      </div>
    `
  }
}