<template>
  <d-input
    :key="$route.path + $route.query?.val"  id="golbalSearch" class="g-header-search"
    v-model.trim="searchStr" placeholder="输入搜索内容..." @keyup.enter="search" @clear="handleClear" clearable >
    <template #prepend>
      <d-select v-model="searchType" :options="options"></d-select>
    </template>
    <template #append>
      <d-icon name="search" style="font-size: inherit;" />
    </template>
  </d-input>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import microApp from '@micro-zoe/micro-app';

const route = useRoute();
const router = useRouter();
const searchStr = ref(route?.query?.val || '');
const searchType = ref('License');
const options = reactive(['License']);

const placeholder = ref('「开搜」：一搜即达，开发者的AI搜索');

const search = () => {
  if (!searchStr.value) {
    document.querySelector('#golbalSearch').blur();
    return;
  }
  router.push({ name: 'search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
};
const handleClear = () => {
  router.push({ name: 'home' });
};

watch(() => route.query?.val, (newVal) => {
  microApp.setData('micoro-app-homeweb-app', { type: 'search', data: newVal || '' });
});

const handleDataChange = ({ name, type, data }) => {
  if (name === 'micoro-app-homeweb-app') {
    if (type === 'keyword-change') {
      searchStr.value = data;
    }
    if (type === 'route-change') {
      //
    }
  }
};

onMounted(() => {

});
onUnmounted(() => {

});
</script>

<style lang="scss" scoped>
@import 'devui-theme/styles-var/devui-var.scss';

.g-header-search {
  border: 1px solid #5E7CE0;
  background: #FFF;
  //box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.05) inset;
  &-icon {
    opacity: .5;
    transition: opacity .5s ease;
  }
  .devui-input--focus {
    .g-header-search-icon {
      opacity: 1;
    }
  }
  ::v-deep .devui-input-slot__prepend{
    width: 140px;
  }
  ::v-deep .devui-input-slot__append{
    width: 40px;
  }
}
</style>
