<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, detailMessageIndex
          ) in shortcutDetail.detailMessageList"
          :key="detailMessage.id"
          @click="
            clickShortcutItem(
              detailMessageIndex,
              detailMessage.spacialCls,
              detailMessage.titleImgUrl
            )
          "
        >
          <div
            class="image"
            :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
          >
            <div class="sds-application-notify-badge-num-wrap">
              <div
                class="sds-application-notify-badge-num"
                style="opacity: 0"
              ></div>
            </div>
          </div>
          <div class="text">{{ detailMessage.title }}</div>
        </li>
        <!-- 
                    <li class="launch-icon icon-item controlCenter">
                        <div class="image" style="background-image: url(../../../public//image/index/controlCenter.png)">
                            <div class="sds-application-notify-badge-num-wrap">
                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
                            </div>
                        </div>
                        <div class="text">控制面板</div>

                    </li>
                    <li class="launch-icon icon-item file">
                        <div class="image" style="background-image: url(../../../public//image/index/file.png)">
                            <div class="sds-application-notify-badge-num-wrap">
                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
                            </div>
                        </div>
                        <div class="text">File Station</div>

                    </li>
                    <li class="launch-icon icon-item question">
                        <div class="image" style="background-image: url(../../../public//image/index/question.png)">
                            <div class="sds-application-notify-badge-num-wrap">
                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
                            </div>
                        </div>
                        <div class="text">DSM 说明</div>

                    </li>
                -->
      </div>
    </ul>
    <ResizablePinned :defaultZIndex="defaultZIndex"></ResizablePinned>
  </div>
</template>

<script>
import ResizablePinned from "./ResizablePinned";
export default {
  props: ["defaultZIndex"],
  data() {
    return {
      shortcutDetail: {
        detailMessageList: [
          {
            id: "0",
            title: "套件中心",
            spacialCls: "tjCenter",
            titleImgUrl: "../../../../public/image/index/tjCenter.png",
          },
          {
            id: "1",
            title: "控制中心",
            spacialCls: "controlCenter",
            titleImgUrl: "../../../../public/image/index/controlCenter.png",
          },
          {
            id: "2",
            title: "File Station",
            spacialCls: "file",
            titleImgUrl: "../../../../public/image/index/file.png",
          },
          {
            id: "3",
            title: "DSM 说明",
            spacialCls: "question",
            titleImgUrl: "../../../../public/image/index/question.png",
          },
        ],
      },
    };
  },
  methods: {
    clickShortcutItem(detailMessageIndex, spacialCls, imgUrl) {
      let obj = { detailMessageIndex, spacialCls, imgUrl };
      this.$bus.emit("clickShortcutItem", obj);
    },
  },
  components: {
    ResizablePinned,
  },
  name: "Shortcut",
};
</script>