<template>
  <n-drawer
    to="#main"
    :show="show"
    :on-update:show="closeDrawer"
    width="2.8rem"
    :mask-closable="false"
  >
    <n-drawer-content closable>
      <template #header>
        <div class="head">
          <n-icon class="back" size=".2rem" @click="back">
            <ArrowBack />
          </n-icon>
          楼宇
        </div>
      </template>
      <div class="content">
        <p class="name">某某社区某某居委某某小区</p>
        <div v-if="showBuildingDetail" class="building">
          <div class="nav">
            <p>{{ curBuilding }}</p>
            <span @click="showBuildingDetail = false">
              返回
              <n-icon size=".09rem">
                <ArrowDown />
              </n-icon>
            </span>
          </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>
                <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-icon
                        v-for="(m, n) in room.members"
                        :key="n"
                        class="icon"
                        size=".1rem"
                      >
                        <svg-icon :data="member" original />
                      </n-icon>
                    </div>
                    <p>{{ room.name }}</p>
                  </div>
                </div>
              </n-carousel>
            </div>
          </div>
          <n-empty v-else style="margin-top: 0.2rem" size="small" />
        </div>
        <div v-else class="list">
          <div
            v-for="(item, i) in list"
            :key="i"
            :class="{ on: curBuilding === item }"
            @click="setBuilding(item)"
          >
            <p>
              <n-icon class="dot" size=".08rem">
                <svg-icon :data="dot" />
              </n-icon>
              {{ item }}
            </p>
            <span class="next" @click="buildingNext(item)">
              下一级
              <n-icon class="icon" size=".1rem" color="#dd505E">
                <ArrowForward />
              </n-icon>
            </span>
          </div>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } 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'
const show = computed(() => store.state.showBuildingDrawer)
const back = () => store.commit('SET_BUILDING_DRAWER', false)
const closeDrawer = () => {
  back()
  store.commit('SET_FILTER_DRAWER', false)
}

const curBuilding = ref<string | null>(null)
const showBuildingDetail = ref(false)
onMounted(() => (showBuildingDetail.value = false))
const setBuilding = (name: string) => (curBuilding.value = name)
const floors = ref<any[]>([])
const buildingNext = (name: string) => {
  setBuilding(name)
  floors.value = [
    {
      floor: 'XXF',
      room: 4,
      member: 3,
      rooms: [
        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
      ],
    },
    {
      floor: 'XXF',
      room: 4,
      member: 3,
      rooms: [
        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
      ],
    },
    {
      floor: 'XXF',
      room: 4,
      member: 3,
      rooms: [
        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
      ],
    },
    {
      floor: 'XXF',
      room: 4,
      member: 3,
      rooms: [
        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
      ],
    },
    {
      floor: 'XXF',
      room: 4,
      member: 3,
      rooms: [
        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
        { name: 'XXX', members: [1, 2, 3, 4, 5] },
      ],
    },
  ]
  showBuildingDetail.value = true
  // TODO
}
const list = [
  'XX小区某1号楼',
  'XX小区某2号楼',
  'XX小区某3号楼',
  'XX小区某4号楼',
  'XX小区某5号楼',
]
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.head
  $flex-align()
  .back
    cursor pointer
    margin-right .05rem
    border-radius .03rem
    &:hover
      color $red
      background $light-red
.content
  display flex
  flex-direction column
  height 100%
.name
  margin .1rem
.list
  border-top .01rem solid $light-gray
  padding 0 .1rem
  background #f7f7f7
  box-sizing border-box
  flex 1
  overflow-y auto
  >div
    $flex-align()
    justify-content space-between
    border-bottom .01rem solid $light-gray
    padding .06rem 0
    color $font
    cursor pointer
    >p
      flex 1
      $text-overflow()
    &.on
    &:hover
      color $red
      .dot
        color $red
    .dot
      margin 0 .08rem
    .next
      color $red
      cursor pointer
      font-size .09rem
      &:hover
        font-family $font-ping-medium
.building
  display flex
  flex-direction column
  flex 1
  overflow-y auto
  .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
    span
      color $red
      font-size .09rem
      cursor pointer
  .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.02rem
      &.n-carousel__arrow--right
        right -0.02rem
    .n-carousel__dots
      display none
</style>
