<template>
  <div
    ref="quickSearch"
    class="quick-search"
  >
    <!-- 搜索图标 -->
    <i
      id="searchIcon"
      class="el-icon-search search-icon"
      @click="showInput"
    />

    <el-select
      v-show="inputVisible"
      id="searchInput"
      ref="searchInput"
      v-model="keyValue"
      placeholder=""
      filterable
      remote
      reserve-keyword
      :remote-method="remoteMethod"
      :loading="loading"
      @change="searchChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.text"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVisible: false,
      keyValue: '',
      loading: false,
    };
  },

  async mounted() {
    document.addEventListener('click', this.handleClickOutside);
    // const res = await this.$apis.pubQueryComboxData({codifierGrpCodes: "DailyType,folderTreeAuthWithGrp"})
  },

  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },

  methods: {
    showInput(event) {
      this.inputVisible = true;

      // 确保输入框出现后再获取焦点
      this.$nextTick(() => {
        if (this.$refs.searchInput) {
          this.$refs.searchInput.focus();
        }
      });

      event.stopPropagation();
    },

    handleClickOutside(event) {
      if (this.inputVisible && this.$refs.quickSearch && !this.$refs.quickSearch.contains(event.target)) {
        this.inputVisible = false;
        this.keyValue = '';
      }
    },

    remoteMethod(query) {
      this.loading = true;
      setTimeout(() => {
        this.options = [
          { value: '1', text: 'Option 1' },
          { value: '2', text: 'Option 2' },
          { value: '3', text: 'Option 3' },
        ];
        this.loading = false;
      }, 1000);
    },

    searchChange(value) {
      console.log(333333, value);
      this.inputVisible = false;
      this.keyValue = '';
      this.options = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.quick-search {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 保证图标和输入框都在右边 */
  height: 100%;
  width: 200px;
  overflow: hidden;
  position: relative;
}

/* 搜索图标 */
.search-icon {
  font-size: 16px;
  cursor: pointer;
  position: absolute;
  right: 0;
  z-index: 1;
  transition: none; /* 移除图标的动画 */
}

/* 输入框 */
.search-input {
  width: 200px;
  position: absolute;
  right: 0;
  transition: none; /* 去除动画 */
}

::v-deep(.el-input__inner) {
  background-color: #213c61;
  border: 1px solid #213c61;
  color: white;
}
::v-deep(.el-input__inner:focus) {
  border-color: transparent !important; /* 去掉边框高亮 */
  box-shadow: none !important; /* 取消阴影 */
  color: white;
}
::v-deep(.el-input__suffix) {
  color: white;
  line-height: 30px;
  font-size: 16px;
}
</style>
