<template>
  <n-drawer
    to="#app"
    :show="show"
    :on-update:show="close"
    width="2.5rem"
    :mask-closable="false"
  >
    <n-drawer-content title="筛选" closable>
      <div class="content">
        <div class="tabs">
          <div :class="{ on: curTab === 'tag' }" @click="curTab = 'tag'">
            标签筛选
          </div>
          <div :class="{ on: curTab === 'geo' }" @click="curTab = 'geo'">
            地理筛选
          </div>
        </div>
        <n-collapse v-show="curTab === 'tag'" id="tag-filter">
          <template #arrow>
            <n-icon>
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 512 512"
                enable-background="new 0 0 512 512"
                xml:space="preserve"
              >
                <g><polygon points="192,128 320,256 192,384 	"></polygon></g>
              </svg>
            </n-icon>
          </template>
          <n-collapse-item title="党组织" name="1">
            <div class="list">
              <div
                v-for="item in organization"
                :key="item.name"
                :title="item.name"
              >
                <n-checkbox v-model:checked="item.checked" size="small">{{
                  item.name
                }}</n-checkbox>
                <div v-show="item.checked" class="export">
                  导出详表
                  <n-icon size=".1rem">
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 10 10"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z"
                        fill="#DD505E"
                      />
                      <path
                        d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z"
                        fill="#DD505E"
                      />
                    </svg>
                  </n-icon>
                </div>
              </div>
            </div>
          </n-collapse-item>
          <n-collapse-item title="党员" name="2">
            <div class="list">
              <div v-for="item in member" :key="item.name" :title="item.name">
                <n-checkbox v-model:checked="item.checked" size="small">{{
                  item.name
                }}</n-checkbox>
                <div v-show="item.checked" class="export">
                  导出详表
                  <n-icon size=".1rem">
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 10 10"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z"
                        fill="#DD505E"
                      />
                      <path
                        d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z"
                        fill="#DD505E"
                      />
                    </svg>
                  </n-icon>
                </div>
              </div>
            </div>
          </n-collapse-item>
        </n-collapse>
        <div v-show="curTab === 'geo'" id="geo-filter">
          <p class="nav">
            <span v-if="curPath.length > 1" class="pre" @click="toPreStep">
              <n-icon size=".08rem">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 32 32"
                >
                  <path
                    d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"
                    fill="currentColor"
                  ></path>
                </svg>
              </n-icon>
              上一级 |
            </span>
            <template v-if="curPath.length > 0">
              <span v-for="(n, i) in curPath" :key="n">
                <span v-if="i !== 0">/</span>
                <b v-if="i === curPath.length - 1">{{ n }}</b>
                <template v-else>{{ n }}</template>
              </span>
            </template>
            <b v-else>社区</b>
          </p>
          <n-tabs v-model:value="curGeo" type="line" size="small">
            <n-tab-pane name="社区" tab="社区" class="geo-list">
              <div
                v-for="(item, i) in list1"
                :key="i"
                :class="{ on: curArea === item }"
                @click="setArea(item)"
              >
                <p>
                  <n-icon class="dot" size=".1rem">
                    <svg
                      width="8"
                      height="8"
                      viewBox="0 0 8 8"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle
                        opacity="0.2"
                        cx="4"
                        cy="4"
                        r="4"
                        fill="#C4C9CE"
                      />
                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                    </svg>
                  </n-icon>
                  {{ item }}
                </p>
                <span class="next" @click="areaNext(item)">
                  下一级
                  <n-icon class="icon" size=".1rem" 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>
                </span>
              </div>
            </n-tab-pane>
            <n-tab-pane name="居委" tab="居委" class="geo-list">
              <div
                v-for="(item, i) in list2"
                :key="i"
                :class="{ on: curCommittee === item }"
                @click="setCommittee(item)"
              >
                <p>
                  <n-icon class="dot" size=".1rem">
                    <svg
                      width="8"
                      height="8"
                      viewBox="0 0 8 8"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle
                        opacity="0.2"
                        cx="4"
                        cy="4"
                        r="4"
                        fill="#C4C9CE"
                      />
                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                    </svg>
                  </n-icon>
                  {{ item }}
                </p>
                <span class="next" @click="committeeNext(item)">
                  下一级
                  <n-icon class="icon" size=".1rem" 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>
                </span>
              </div>
            </n-tab-pane>
            <n-tab-pane name="小区" tab="小区" class="geo-list">
              <div
                v-for="(item, i) in list3"
                :key="i"
                :class="{ on: curCommunity === item }"
                @click="setCommunity(item)"
              >
                <p>
                  <n-icon class="dot" size=".1rem">
                    <svg
                      width="8"
                      height="8"
                      viewBox="0 0 8 8"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle
                        opacity="0.2"
                        cx="4"
                        cy="4"
                        r="4"
                        fill="#C4C9CE"
                      />
                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                    </svg>
                  </n-icon>
                  {{ item }}
                </p>
                <span class="next" @click="communityNext(item)">
                  下一级
                  <n-icon class="icon" size=".1rem" 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>
                </span>
              </div>
            </n-tab-pane>
          </n-tabs>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import store from '@/store'
