<template>
  <div>
    <!-- 主菜单界面 -->
    <div
      class="syno-sds-appview syno-sds-appview-animate"
      style="width: 100%; height: 100%"
      :style="{display:display}"
    >
      <div class="syno-sds-appview-container">
        <div class="search-field" style="width: 278px">
          <input
            type="text"
            size="16"
            placeholder="搜索"
            class="search-field-input"
            @click.stop="searchInputFocus"
          />
          <button
            type="button"
            class="search-field-clear-btn"
            style="display: none"
          ></button>
        </div>
      </div>
      <div class="sds-shortcut-wrapper">
        <div class="shortcut-zone" style="width: 13%"></div>
        <div class="shortcut-zone right-zone" style="width: 13%"></div>
      </div>
      <div class="sds-app-panel">
        <div class="v-ps ps ps--active-y" v-if="DesktopAppViewDetail.detailMessageList.length">
          <div class="app-layout-wrapper" style="width: 74%; height: 100%">
            <div
              class="sds-desktop-layout search-layout"
              style="display: none"
            ></div>
            <div class="sds-desktop-layout">
              <li
                class="launch-icon app-item-icon"
                v-for="
                  detailMessage in DesktopAppViewDetail.detailMessageList"
                :key="detailMessage.id"
              >
                <div
                  class="image"
                  :style="{
                    backgroundImage: `url(${detailMessage.titleImgUrl})`,
                  }"
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">{{ detailMessage.title }}</div>
              </li>
              <!-- <li
                class="launch-icon app-item-icon"
                style="left: 172px; top: 0px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/HelpBrowser/images/1x/help_72.png?v=42661-s0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">DSM 说明</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 344px; top: 0px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/PkgManApp/images/package_center_72.png?v=42661-s0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">套件中心</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 516px; top: 0px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/ResourceMonitor/images/default/1x/ResourceMonitor_72.png?v=42661-s0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">资源监控</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 688px; top: 0px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/StorageManager/images/storage_manager_72.png?v=42661-s0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">存储管理器</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 860px; top: 0px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/LogCenter/images/log_center_72.png?v=42661-s0&amp;app_version=1.0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">日志中心</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 0px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/SecurityScan/images/security_scan_72.png?v=42661-s0&amp;app_version=1.0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">安全顾问</div>
              </li>
              <li
                class="launch-icon app-item-icon"
                style="left: 172px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webman/modules/SupportForm/images/1x/SupportCenter_72.png?v=42661-s0');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">技术支持中心</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 344px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/ScsiTarget/images/SANManager_{0}.png');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">SAN Manager</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 516px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MailPlus-Server/images/MailPlusServer_{0}.png&amp;app_version=2.3.2-11072');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology MailPlus Server</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 688px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Chat/images/icon_admin/ChatAdmin_{0}.png&amp;app_version=2.4.0-11977');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Chat 管理控制台</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 860px; top: 156px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Chat/images/icon/chat_{0}.png&amp;app_version=2.4.0-11977');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Chat</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 0px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/FileBrowser/images/icon/FileStation_{0}.png&amp;app_version=1.3.3-1399');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">File Station</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 172px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/HyperBackup/images/HyperBackup_{0}.png&amp;app_version=3.0.2-2517');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Hyper Backup</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 344px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/CodecPack/images/icon/AME_{0}.png&amp;app_version=2.0.0-1017');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Advanced Media Extensions</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 516px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Calendar/images/Calendar_{0}.png&amp;app_version=2.4.4-10928');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Calendar</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 688px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Contacts/icon/Contacts_{0}.png&amp;app_version=1.0.3-10478');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Contacts</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 860px; top: 312px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynoFinder/images/icon/UniversalSearch_{0}.png&amp;app_version=1.6.0-0534');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Universal Search</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 0px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyPhotos/images/icon/photos_{0}.png&amp;app_version=1.2.0-0263');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Photos</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 172px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/AudioStation/images/AudioStation_{0}.png&amp;app_version=7.0.1-5209');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Audio Station</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 344px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive/images/DriveAdminConsole_{0}.png&amp;app_version=3.1.0-22920');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Drive 管理控制台</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 516px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/DownloadStation/images/download_station_{0}.png&amp;app_version=3.9.3-4609');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Download Station</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 688px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive-Drive/images/_Favicon/SynologyDrive_{0}.png&amp;app_version=3.1.0-22920');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Drive</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 860px; top: 468px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MailClient/images/icon/MailPlus_{0}.png&amp;app_version=2.3.2-11450');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology MailPlus</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 0px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MediaServer/images/MediaServer_{0}.png&amp;app_version=2.0.2-3053');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">媒体服务器</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 172px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/NoteStation/images/NoteStation_{0}.png&amp;app_version=2.6.1-2450');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Note Station</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 344px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/OAuthService/images/Authenticator_{0}.png&amp;app_version=1.1.2-0071');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">OAuth Service</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 516px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/PDFViewer/images/icon/DocumentViewer_{0}.png&amp;app_version=1.2.3-1124');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">PDF 查看器</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 688px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive-ShareSync/images/package-{0}.png&amp;app_version=3.1.0-22920');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Synology Drive ShareSync</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 860px; top: 624px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/VideoStation/images/app/VideoStation_{0}.png&amp;app_version=3.0.3-2084');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">Video Station</div>
              </li>
              <li
                class="launch-icon app-item-icon start"
                style="left: 0px; top: 780px"
              >
                <div
                  class="image"
                  style="
                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/TextEditor/images/TextEditor_{0}.png&amp;app_version=1.2.4-0245');
                  "
                >
                  <div
                    class="sds-application-notify-badge-num"
                    style="opacity: 0"
                  ></div>
                </div>

                <div class="text">文本编辑器</div>
              </li> -->
            </div>
          </div>
        </div>
        <div class="sds-desktop-no-result" v-else>
          找不到符合的项目。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      DesktopAppViewDetail: {
        detailMessageList: [
          {
            id: 0,
            title: "控制中心",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/controlCenter.png",
          },
          {
            id: 1,
            title: "DSM 说明",
            spacialCls: "question",
            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
          },
          {
            id: 2,
            title: "套件中心",
            spacialCls: "tjCenter",
            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
          },
          {
            id: 3,
            title: "资源监控",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/resourceMonitor.png",
          },
          {
            id: 4,
            title: "存储管理器",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/storageManager.png",
          },
          {
            id: 5,
            title: "日志中心",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/logCenter.png",
          },
          {
            id: 6,
            title: "安全顾问",
            spacialCls: "file",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/securityScan.png",
          },
          {
            id: 7,
            title: "技术支持中心",
            spacialCls: "question",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/supportCenter.png",
          },
          {
            id: 8,
            title: "Storage Manager",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/storageManager.png",
          },
          {
            id: 9,
            title: "Synology MailPlus Server",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/mailPlusServer.png",
          },
          {
            id: 10,
            title: "Synology Chat 管理控制台",
            spacialCls: "file",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/chatAdminpng.png",
          },
          {
            id: 11,
            title: "Synology Chat",
            spacialCls: "question",
            titleImgUrl: "../../../../public/image/DesktopAppView/chat.png",
          },
          {
            id: 12,
            title: "File Station",
            spacialCls: "file",
            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
          },
          {
            id: 13,
            title: "Hyper Backup",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/hyperBackup.png",
          },
          {
            id: 14,
            title: "Advanced Media Extensions",
            spacialCls: "file",
            titleImgUrl: "../../../../public/image/DesktopAppView/aME.png",
          },
          {
            id: 15,
            title: "Synology Calendar",
            spacialCls: "question",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/synologyCalendar.png",
          },
          {
            id: 16,
            title: "Synology Contacts",
            spacialCls: "tjCenter",
            titleImgUrl: "../../../../public/image/DesktopAppView/contacts.png",
          },
          {
            id: 17,
            title: "Universal Search",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/universalSearch.png",
          },
          {
            id: 18,
            title: "Synology Photos",
            spacialCls: "file",
            titleImgUrl: "../../../../public/image/DesktopAppView/photos.png",
          },
          {
            id: 19,
            title: "Audio Station",
            spacialCls: "question",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/audioStation.png",
          },
          {
            id: 20,
            title: "Synology Drive 管理控制台",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/driveAdminConsole.png",
          },
          {
            id: 21,
            title: "Download Station",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/downloadStation.png",
          },
          {
            id: 22,
            title: "Synology Drive",
            spacialCls: "file",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/synologyDrive.png",
          },
          {
            id: 23,
            title: "Synology MailPlus",
            spacialCls: "question",
            titleImgUrl: "../../../../public/image/DesktopAppView/mailPlus.png",
          },
          {
            id: 24,
            title: "媒体服务器",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/mediaServer.png",
          },
          {
            id: 25,

            title: "Note Station",
            spacialCls: "question",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/noteStation.png",
          },
          {
            id: 26,
            title: "OAuth Service",
            spacialCls: "controlCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/authenticator.png",
          },
          {
            id: 27,
            title: "PDF 查看器",
            spacialCls: "tjCenter",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/documentViewer.png",
          },
          {
            id: 28,
            title: "Synology Drive ShareSync",
            spacialCls: "file",
            titleImgUrl: "../../../../public/image/DesktopAppView/package.png",
          },
          {
            id: 29,
            title: "Video Station",
            spacialCls: "file",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/videoStation.png",
          },
          {
            id: 30,
            title: "文本编辑器",
            spacialCls: "file",
            titleImgUrl:
              "../../../../public/image/DesktopAppView/textEditor.png",
          },
        ],
      },
      display: 'none',
    };
  },
  mounted(){
    this.$bus.on("showAppView",this.showAppView)
  },
  methods:{
    // 显示appView页面
    showAppView(){
      this.display = 'block'
      this.$bus.emit('appViewIsOpen',true)
      window.onclick = ()=>{
        this.display = 'none'
        this.$bus.emit('appViewIsOpen',false)
      }
    },
    // 搜索框聚焦
    searchInputFocus(e){
      if(! e.srcElement.parentElement.className.includes('search-field-focused'))
      console.log(e.srcElement.parentElement.className += ' search-field-focused')
    }
    // 
  },
  components: {},
  name: "DesktopAppView",
};
</script>

<style lang="css" scoped>
.sds-desktop-layout {
  display: grid;
  flex-direction: row;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 172px);
  overflow: -moz-scrollbars-none;
}
.app-layout-wrapper::-webkit-scrollbar {
  width: 0 !important;
}

.app-layout-wrapper {
  overflow: scroll;
}

.syno-sds-appview .sds-app-panel .sds-desktop-layout {
  justify-content: space-around;
}

.syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
  align-self: flex-start;
}

.search-field input::-webkit-input-placeholder {
  color: rgb(102 111 122);
}

.search-field input:-moz-placeholder {
  color: rgb(102 111 122);
}

.search-field input:-ms-input-placeholder {
  color: rgb(102 111 122);
}
</style>