<template>
  <m-animate enter="fadeIn" leave="fadeOut" :duration="100">
    <div v-if="visible" ref="searchRef" class="search-modal">
      <n-tabs
        v-model:value="curTab"
        :on-close="() => (curTab = 'all')"
        size="small"
        justify-content="space-evenly"
      >
        <n-tab-pane name="all" tab="全部">
          <div class="tab1">
            <div>
              <p class="title">党组织</p>
              <div
                v-if="organization && organization.length > 0"
                class="wrapper"
              >
                <div
                  v-for="(item, i) in organization.slice(0, 5)"
                  :key="i"
                  class="item"
                  @click="handleSelect(item)"
                >
                  <p>
                    {{ item?.extra['党组织名称'].split(searchKey)[0]
                    }}<span>{{ searchKey }}</span
                    >{{ item?.extra['党组织名称'].split(searchKey)[1] }}
                  </p>
                  <span>{{ item?.extra['党组织地址'] }}</span>
                  <n-icon class="icon" size=".14rem" color="#dd505E">
                    <ArrowForward />
                  </n-icon>
                </div>
                <n-button
                  v-if="organization.length > 5"
                  class="more"
                  color="#f2f2f2"
                  text-color="rgba(0,0,0,0.5)"
                  block
                  size="small"
                  @click.prevent.stop="toTab('organization')"
                >
                  查看更多
                </n-button>
              </div>
              <n-empty v-else description="没有数据" size="small" />
            </div>
            <div>
              <p class="title">党员</p>
              <div v-if="member && member.length > 0" class="wrapper">
                <div
                  v-for="(item, i) in member.slice(0, 5)"
                  :key="i"
                  class="item"
                  @click="handleSelect(item)"
                >
                  <p>
                    {{ item?.extra['姓名'].split(searchKey)[0]
                    }}<span>{{ searchKey }}</span
                    >{{ item?.extra['姓名'].split(searchKey)[1] }}
                  </p>
                  <span>{{ getAddress(item?.extra) }}</span>
                  <n-icon class="icon" size=".14rem" color="#dd505E">
                    <ArrowForward />
                  </n-icon>
                </div>
                <n-button
                  v-if="member.length > 5"
                  class="more"
                  color="#f2f2f2"
                  text-color="rgba(0,0,0,0.5)"
                  block
                  size="small"
                  @click.prevent.stop="toTab('member')"
                >
                  查看更多
                </n-button>
              </div>
              <n-empty v-else description="没有数据" size="small" />
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="organization" tab="党组织">
          <div v-if="organization && organization.length > 0" class="wrapper">
            <div
              v-for="(item, i) in organization"
              :key="i"
              class="item"
              @click="handleSelect(item)"
            >
              <p>
                {{ item?.extra['党组织名称'].split(searchKey)[0]
                }}<span>{{ searchKey }}</span
                >{{ item?.extra['党组织名称'].split(searchKey)[1] }}
              </p>
              <span>{{ item?.extra['党组织地址'] }}</span>
              <n-icon class="icon" size=".14rem" color="#dd505E">
                <ArrowForward />
              </n-icon>
            </div>
          </div>
          <n-empty v-else description="没有数据" size="small" />
        </n-tab-pane>
        <n-tab-pane name="member" tab="党员">
          <div v-if="member && member.length > 0" class="wrapper">
            <div
              v-for="(item, i) in member"
              :key="i"
              class="item"
              @click="handleSelect(item)"
            >
              <p>
                {{ item?.extra['姓名'].split(searchKey)[0]
                }}<span>{{ searchKey }}</span
                >{{ item?.extra['姓名'].split(searchKey)[1] }}
              </p>
              <span>{{ getAddress(item?.extra) }}</span>
              <n-icon class="icon" size=".14rem" color="#dd505E">
                <ArrowForward />
              </n-icon>
            </div>
          </div>
          <n-empty v-else description="没有数据" size="small" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </m-animate>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, watch } from 'vue'
import { ArrowForward } from '@vicons/ionicons5'
import useClickOutSide from '@/hooks/useClickOutside'

const props = defineProps({
  data: {
    type: Object as PropType<{ organization: any[]; member: any[] }>,
    required: true,
  },
  visible: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  searchKey: {
    type: String as PropType<string>,
    default: '',
  },
})
const emit = defineEmits(['select', 'isClickOutSide'])

const searchRef = ref<any>(null)
useClickOutSide(searchRef, (val) => emit('isClickOutSide', val))

const organization = computed(() => props.data.organization)
const member = computed(() => props.data.member)

const curTab = ref('all')
const toTab = (name: string) => {
  curTab.value = name
}
watch(
  () => props.visible,
  (val) => {
    if (val) curTab.value = 'all'
  },
)

const getAddress = (data: any) => {
  if (!data) return '暂无'
  return (
    (data['所属社区'] || '') +
      (data['所属居委'] || '') +
      (data['所属小区'] || '') +
      (data['所属楼宇'] || '') +
      (data['所属房间'] || '') || '暂无'
  )
}
const handleSelect = (data: any) => {
  emit('select', data)
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.search-modal
  z-index 9999
  border .01rem solid $light-gray
  border-radius .03rem
  background #fbfcfe
  width 2.4rem
  position fixed
  top .38rem
  right 2.2rem
  box-shadow .02rem .02rem .04rem rgba(0,0,0,0.3)
  overflow hidden
  box-sizing border-box
.tab1
  .title
    font-family $font-ping-medium
    border-bottom .01rem solid $light-gray
    padding-bottom .03rem
.wrapper
  .more
    margin .03rem 0 .1rem
    &:hover
      background $light-red
      color $red
  .item
    border-radius .03rem
    position relative
    background transparent
    cursor pointer
    box-sizing border-box
    padding .05rem .08rem
    p
      font-family $font-ping-medium
      margin-bottom .02rem
      // $text-overflow()
      >span
        color $red
        display inline
    span
      display inline-block
      width 100%
      color $gray
      // $text-overflow()
    .icon
      display none
      position absolute
      top 0
      bottom 0
      right 0
      margin auto 0.05rem
    &:hover
      background $light-red
      &>.icon
        display inline-block
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.search-modal
  .n-tabs
    .n-tabs-wrapper
      background #fff
      padding .03rem 0
      border-bottom .01rem solid $light-gray
    .n-tabs-tab
      color #a7afb7
      font-size .1rem
    .n-tab-pane
      max-height 3rem
      overflow-y auto
      padding .05rem .08rem
      box-sizing border-box
</style>
