<template>
  <n-drawer
    to="#main"
    :show="show"
    :on-update:show="closeDrawer"
    width="2.8rem"
    :mask-closable="false"
  >
    <n-drawer-content closable title="楼宇">
      <div class="content">
        <p class="name">{{ path.join('') }}</p>
        <div class="building">
          <div class="nav">
            <p :title="curBuilding['楼宇名称']">
              {{ curBuilding['楼宇名称'] }}
            </p>
          </div>
          <div v-if="floors && floors.length > 0" class="floors">
            <div v-for="(item, i) in floors" :key="i">
              <div class="title">
                <p>{{ item.floor }}</p>
                <div>
                  <span>户数：{{ item.room }} </span>
                  <span>党员数：{{ item.member }}</span>
                </div>
              </div>
              <n-carousel :show-arrow="item.length > 4">
                <div
                  v-for="(_, segmentIndex) in new Array(
                    Math.ceil(item.rooms.length / 4),
                  )"
                  :key="segmentIndex"
                  class="rooms"
                >
                  <div
                    v-for="(room, index) in item.rooms.slice(
                      segmentIndex * 4,
                      segmentIndex + 4,
                    )"
                    :key="index"
                    class="room"
                  >
                    <div class="members">
                      <n-popover
                        v-for="(m, n) in room.members"
                        :key="n"
                        class="member-info-popover"
                        placement="left"
                        flip
                        trigger="click"
                      >
                        <template #trigger>
                          <n-icon class="icon" size=".1rem">
                            <svg-icon :data="member" original />
                          </n-icon>
                        </template>
                        <MemberInfo :data="m" />
                      </n-popover>
                    </div>
                    <p>{{ room['房间号'] }}</p>
                  </div>
                </div>
              </n-carousel>
            </div>
          </div>
          <n-empty v-else style="margin-top: 0.2rem" size="small" />
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, PropType, ref, watch } from 'vue'
import store from '@/store'
import dot from '@images/dot.svg'
import { ArrowForward, ArrowBack, ArrowDown } from '@vicons/ionicons5'
import member from '@images/member.svg'
import { useFetchRoom, useFetchMember } from '@/hooks/useFetch'
import MemberInfo from './member-info.vue'

const curBuilding = computed(() => store.state.buildingDetail.building)
const floors = computed(() => store.state.buildingDetail.floors)
const path = computed(() => {
  const building = curBuilding.value
  return [
    building?.['所属社区'] || '',
    building?.['所属居委'] || '',
    building?.['小区名称'] || '',
  ]
})
const show = computed(() => store.state.showBuildingDetail)

watch(
  () => show.value,
  (val) => {
    if (!val) {
      store.dispatch('getBasicInfo')
    } else {
      store.commit('SET_FILTER_DRAWER', false)
      store.commit('SET_ACTIVITY_DRAWER', false)
      store.commit('SET_STRUCT_MODAL', false)
    }
    store.commit('SET_SHOW_TAG', !val)
    store.commit('SET_CUR_TAG', '')
  },
)
watch(
  () => curBuilding.value,
  (building) => {
    if (!building) return
    const query = [
      `paths @ "所属社区" && string == "${building?.['所属社区']}"`,
      `paths @ "所属居委" && string == "${building?.['所属居委']}"`,
      `paths @ "所属小区" && string == "${building?.['小区名称']}"`,
      `paths @ "所属楼宇" && string @ "${building?.['号']}"`,
    ]
    store.dispatch('getBasicInfo', query.join(','))
  },
)

const closeDrawer = () => {
  store.commit('SET_SHOW_BUILDING_DETAIL', false)
  store.commit('SET_SHOW_TAG', true)
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
  display flex
  flex-direction column
  height 100%
.name
  margin .1rem
.building
  display flex
  flex-direction column
  flex 1
  overflow-y auto
  overflow-x hidden
  .nav
    $flex-align()
    justify-content space-between
    padding .08rem
    background #f7f7f7
    box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
    p
      font-family $font-ping-medium
      flex 1
      $text-overflow()
    span
      color $red
      font-size .09rem
      cursor pointer
      width .3rem
      white-space nowrap
  .floors
    padding .08rem
    background $light-gray
    flex 1
    overflow-y auto
    >div
      background $white-bg
      border-radius .04rem
      padding .08rem 0
      margin-bottom .08rem
      box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
      .title
        $flex-align()
        justify-content space-between
        margin-bottom .05rem
        padding 0 .1rem
        font-family $font-ping-medium
        p
          color $red
        span
          color $font
          font-size .08rem
          margin-left .1rem
      .rooms
        overflow hidden
        white-space nowrap
        padding 0 .1rem
        .room
          width 23%
          border-radius .04rem
          border .01rem solid $light-gray
          display inline-block
          margin-right 1.6%
          .members
            display flex
            flex-wrap wrap
            background $light-red
            height .4rem
            box-sizing border-box
            overflow hidden
            .icon
              padding .04rem
              cursor pointer
              &:hover
              &.on
                color $pink
          p
            text-align center
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.floors
  .n-carousel
    .n-carousel__arrow
      width .16rem
      height @width
      color $red
      &.n-carousel__arrow--left
        left -0.01rem
      &.n-carousel__arrow--right
        right -0.01rem
    .n-carousel__dots
      display none
.member-info-popover
  // width 2.8rem
  // min-height 3rem
  // max-height 4rem
  // overflow hidden
  background rgba(249, 250, 250, 0.9) !important
  $blur()
</style>
