<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from "vue";
import { Meta2d, Options } from "@meta2d/core";
import ContextMenu from "../components/ContextMenu.vue";
import SvgIcon from "../components/SvgIcon.vue";
import { registerAreaPens } from "./pens/register";

const meta2dOptions: Options = {
  x: 0,
  y: 0,
  width: 820,
  height: 660,
  background: "#F5F7FA",
  shadowBlur: 0,
  disableAnchor: true,
};

onMounted(() => {
  new Meta2d("env-area-meta2d", meta2dOptions);
  registerAreaPens()
});

onUnmounted(() => {
  meta2d?.destroy();
});

const contextmenu = reactive({
  visible: false,
  type: "",
  style: {},
});

const changeContextMenuVisible = (e: boolean) => {
  contextmenu.visible = e;
};

const handleOk = () => {
  return;
};

const handleCancel = () => {
  return;
};
</script>

<template>
  <div class="env-area-meta2d">
    <div class="tools">
      <t-button class="hvac-outline-button" variant="outline" @click="handleOk">
        <SvgIcon name="check"></SvgIcon>
      </t-button>
      <t-button
        class="hvac-outline-button"
        variant="outline"
        @click="handleCancel"
      >
        <SvgIcon name="close"></SvgIcon>
      </t-button>
    </div>
    <div class="meta2d-bg-layer">
      <t-button
        class="hvac-outline-button temperature-humidity-button outdoor"
        variant="outline"
        @click="handleOk"
      >
        <SvgIcon name="outdoor"></SvgIcon>
        <span>{{ $t("点击配置") }}</span>
      </t-button>
      <t-button
        class="hvac-outline-button temperature-humidity-button home"
        variant="outline"
        @click="handleCancel"
      >
        <SvgIcon name="home"></SvgIcon>
        <span>22.9℃｜60.6%</span>
      </t-button>
      <div id="env-area-meta2d"></div>
    </div>
    <ContextMenu
      v-if="contextmenu.visible"
      :type="contextmenu.type"
      :style="contextmenu.style"
      @changeVisible="changeContextMenuVisible"
    ></ContextMenu>
  </div>
</template>

<style lang="postcss" scoped>
.env-area-meta2d {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-left: 1px solid #e4e7ed;

  .tools {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 48px;
    flex-shrink: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    border-bottom: 1px solid #e4e7ed;

    button {
      width: 32px;
      height: 32px;
      font-size: 16px;

      & + button {
        margin-left: 16px;
      }
    }
  }

  .meta2d-bg-layer {
    position: relative;
    flex: 1;
    background-image: radial-gradient(circle, #d8d8d8 1px, #fff 1px);
    background-size: 15px 15px;
    background-position: center center;
    overflow: auto;
    padding: 40px;
  }

  #env-area-meta2d {
    width: 820px;
    height: 660px;
    z-index: 1;
    overflow: hidden;
    outline: 1px solid var(--color-primary);
    border-radius: 12px;
    top: 24px;
  }

  .temperature-humidity-button {
    position: absolute;
    left: 56px;
    font-size: 12px;
    z-index: 10;

    i {
      font-size: 14px;
    }

    &.outdoor {
      top: 16px;
    }

    &.home {
      top: 80px;
    }
  }
}
</style>
