<template>
  <!-- 搜索框 -->
  <div
    class="
      x-window
      syno-finder
      spotlight-main-window
      sds-window-v5
      spotlight-init
    "
    style="
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      top: 39px;
      width: 638px;
    "
    :style="{
      display: searchInputContant.display,
      zIndex: searchInputContant.zIndex,
    }"
    :class="searchInputContant.cls"
    @click.stop="clickSearchInput"
  >
    <div class="x-dlg-focus"></div>
    <div class="x-window-tl">
      <div class="x-window-tr">
        <div class="x-window-tc">
          <div class="x-window-header x-panel-icon x-window-draggable">
            <div class="x-window-toolCt">
              <div class="x-tool x-tool-close">&nbsp;</div>
              <div class="x-tool x-tool-restore" style="display: none">
                &nbsp;
              </div>
              <div class="x-tool x-tool-maximize">&nbsp;</div>
              <div class="x-tool x-tool-minimize">&nbsp;</div>
              <div class="x-tool x-tool-help">&nbsp;</div>
            </div>
            <span class="x-window-header-text">Spotlight</span>
          </div>
        </div>
      </div>
    </div>
    <div class="x-window-bwrap" :class="searchCls">
      <div class="x-window-ml">
        <div class="x-window-mr">
          <div class="x-window-mc">
            <div class="x-window-body" style="width: 638px; height: 48px">
              <div
                class="x-panel syno-ux-panel x-panel-noborder"
                style="width: 638px"
              >
                <div class="x-panel-bwrap">
                  <div
                    class="
                      x-panel-body
                      x-panel-body-noheader
                      x-panel-body-noborder
                      x-box-layout-ct
                    "
                    style="width: 638px; height: 48px"
                  >
                    <div class="x-box-inner" style="width: 638px; height: 48px">
                      <div
                        class="
                          x-panel
                          search-bar
                          syno-ux-panel
                          x-panel-noborder x-box-item
                          search-now-placeholder
                        "
                        style="
                          position: absolute;
                          z-index: 11000;
                          visibility: visible;
                          left: 0px;
                          top: 0px;
                          width: 638px;
                        "
                      >
                        <div class="x-panel-bwrap">
                          <div
                            class="
                              x-panel-body
                              x-panel-body-noheader
                              x-panel-body-noborder
                              x-box-layout-ct
                            "
                            style="height: 46px; width: 638px"
                          >
                            <div
                              class="x-box-inner"
                              style="width: 638px; height: 46px"
                            >
                              <div
                                class="magnifier x-box-item"
                                :class="searchIconCls"
                                @click.capture="showOrHiddenSelect"
                                style="
                                  width: 70px;
                                  height: 22px;
                                  left: 0px;
                                  top: 0px;
                                "
                              ></div>
                              <input
                                type="text"
                                size="20"
                                autocomplete="off"
                                class="
                                  x-form-text x-form-field
                                  text-field
                                  syno-ux-textfield
                                  x-box-item
                                "
                                style="
                                  margin-left: 0px;
                                  height: 46px;
                                  width: 512px;
                                  left: 70px;
                                  top: 0px;
                                "
                                v-model="keyword"
                                @input="searchKeyword"
                                @focus="searchInputFocus"
                              />
                              <div
                                class="loading-icon x-box-item"
                                style="
                                  width: 24px;
                                  height: 46px;
                                  left: 598px;
                                  top: 0px;
                                "
                              ></div>
                              <div class="x-form-hidden-error-msg"></div>
                              <div
                                class="dummy-searchfield"
                                style="
                                  width: 512px;
                                  height: 46px;
                                  left: 70px;
                                  top: 0px;
                                "
                                :style="{ display: searchFieldDisplay }"
                              >
                                <div
                                  class="suggestion"
                                  style="width: 512px; height: 46px"
                                >
                                  <span class="dummy"></span>立即搜索{{
                                    searchText
                                  }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="x-window-bl x-panel-nofooter">
        <div class="x-window-br"><div class="x-window-bc"></div></div>
      </div>
    </div>
    <div
      class="x-panel x-panel-noborder x-box-item"
      style="width: 638px; left: 0px; top: 48px"
    >
      <div class="x-panel-bwrap" :style="{ display: panelBwrapDisplay }">
        <div
          class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
          style="width: 638px; height: 370px"
        >
          <div
            class="x-panel main-panel syno-ux-panel x-panel-noborder"
            style="width: 638px; height: 370px"
          ></div>
        </div>
      </div>
    </div>
    <div
      class="x-panel syno-finder-spotlight-menu x-panel-noborder syno-ux-panel"
      style="
        position: absolute;
        z-index: 11000;
        left: 10px;
        top: 45px;
        width: 184px;
      "
      :style="{ display: selectDisplay }"
    >
      <div class="x-panel-bwrap">
        <div
          class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
          style="width: 184px"
        >
          <div style="width: 184px; height: 200px">
            <div
              class="cat-wrapper"
              :class="select.cls"
              v-for="(select, selectIndex) in searchInputDetail.selectList"
              :key="select.id"
              @click="changeSearchMethod(selectIndex, select.cls1)"
            >
              <span class="icon" :class="select.cls1"></span>{{ select.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["searchInputData", "defaultZIndex"],
  mounted() {
    this.$bus.on("openSearchInput", this.openSearchInput);
    this.searchInputContant = this.searchInputData;
  },
  data() {
    return {
      searchInputContant: {
        display: "none",
        zIndex: 9050,
        cls: "deactive-win",
      },
      searchText: "",
      keyword: "",
      searchCls: "",
      searchIconCls: "everything",
      selectDisplay: "none",
      searchFieldDisplay: "block",
      panelBwrapDisplay: "none",
      searchInputDetail: {
        selectList: [
          {
            id: 0,
            cls: "",
            cls1: "document",
            text: "文档",
          },
          {
            id: 1,
            cls: "",
            cls1: "photo",
            text: "照片",
          },
          {
            id: 2,
            cls: "",
            cls1: "audio",
            text: "音乐",
          },
          {
            id: 3,
            cls: "",
            cls1: "video",
            text: "视频",
          },
          {
            id: 4,
            cls: "current",
            cls1: "everything",
            text: "全部",
          },
        ],
      },
    };
  },
  methods: {
    // 显示或隐藏本页面
    openSearchInput(e) {
      if (
        this.searchInputContant.display === "none" ||
        this.searchInputContant.zIndex < this.defaultZIndex
      ) {
        this.searchInputContant.display = "block";
        this.searchInputContant.cls = "active-win";
        this.searchInputContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        if (!e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className + " pressed";
        }
        window.addEventListener("click", this.hiddenSearchInput);
      } else {
        this.searchInputContant.display = "none";
        this.searchInputContant.zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        this.searchInputContant.cls = "deactive-win";
        // this.searchInputContant.zIndex = this.defaultZIndex - 10;
        // this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        if (
          e.srcElement.className &&
          e.srcElement.className.includes(" pressed")
        ) {
          e.srcElement.className = e.srcElement.className.replace(
            " pressed",
            ""
          );
        }
        window.removeEventListener("click", this.hiddenSearchInput);
      }
    },
    // 隐藏本页面
    hiddenSearchInput(e) {
      let el = document.querySelector(".tray-item.search-button");
      let el1 = document.querySelector(".syno-finder.spotlight-main-window");
      if (e.srcElement === el) {
        window.addEventListener("click", this.hiddenSearchInput);
      } else {
        this.searchInputContant.display = "none";
        window.removeEventListener("click", this.hiddenSearchInput);
        this.panelBwrapDisplay = "none";
        if (el.className && el.className.includes(" pressed")) {
          el.className = el.className.replace(" pressed", "");
        }
        this.searchFieldDisplay = "block";
        this.selectDisplay = "none";
        this.searchCls = "";
        if (el1.className.includes(" merge")) {
          el1.className = el1.className.replace(" merge");
        }
        this.keyword = "";
        if (this.searchInputContant.zIndex >= this.defaultZIndex) {
          this.searchInputContant.cls = "deactive-win";
          this.searchInputContant.zIndex = this.defaultZIndex - 10;
          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        }
      }
    },
    // 点击本页面
    clickSearchInput(e) {
      if (this.searchInputContant.display === "deactive-win") {
        this.searchInputContant.cls = "active-win";
        this.searchInputContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    // 显示或隐藏选择框
    showOrHiddenSelect() {
      if (this.selectDisplay === "none") {
        this.selectDisplay = "block";
      } else {
        this.selectDisplay = "none";
      }
    },
    // 切换搜索方式
    changeSearchMethod(selectIndex, cls) {
      this.searchIconCls = cls;
      this.searchInputDetail.selectList.forEach((item) => {
        if (item.cls.includes("current")) {
          item.cls = item.cls.replace("current", "");
        }
      });
      if (
        !this.searchInputDetail.selectList[selectIndex].cls.includes("current")
      ) {
        this.searchInputDetail.selectList[selectIndex].cls =
          this.searchInputDetail.selectList[selectIndex].cls + "current";
      }
      this.selectDisplay = "none";
      if (selectIndex < 4) {
        this.searchText = this.searchInputDetail.selectList[selectIndex].text;
      } else {
        this.searchText = "";
      }
    },
    // 输入搜索
    searchKeyword() {
      let el = document.querySelector(".syno-finder.spotlight-main-window");
      if (!this.keyword.trim()) {
        this.panelBwrapDisplay = "none";
        this.searchFieldDisplay = "block";
        this.searchCls = "";
        if (el.className.includes(" merge")) {
          el.className = el.className.replace(" merge");
        }
      } else {
        this.panelBwrapDisplay = "block";
        this.searchFieldDisplay = "none";
        this.searchCls = "merge";
        if (!el.className.includes(" merge")) {
          el.className = el.className + " merge";
        }
      }
    },
    // 输入框聚焦
    searchInputFocus() {
      this.selectDisplay = "none";
    },
  },
  components: {},
  name: "SearchInput",
};
</script>
