<template>
  <div class="research-search">
    <div class="topics nav-item">
      <div class="title" @mouseenter="onNavEnter('topics')" @mouseleave="onNavLeave('topics')" @click="onTitleClick('topics')">
        <span class="title-val">TOPICS</span>
        <img class="icon-down" src="@/assets/icon/down.svg" alt="">
      </div>
      <div
        class="select-list"
        :class="{'show-select-list': isSelectType === 'topics'}"
        @mouseenter="onSelectEnter('topics')"
        @mouseleave="onSelectLeave('topics')"
      >
        <div class="select-search">
          <img class="icon-search" src="@/assets/icon/search.svg" alt="">
          <input class="select-search" type="text" placeholder="Search" v-model="searchTopics">
        </div>
        <div class="select-content">
          <div v-for="(item, index) in topicsList" :key="item.id" class="select-item" :class="{ 'selected-item': item.id == topicId }" @click="onSelectItem('topics', item, index)">
            <p v-html="item.title"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="authors nav-item">
      <div class="title" @mouseenter="onNavEnter('authors')" @mouseleave="onNavLeave('authors')" @click="onTitleClick('authors')">
        <span class="title-val">AUTHORS</span>
        <img class="icon-down" src="@/assets/icon/down.svg" alt="">
      </div>
      <div
        class="select-list 2222"
        :class="{'show-select-list': isSelectType === 'authors'}"
        @mouseenter="onSelectEnter('authors')"
        @mouseleave="onSelectLeave('authors')"
      >
        <div class="select-search">
          <img class="icon-search" src="@/assets/icon/search.svg" alt="">
          <input class="select-search" type="text" placeholder="Search" v-model="searchAuthors">
        </div>
        <div class="select-content">
          <div v-for="(item, index) in authorsList" :key="item.id" class="select-item" :class="{ 'selected-item': item.id == authorId }" @click="onSelectItem('authors', item, index)">
            <p v-html="item.name"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <img class="icon-search" src="@/assets/icon/search.svg" alt="">
      <input class="search-input" type="text" placeholder="Search" v-model="searchText" @keydown.enter="toSearch">
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter()
const store = useStore()

const props = defineProps({
  selectNav: {
    type: Object,
    default: () => {}
  },
  topicId: {
    type: String,
    default: ''
  },
  authorId: {
    type: String,
    default: ''
  }
})

const searchTopics = ref('')
const searchAuthors = ref('')
const searchText = ref('')

const isSelectType = ref('')
const timer = ref('')

const topicsList = computed(() => {
  return (props.selectNav.topic || []).filter(item => item.title.includes(searchTopics.value)).map(item => ({
    ...item,
    title: htmlRegroup(item.title, searchTopics.value)
  }))
})

const authorsList = computed(() => {
  return (props.selectNav.authors || []).filter(item => item.name.includes(searchAuthors.value)).map(item => ({
    ...item,
    name: htmlRegroup(item.name, searchAuthors.value)
  }))
})


const htmlRegroup = (str, val) => {
  if (!str ||!val) return str;
  const reg = new RegExp(val, 'gi');
  return str.replace(reg, `<span style="color: #f00">${val}</span>`)
}

const onTitleClick = (type) => {
  if (!isSelectType.value) {
    isSelectType.value = type
  } else {
    isSelectType.value = type === isSelectType.value ? '' : type
  }
}

const onNavEnter = (type) => {
  // isSelectType.value = type
}

const onNavLeave = () => {
  // timer.value = setTimeout(() => {
  //   isSelectType.value = false
  // }, 1000)
}

const onSelectEnter = () => {
  // clearInterval(timer.value)
}

const onSelectLeave = () => {
  // isSelectType.value = false
}

const emit = defineEmits(['select'])

const onSelectItem = (type, item, index) => {
  emit('select', { type, item, index })
  isSelectType.value = ''
}

const toSearch = () => {
  store.commit('changeSearchVal', searchText.value)
  router.push('/search/result')
}

</script>

<style lang="scss" scoped>
.research-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .nav-item {
    position: relative;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 30px;
      cursor: pointer;
      .title-val {
        font-family: Raleway;
        font-size: 16px;
        font-weight: 500;
        color: #000;
      }
      .icon-down {
        margin-left: 8px;
        width: 8px;
        height: 6px;
      }
    }
    .select-list {
      display: none;
      position: absolute;
      z-index: 99;
      left: 0;
      top: 25px;
      &.show-select-list {
        display: flex;
        flex-direction: column;
        width: 180px;
        background: #F5F5F5;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
        .select-search {
          height: 36px;
          margin: 10px;
          padding: 8px;
          box-sizing: border-box;
          background: #EFEFEF;
          display: flex;
          align-items: center;
          .icon-search {
            width: 12px;
            height: 12px;
          }
          .select-search {
            border: none;
            background: transparent;
            font-size: 12px;
            font-family: Raleway;
            font-weight: 500;
          }
        }
        .select-content {
          max-height: 400px;
          overflow-x: hidden;
          overflow-y: auto;
          .select-item {
            padding-left: 18px;
            min-height: 40px;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: Raleway;
            cursor: pointer;
            &.selected-item {
              color: #fd6911;
            }
          }
        }
      }
    }
  }
  .search {
    margin-left: auto;
    background: #EFEFEF;
    width: 260px;
    height: 42px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .search-input {
      flex: 1;
      margin-left: 12px;
      background: transparent;
      border: none;
      font-size: 14px;
      font-family: Raleway;
    }
  }
  @media (max-width: 767Px) {
    .search {
      margin-top: 18px;
      width: 100%;
    }
  }
}
</style>
