<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">
        <n-icon
          class="btn"
          :class="{ on: showFilterModal }"
          size=".12rem"
          @click="onClick('filter')"
        >
          <svg-icon :data="nav1" />
        </n-icon>
        <n-icon
          class="btn"
          :class="{ on: showActivityModal }"
          size=".12rem"
          @click="onClick('activity')"
        >
          <svg-icon :data="nav2" original />
        </n-icon>
        <n-icon class="btn" size=".12rem">
          <svg-icon :data="nav3" original />
        </n-icon>
        <n-dropdown :options="options" show-arrow>
          <div class="align-center">
            <n-icon class="btn" size=".12rem" style="margin-right: 0">
              <svg-icon :data="nav4" original />
            </n-icon>
            <n-icon size=".08rem">
              <CaretDown />
            </n-icon>
          </div>
        </n-dropdown>
      </div>
      <b>|</b>
      <div class="align-center menu-btn">
        <n-icon
          size=".12rem"
          style="margin-right: 0.05rem; margin-bottom: 0.03rem"
        >
          <svg-icon :data="nav5" original />
        </n-icon>
        选择菜单
      </div>
    </div>
  </div>

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

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import useDebounce from '@/hooks/useDebounce'
import SearchModal from './search-modal.vue'
import FilterModal from './filter-modal.vue'
import ActivityModal from './activity-modal.vue'
import store from '@/store'
import { CaretDown } from '@vicons/ionicons5'
import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg'
import nav3 from '@images/nav3.svg'
import nav4 from '@images/nav4.svg'
import nav5 from '@images/nav5.svg'

const showFilterModal = computed(() => store.state.showFilterModal)
const showActivityModal = computed(() => store.state.showActivityModal)
const onClick = (type: string) => {
  store.commit('SET_FILTER_MODAL', false)
  store.commit('SET_ACTIVITY_MODAL', false)
  switch (type) {
    case 'filter':
      store.commit('SET_FILTER_MODAL', true)
      break
    case 'activity':
      store.commit('SET_ACTIVITY_MODAL', true)
      break
    default:
      break
  }
}

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
      &:hover
        color $red
    .btn
      cursor pointer
      margin 0 .08rem
      padding .04rem
      border-radius .02rem
      &:hover
      &.on
        color $red
        background $light-red
    .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>
