<template>
  <!-- 菜单区-->
  <div>
    <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
      <div class="sds-desktop-layout">
        <li
          class="launch-icon icon-item"
          :class="detailMessage.spacialCls"
          tabindex="0"
          v-for="detailMessage in shortcutDetail.detailMessageList"
          :key="detailMessage.id"
          @click="clickShortcutItem(detailMessage.id)"
        >
          <div
            class="image"
            :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
          >
            <div class="sds-application-notify-badge-num-wrap">
              <div
                id="ext-gen50"
                class="sds-application-notify-badge-num"
                v-if="detailMessage.unReadyMessage.length"
              ></div>
            </div>
          </div>
          <div class="text">{{ detailMessage.title }}</div>
        </li>
      </div>
    </ul>
    <!-- <ResizablePinned :defaultZIndex="defaultZIndex" :detailMessageList = shortcutDetail.detailMessageList></ResizablePinned> -->
  </div>
</template>

<script>
import ResizablePinned from "./ResizablePinned";
export default {
  props: ["defaultZIndex"],
  data() {
    return {
      shortcutDetail: {
        detailMessageList: [
          {
            id: 2,
            width: "1254px",
            height: "calc(100vh - 80px)",
            minHeight: "560px",
            title: "套件中心",
            spacialCls: "tjCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/tjCenter.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [1],
          },
          {
            id: 0,
            width: "1150px",
            height: "calc(100vh - 120px)",
            minHeight: "520px",
            title: "控制中心",
            spacialCls: "controlCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/controlCenter.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [1],
          },
          {
            id: 12,
            width: "1010px",
            height: "calc(100vh - 200px)",
            minHeight: "440px",
            title: "File Station",
            spacialCls: "file",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/file.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [],
          },
          {
            id: 1,
            width: "1010px",
            height: "calc(100vh - 220px)",
            minHeight: "420px",
            title: "DSM 说明",
            spacialCls: "question",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/question.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [],
          },
        ],
      },
    };
  },
  methods: {
    clickShortcutItem(id) {
      this.$bus.emit("clickAppViewItem", id);
    },
  },
  components: {
    ResizablePinned,
  },
  name: "Shortcut",
};
</script>