<template>
  <m-animate enter="fadeIn" leave="fadeOut" :duration="100">
    <div v-if="visible" 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"
                >
                  <p>{{ item.name }}</p>
                  <span>{{ item.address }}</span>
                  <n-icon class="icon" size=".14rem" color="#dd505E">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 512 512"
                    >
                      <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="48"
                        d="M268 112l144 144l-144 144"
                      ></path>
                      <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="48"
                        d="M392 256H100"
                      ></path>
                    </svg>
                  </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="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"
                >
                  <p>{{ item.name }}</p>
                  <span>{{ item.address }}</span>
                  <n-icon class="icon" size=".14rem" color="#dd505E">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 512 512"
                    >
                      <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="48"
                        d="M268 112l144 144l-144 144"
                      ></path>
                      <path
                        fill="none"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="48"
                        d="M392 256H100"
                      ></path>
                    </svg>
                  </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="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">
              <p>{{ item.name }}</p>
              <span>{{ item.address }}</span>
              <n-icon class="icon" size=".14rem" color="#dd505E">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 512 512"
                >
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="48"
                    d="M268 112l144 144l-144 144"
                  ></path>
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="48"
                    d="M392 256H100"
                  ></path>
                </svg>
              </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">
              <p>{{ item.name }}</p>
              <span>{{ item.address }}</span>
              <n-icon class="icon" size=".14rem" color="#dd505E">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 512 512"
                >
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="48"
                    d="M268 112l144 144l-144 144"
                  ></path>
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="48"
                    d="M392 256H100"
                  ></path>
                </svg>
              </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 } from 'vue'
const props = defineProps({
  data: {
    type: Object as PropType<{ organization: []; member: [] }>,
    required: true,
  },
  visible: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
})
const organization = computed(() => props.data.organization)
const member = computed(() => props.data.member)

const curTab = ref('all')
const toTab = (name: string) => {
  curTab.value = name
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.search-modal
  z-index 999
  border .01rem solid $light-gray
  border-radius .03rem
  background #fbfcfe
  width 2.4rem
  position fixed
  top .38rem
  right 2.41rem
  box-shadow .02rem .02rem .04rem rgba(0,0,0,0.3)
  overflow hidden
.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
      $text-overflow()
    span
      color $gray
      $text-overflow()
    .icon
      display none
      position absolute
      top 0
      bottom 0
      right 0
      margin auto .1rem
    &: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>
