<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useSearchStore } from '@/store/search'

const props = defineProps<{
  hasFeature?: boolean
  autoFocus: boolean
}>()

const emit = defineEmits<{
  (e: 'onClickSearchInput'): boolean
}>()

const searchStore = useSearchStore()
const focus = ref(false)

function handleInput(e: any) {
  searchStore.searchText = e.detail.value
}

function clearSearchAndFocus() {
  searchStore.clearSearch()
  focus.value = true
}

function back() {
  searchStore.searchText = ''
  uni.navigateBack()
}

function onClickSearchInput() {
  searchStore.isSearching = false
  emit('onClickSearchInput')
}

const showRelative = computed(() => props.hasFeature && searchStore.isSearching && searchStore.searchText)

function onFocus() {
  searchStore.isSearching = true
  searchStore.searched = false
}

onMounted(() => {
})
</script>

<template>
  <view class="search-input-container">
    <view class="search-input-area">
      <view class="back-btn" @click="back">
        <!-- <svg width="26" height="26" viewBox="0 0 32 32"><path d="M21.781 7.844l-9.063 8.594 9.063 8.594q0.25 0.25 0.25 0.609t-0.25 0.578q-0.25 0.25-0.578 0.25t-0.578-0.25l-9.625-9.125q-0.156-0.125-0.203-0.297t-0.047-0.359q0-0.156 0.047-0.328t0.203-0.297l9.625-9.125q0.25-0.25 0.578-0.25t0.578 0.25q0.25 0.219 0.25 0.578t-0.25 0.578z" fill="#000000" /></svg> -->
        <image
          src="/static/icons/back.svg"
          mode="aspectFit"
        />
      </view>

      <view class="search-input-wrapper">
        <image class="prefix-icon" src="/static/icons/Search.svg" alt="" mode="aspectFit" />
        <input
          v-model="searchStore.searchText"
          :adjust-position="false"
          class="search-input-text"
          placeholder="Volador"
          placeholder-class="input-placeholder"
          :auto-focus="autoFocus"
          :focus="focus"
          @input="handleInput"
          @focus="onFocus"
          @blur="() => focus = false"
        >
        <image
          v-if="searchStore.searchText"
          class="suffix-icon"
          src="/static/icons/input_close.svg"
          mode="scaleToFill"
          @click="clearSearchAndFocus"
        />
      </view>

      <view class="search-btn" @click="onClickSearchInput">
        <text>搜索</text>
      </view>
    </view>

    <!-- 搜索关联提示词列表 -->
    <!-- <view v-if="showRelative" class="search-relative-result">
      <view class="search-relative-list">
        <view class="search-relative-item" @click="onClickRelative('搜索关联词')">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
        <view class="search-relative-item">
          搜索关联词
        </view>
      </view>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
.search-input-container {
  position: relative;
}
.search-input-area {
  display: flex;
  align-items: center;
  padding: 10rpx 28rpx;
  border-radius: 24rpx;
  background-color: transparent;

  .back-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      height: 52rpx;
      width: 52rpx;
      margin-right: 8rpx;
    }
  }

  .search-input-wrapper {
    background-color: rgba(#f5f5f5, 0.5);
    display: flex;
    padding: 0 17rpx;
    align-items: center;
    flex-grow: 1;
    .prefix-icon {
      width: 26rpx;
      height: 26rpx;
      margin-right: 12rpx;
    }

    .search-input-text {
      flex: 1;
      height: 1.4;
      font-size: 28rpx;
      padding: 15rpx 0;
      color: #24272c;
      background-color: transparent;
    }

    .suffix-icon {
      width: 26rpx;
      height: 26rpx;
      margin-left: 12rpx;
    }
  }

  .search-btn {
    padding: 0 16rpx;
  }
}

.search-relative-result {
  background-color: #fff;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(100vh - 120rpx - 122rpx);
  overflow: auto;

  .search-relative-list {
    .search-relative-item {
      border-bottom: 2rpx solid #e5e5e5;
      padding: 44rpx 0;
      margin-left: 32rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(0, 0, 0, 0.9);

      &::after {
        content: '';
        display: inline-block;
        width: 18rpx;
        height: 18rpx;
        border-top: 3rpx solid #999999;
        border-right: 3rpx solid #999999;
        position: relative;
        right: 62rpx;
        transform: rotate(45deg);
      }
    }
  }
}
</style>
