<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="onFocus"
        :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: showFilterDrawer || showBuildingDrawer }"
          size=".12rem"
          @click="onClick('filter')"
        >
          <svg-icon :data="nav1" />
        </n-icon>
        <n-icon
          class="btn"
          :class="{ on: showActivityDrawer }"
          size=".12rem"
          @click="onClick('activity')"
        >
          <svg-icon :data="nav2" original />
        </n-icon>
        <n-icon
          class="btn"
          :class="{ on: showStructModal }"
          size=".12rem"
          @click="onClick('struct')"
        >
          <svg-icon :data="nav3" original />
        </n-icon>
      </div>
      <b>|</b>
      <n-popover trigger="hover" class="top-menu">
        <template #trigger>
          <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>
        </template>
        <div class="menu">
          <div class="parent">
            <div
              v-for="menu in menus"
              :key="menu.key"
              :class="{ on: curMenu.key === menu.key }"
              @click="curMenu = menu"
            >
              {{ menu.name }}
            </div>
          </div>
          <div class="children">
            <div v-for="(child, i) in curMenu.children" :key="i">
              <h3 v-if="child.name">{{ child.name }}</h3>
              <p
                v-for="p in child.list"
                :key="p.name"
                :class="{ link: !!p.id }"
                @click.prevent="toPage(p.id)"
              >
                {{ p.name }}
              </p>
            </div>
          </div>
        </div>
      </n-popover>
    </div>
  </div>

  <SearchModal
    :visible="showResult"
    :data="resultData"
    :search-key="searchKey"
    @select="handleSelect"
  />
  <FilterDrawer />
  <ActivityDrawer />
  <StructModal />
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import store from '@/store'
import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
import useDebounce from '@/hooks/useDebounce'
import SearchModal from './search-modal.vue'
import FilterDrawer from './filter-drawer.vue'
import ActivityDrawer from './activity-drawer.vue'
import StructModal from './struct-modal.vue'
import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg'
import nav3 from '@images/nav3.svg'
import nav5 from '@images/nav5.svg'
import menus from '@/util/menus'

const curMenu = ref(menus[0])

const showFilterDrawer = computed(() => store.state.showFilterDrawer)
const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
const showActivityDrawer = computed(() => store.state.showActivityDrawer)
const showStructModal = computed(() => store.state.showStructModal)
const onClick = (type: string) => {
  store.commit('SET_FILTER_DRAWER', false)
  store.commit('SET_ACTIVITY_DRAWER', false)
  store.commit('SET_STRUCT_MODAL', false)
  switch (type) {
    case 'filter':
      store.commit('SET_FILTER_DRAWER', true)
      break
    case 'activity':
      store.commit('SET_ACTIVITY_DRAWER', true)
      break
    case 'struct':
      store.commit('SET_STRUCT_MODAL', true)
      store.commit('SET_SHOW_BASIC_INFO', false)
      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 onFocus = () => {
  emit('focus')
  if (searchKey.value) {
    showResult.value = true
  }
}
const removeResult = () => {
  isLoading.value = false
  showResult.value = false
  resultData.value = {}
}
const handleSearch = useDebounce(async function () {
  isLoading.value = true
  const orgs = await useFetchOrg({
    q: `paths @ "党组织名称" && string @ "${searchKey.value}"`,
  })
  const members = await useFetchMember({
    q: `paths @ "姓名" && string @ "${searchKey.value}"`,
  })
  resultData.value = {
    organization: orgs,
    member: members,
  }
  isLoading.value = false
  if (!searchKey.value) {
    showResult.value = false
    return
  }
  showResult.value = true
})
watch(
  () => searchKey.value,
  (val) => {
    if (!val) {
      removeResult()
      return
    }
    handleSearch()
  },
)

const handleSelect = (data: any) => {
  // TODO 地图撒点
  console.log('current search-data: ', data)
  showResult.value = false
}

const toPage = (id: string) => {
  if (!id) return
  window.parent._global_datamap_emit &&
    window.parent._global_datamap_emit.emit('CHANGE_PAGE_BY_ID_EVENT', id)
}
</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
      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

.top-menu
  width 12rem
  height 2.5rem
  .menu
    border-radius .06rem
    background $white-bg
    display flex
    color $font
    .parent
      margin .15rem 0
      width 1rem
      font-size .12rem
      font-family $font-ping-medium
      >div
        border-radius .06rem
        box-sizing border-box
        padding .08rem .12rem
        cursor pointer
        &:hover
        &.on
          background $light-red
          color $red
    .children
      display flex
      justify-content space-around
      >div
        margin 0 .1rem
        h3
          font-size .13rem
          margin-bottom .1rem
        p
          width 1.2rem
          margin .1rem 0
          font-size .1rem
          &.link
            color #000
            font-weight bold
            cursor pointer
            &:hover
              color $red
</style>