import { computed, ref } from 'vue'
const show = computed(() => store.state.showFilterModal)
const close = () => store.commit('SET_FILTER_MODAL', false)

const curTab = ref('tag')

const organization = ref([
  { name: '荣获区级奖项党组织', key: '荣获区级奖项党组织', checked: false },
  {
    name: '荣获市级及以上奖项党组织',
    key: '荣获市级及以上奖项党组织',
    checked: false,
  },
  { name: '某党组织标签', key: '某党组织标签', checked: false },
  { name: '某党组织标签', key: '某党组织标签', checked: false },
  { name: '某党组织标签', key: '某党组织标签', checked: false },
])
const member = ref([
  { name: '荣获区级奖项党员', key: '荣获区级奖项党员', checked: false },
  {
    name: '荣获市级及以上奖项党员',
    key: '荣获市级及以上奖项党员',
    checked: false,
  },
  {
    name: '光荣在党50年',
    key: '光荣在党50年',
    checked: false,
  },
  { name: '党心暖我心', key: '党心暖我心', checked: false },
  { name: '某党员标签', key: '某党员标签', checked: false },
])

const list1 = [
  '牡丹社区',
  'XX社区1',
  'XX社区2',
  'XX社区3',
  'XX社区4',
  'XX社区5',
]
const list2 = [
  '某某居委1',
  '某某居委2',
  '某某居委3',
  '某某居委4',
  '某某居委5',
  '某某居委6',
]
const list3 = [
  '某某小区1',
  '某某小区2',
  '某某小区3',
  '某某小区4',
  '某某小区5',
  '某某小区6',
]

const curGeo = ref('社区')
const curArea = ref<string | null>(null)
const curCommittee = ref<string | null>(null)
const curCommunity = ref<string | null>(null)
const setArea = (name: string) => {
  curArea.value = name
  console.log(name, curArea.value)
}
const setCommittee = (name: string) => (curCommittee.value = name)
const setCommunity = (name: string) => (curCommunity.value = name)
const areaNext = (name: string) => {
  setArea(name)
  curGeo.value = '居委'
}
const committeeNext = (name: string) => {
  setCommittee(name)
  curGeo.value = '小区'
}
const communityNext = (name: string) => {
  setCommunity(name)
  curGeo.value = '楼宇'
}
const toPreStep = () => {
  if (curGeo.value === '楼宇') {
    curGeo.value = '小区'
    return
  }
  if (curGeo.value === '小区') {
    curCommunity.value = null
    curGeo.value = '居委'
    return
  }
  if (curGeo.value === '居委') {
    curCommittee.value = null
    curGeo.value = '社区'
    return
  }
}
const curPath = computed(() => {
  let result = ''
  curArea.value && (result += curArea.value)
  curArea.value &&
    (result +=
      curGeo.value === '社区' ? '' : `/${curCommittee.value || '居委'}`)
  curCommittee.value &&
    (result +=
      curGeo.value === '居委' ? '' : `/${curCommunity.value || '小区'}`)
  if (!result) return []
  return result.split('/')
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
  .tabs
    margin .05rem
    $flex-align()
    border-radius .03rem
    border .01rem solid $light-gray
    padding .02rem
    >div
      flex 1
      border-radius inherit
      color $gray
      text-align center
      cursor pointer
      &:hover
      &.on
        background $light-red
        color $red
  .list
    padding .05rem .1rem
    background #f7f7f7
    >div
      border-bottom .01rem solid $light-gray
      padding .08rem 0
      $flex-align()
      justify-content space-between
      .export
        color $red
        cursor pointer
        font-size .08rem
#geo-filter
  .nav
    padding .03rem .1rem
    color #a7afb7
    .pre
      cursor pointer
      &:hover
        color $red
    b
      color #000

  .geo-list
    background #f7f7f7
    >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
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.n-drawer-mask
  display none
.n-drawer.n-drawer--right-placement
  top .42rem
  .n-drawer-header
    font-family $font-ping-medium
  .n-drawer-body-content-wrapper
    padding 0
    overflow-x hidden !important
    overflow-y auto !important
  .n-drawer-body
    overflow-y auto
#tag-filter
  .n-collapse-item__header
    padding .05rem
    border-top .01rem solid $light-gray
  .n-collapse-item__content-inner
    padding-top 0
  .n-collapse-item
    border-top none
  .n-checkbox
    width 75%
  .n-checkbox__label
    width 90%
    font-size .09rem
    $text-overflow()
    &:hover
      color #ec7281
  .n-checkbox--checked
    .n-checkbox__label
      color $red

#geo-filter
  .n-tabs
    .n-tabs-wrapper
      padding .03rem .1rem
    .n-tabs-tab
      color #a7afb7
      font-size .1rem
      padding 0
      &:hover
      &.n-tabs-tab--active
        color $red
    .n-tab-pane
      padding .05rem .1rem
      box-sizing border-box
</style>
