<template>
  <div class="tray-main" :class="{ 'is-windows': store.isWindows }">
    <VueSvg />
    <div class="tray-aside-inner">
      <ul class="top-tool">
        <li
          :class="{
            'non-draggable': true,
            'swith-power': true,
            on: groupIsRunning,
            disabled: groupDisabled
          }"
          @click="groupDo"
        >
          <yb-icon :svg="import('@/svg/switch.svg?raw')" width="24" height="24" />
        </li>
      </ul>
      <ul class="menu top-menu">
        <el-scrollbar>
          <template v-for="(item, _index) in service" :key="_index">
            <CustomerItem :item="item" />
          </template>
        </el-scrollbar>
      </ul>
      <ul class="bottom-tool">
        <li @click="showMainWin"> {{ I18nT('tray.showMainWin') }} </li>
        <li @click="doExit"> {{ I18nT('tray.exit') }} </li>
      </ul>
    </div>
    <span ref="arrow" class="popper-arrow" :style="{ left: left } as any"></span>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref, Ref } from 'vue'
  import { AppStore } from './store/app'
  import IPC from '../util/IPC'
  import { I18nT } from '@lang/index'
  import VueSvg from '@/components/VueSvgIcon/svg.vue'
  import CustomerItem from './CustomerItem.vue'

  const store = AppStore()
  const groupIsRunning = computed(() => {
    return store.groupIsRunning
  })
  const groupDisabled = computed(() => {
    return store.groupDisabled
  })

  const service = computed(() => {
    return store.service
  })

  const left: Ref<string | null> = ref(null)
  IPC.on('APP:Poper-Left').then((key: string, res: any) => {
    console.log('APP:Poper-Left: ', key, res)
    left.value = `${res}px`
  })

  const groupDo = () => {
    if (groupDisabled?.value) {
      return
    }
    IPC.send('APP:Tray-Command', 'groupDo').then((key: string) => {
      IPC.off(key)
    })
  }

  const showMainWin = () => {
    IPC.send('application:show', 'index').then((key: string) => {
      IPC.off(key)
    })
  }

  const doExit = () => {
    IPC.send('application:exit').then((key: string) => {
      IPC.off(key)
    })
  }

  window.addEventListener('keydown', (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
      e.preventDefault()
    }
  })
  const arrow = ref()
  onMounted(() => {
    const rect = arrow.value.getBoundingClientRect()
    console.log('rect: ', rect)
  })
</script>

<style lang="scss">
  * {
    user-select: none !important;
    box-sizing: border-box;
  }

  html,
  body,
  #app {
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    background: transparent !important;
  }
  #app {
    .tray-main {
      height: 100vh;
      padding-top: 7px;

      .tray-aside-inner {
        display: flex;
        height: 100%;
        flex-flow: column;
        border-radius: 10px !important;
        overflow: hidden;

        > .top-tool {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 20px;
          height: 60px;
          list-style: none;
          flex-shrink: 0;
          > li {
            width: 30px;
            height: 30px;
            cursor: pointer;
            border-radius: 14px;
            transition: background-color 0.25s;
            display: flex;
            justify-content: center;
            align-items: center;

            &.swith-power {
              &.on {
                color: #01cc74;
              }

              &.disabled {
                cursor: not-allowed !important;
              }
            }
          }
        }

        .menu {
          width: 100%;
          padding: 0;
          margin: 0 auto;
          user-select: none;
          cursor: default;
          li {
            height: 45px;
            cursor: pointer;
            transition: background-color 0.25s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 18px;
            .left {
              height: 100%;
              display: flex;
              align-items: center;
              gap: 10px;

              .icon-block {
                width: 30px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;

                &.run {
                  svg {
                    color: #01cc74;
                  }
                }
              }
              .title {
                font-size: 14px;
              }
            }
          }
          svg {
            padding: 6px;
          }
        }
        .top-menu {
          flex: 1;
          overflow: hidden;
        }

        > .bottom-tool {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          font-size: 14px;
          justify-content: space-between;
          padding: 0 24px 2px;
          height: 60px;

          > li {
            cursor: pointer;

            &:hover {
              color: #409eff;
            }
          }
        }
      }

      .popper-arrow {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 2px;
        border-radius: 2px;
        transform-origin: center;
        z-index: -1;
        transform: rotate(45deg);
      }

      &.is-windows {
        padding-top: 0;
        padding-bottom: 7px;

        .popper-arrow {
          top: unset;
          bottom: 2px;
        }
      }
    }
  }

  html.dark {
    #app {
      .popper-arrow {
        background: #32364a;
        border: 1px solid #32364a;
      }
    }
    .tray-aside-inner {
      background: #32364a;
      > .top-tool {
        border-bottom: 1px solid #282b3d;
        > li {
          &:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }
        }
      }

      .menu {
        li {
          &:hover {
            background: #474b60;
          }
        }
        svg {
          color: #fff;
        }
      }
      > .bottom-tool {
        border-top: 1px solid #282b3d;
      }
    }
  }
  html.light {
    --base-bg-color: #f4f5f6;
    --base-bg-color-2: rgba(51, 68, 85, 0.2);
    --base-bg-color-1: rgba(51, 68, 85, 0.15);

    body {
      background: var(--base-bg-color);
    }

    #app {
      .popper-arrow {
        background: var(--base-bg-color);
        border: 1px solid var(--base-bg-color);
      }
    }
    .tray-aside-inner {
      background: var(--base-bg-color);

      > .top-tool {
        border-bottom: 1px solid var(--base-bg-color-1);
        > li {
          &:hover {
            background: var(--base-bg-color-2);
            backdrop-filter: blur(5px);
          }
        }
      }

      .menu {
        color: #345;

        li {
          &:hover {
            background: var(--base-bg-color-1);
          }
        }

        svg {
          color: #345;
        }
      }
      > .bottom-tool {
        border-top: 1px solid var(--base-bg-color-1);
        color: #345;
      }
    }
  }
</style>
