<template>
  <div id="nav-bar">
    <div class="left">
      <img class="logo" src="@images/logo.png" />
      <p class="title">花木街道数字孪生城市</p>
      <b>|</b>
      <span>党建信息系统</span>
    </div>
    <div class="right">
      <n-input
        v-model:value="searchKey"
        class="search-input"
        placeholder="请输入党员姓名或党组织名称"
        :loading="isLoading"
        clearable
        :on-clear="removeResult"
        :on-focus="() => emit('focus')"
        :on-blur="() => emit('blur')"
      >
        <template #prefix>
          <img class="icon" src="@images/search2.png" />
        </template>
      </n-input>
      <div class="align-center">
        <img src="@images/nav1.png" />
        <img src="@images/nav2.png" />
        <img src="@images/nav3.png" />
        <n-dropdown :options="options" show-arrow>
          <div class="align-center">
            <img src="@images/nav4.png" />
            <n-icon size=".1rem">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 320 512"
              >
                <path
                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
                  fill="currentColor"
                ></path>
              </svg>
            </n-icon>
          </div>
        </n-dropdown>
      </div>
      <b>|</b>
      <div class="align-center menu-btn">
        <img src="@images/nav5.png" />
        选择菜单
      </div>
    </div>
  </div>

  <!-- <SearchModal :data="resultData" /> -->
  <SearchModal :visible="showResult" :data="resultData" />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import useDebounce from '@/hooks/useDebounce'
import SearchModal from './search-modal.vue'

const emit = defineEmits(['focus', 'blur'])

const options = [
  {
    label: '选项1',
    key: '1',
  },
  {
    label: '选项2',
    key: '2',
  },
  {
    label: '选项3',
    key: '3',
  },
]

const searchKey = ref<string | null>(null)
const isLoading = ref(false)
const showResult = ref(false)
const resultData = ref<any>({})

const removeResult = () => {
  isLoading.value = false
  showResult.value = false
  resultData.value = {}
}
const handleSearch = useDebounce(function () {
  isLoading.value = true
  setTimeout(() => {
    resultData.value = {
      organization: [
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
      ],
      member: [
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
        { name: '某某社区党组织', address: '上海市浦东新区327号' },
      ],
    }
    isLoading.value = false
    if (!searchKey.value) {
      showResult.value = false
      return
    }
    showResult.value = true
  }, 1000)
})
watch(
  () => searchKey.value,
  (val) => {
    if (!val) {
      removeResult()
      return
    }
    handleSearch()
  },
)
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.align-center
  $flex-align()
#nav-bar
  width 100vw
  height .42rem
  background rgba(252,252,252,.85)
  display flex
  align-items center
  justify-content space-between
  padding .1rem .18rem
  box-sizing border-box
  font-family $font-ping-medium
  $blur()
  b
    color #EAECEF
    margin 0 .1rem
    font-size .13rem
  .left
    $flex-align()
    font-size .13rem
    .logo
      width .25rem
      height @width
      margin-right .13rem
    .title
      font-size .18rem
      font-weight 500
    span
      background $light-red
      color $red
      border-radius .03rem
      padding 0 .1rem
      font-weight 500
  .right
    $flex-align()
    width 50%
    // max-width 60%
    // min-width 50%
    justify-content flex-end
    .search-input
      max-width 2.4rem
      font-size .1rem
      height .26rem
      line-height @height
      margin-right .1rem
    .menu-btn
      cursor pointer
      font-size .11rem
      white-space nowrap
      img
        margin-right .05rem
    img
      width .12rem
      height @width
      cursor pointer
      margin 0 .08rem
      &.icon
        width .12rem
        height @width
        margin-left -0.02rem
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#nav-bar
  .n-input__input-el
    height .26rem
    line-height @height
    font-family $font-ping
  .n-input--focus
    .n-input__border
      border .01rem solid $red
</style>
