<template>
  <n-modal
    :show="show"
    :mask-closable="false"
    style="width: 98vw; transform: translateY(4%)"
  >
    <div id="struct-modal">
      <n-layout class="layout" has-sider>
        <n-layout-sider width="23%" class="side-menu">
          <h2
            :class="{ on: curKey === 'default' }"
            @click.prevent="
              () => {
                setCurKey('default', {
                  label: '中共浦东新区花木街道工作委员会',
                })
                handleExpand([])
              }
            "
          >
            中共浦东新区花木街道工作委员会
          </h2>
          <div class="menu">
            <n-menu
              :options="menus"
              :expanded-keys="expandedKeys"
              :on-update:expanded-keys="handleExpand"
              :value="curKey"
              :on-update:value="setCurKey"
            />
          </div>
        </n-layout-sider>
        <n-layout has-sider>
          <n-layout-sider
            width="23%"
            :collapsed="!showSubordinates"
            :collapsed-width="0"
            collapsed-mode="width"
            class="sub"
          >
            <p
              v-for="item in subList"
              :key="item.key"
              :class="{ on: subKey === item.key }"
              @click.prevent="setSub(item)"
            >
              {{ item.label }}
            </p>
          </n-layout-sider>
          <n-layout class="wrapper">
            <n-layout-header class="head">
              <n-space>
                <p>{{ curMenu.label }}</p>
                <n-tag type="primary" size="small">标签</n-tag>
                <n-tag type="info" size="small">标签</n-tag>
                <n-tag type="success" size="small">标签</n-tag>
              </n-space>
              <n-icon class="close-btn" size=".2rem" @click.prevent="close">
                <CloseOutline />
              </n-icon>
            </n-layout-header>
            <n-layout-content class="content">
              <div v-if="curKey === 'default'" class="card">
                <div class="row">
                  <span>党工委书记</span>
                  <p>内容</p>
                </div>
                <div class="row">
                  <span>党工委副书记</span>
                  <p>内容</p>
                </div>
                <div class="row">
                  <span>党组织地址</span>
                  <p>内容</p>
                </div>
                <div class="row">
                  <span>党组织内党员数量</span>
                  <p>内容</p>
                </div>
              </div>
              <div v-else-if="curKey === '1'" class="card">
                <div class="row">
                  <span>书记</span>
                  <p>内容</p>
                </div>
                <div class="row">
                  <span>党组织地址</span>
                  <p>内容</p>
                </div>
              </div>
              <div
                v-else-if="
                  curKey === '2' ||
                  curKey === '3' ||
                  (curKey.split('-').length === 3 && curMenu._hasSub)
                "
                class="card"
              >
                <div class="flex">
                  <div class="col">
                    <div class="row">
                      <span>党总支书记</span>
                      <p>内容</p>
                    </div>
                    <div class="row">
                      <span>党组织地址</span>
                      <p>内容</p>
                    </div>
                    <div class="row">
                      <span>党组织内党员数量</span>
                      <p>内容</p>
                    </div>
                  </div>
                  <div class="col">
                    <div class="row">
                      <span>党总支委员</span>
                      <p>内容</p>
                    </div>
                    <div class="row">
                      <span>党组织联系方式</span>
                      <p>内容</p>
                    </div>
                  </div>
                </div>
              </div>
              <template
                v-else-if="
                  ((curKey.startsWith('2') || curKey.startsWith('3')) &&
                    curKey.split('-').length === 2) ||
                  (curKey.split('-').length === 3 && !curMenu._hasSub)
                "
              >
                <div class="card">
                  <div class="flex">
                    <div class="col">
                      <div class="row">
                        <span>党总支书记</span>
                        <p>内容</p>
                      </div>
                      <div class="row">
                        <span>党组织地址</span>
                        <p>内容</p>
                      </div>
                      <div class="row">
                        <span>党组织内党员数量</span>
                        <p>内容</p>
                      </div>
                    </div>
                    <div class="col">
                      <div class="row">
                        <span>党总支委员</span>
                        <p>内容</p>
                      </div>
                      <div class="row">
                        <span>党组织联系方式</span>
                        <p>内容</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="title">
                    <p>党员详表</p>
                    <n-button type="primary" size="tiny" @click="exportList">
                      <template #icon>
                        <n-icon size=".12rem">
                          <svg-icon :data="exportIcon" original />
                        </n-icon>
                      </template>
                      导出
                    </n-button>
                  </div>
                  <n-data-table
                    class="activity-table"
                    :columns="columns"
                    :data="tableList"
                    :pagination="pagination"
                    size="small"
                  />
                </div>
              </template>
            </n-layout-content>
          </n-layout>
        </n-layout>
      </n-layout>
    </div>
  </n-modal>
</template>

<script lang="ts" setup>
import store from '@/store'
import { computed, h, ref } from 'vue'
import PartyIcon from './party-icon.vue'
import exportIcon from '@images/export.svg'
import { CloseOutline } from '@vicons/ionicons5'
const show = computed(() => store.state.showStructModal)
const close = () => {
  store.commit('SET_STRUCT_MODAL', false)
  store.commit('SET_SHOW_BASIC_INFO', true)
}

function renderIcon() {
  return () => h(PartyIcon)
}
const menus = [
  { label: '行政党组', key: '1', icon: renderIcon() },
  {
    label: '机关事业单位党总支',
    key: '2',
    icon: renderIcon(),
    children: [
      {
        label: '机关第一党支部',
        key: '2-1',
      },
      {
        label: '机关第二党支部',
        key: '2-2',
      },
      {
        label: '机关第三党支部',
        key: '2-3',
      },
      {
        label: '机关第四党支部',
        key: '2-4',
      },
      {
        label: '社区事务受理中心党总支',
        key: '2-5',
      },
      {
        label: '社区党建服务中心党支部',
        key: '2-6',
      },
      {
        label: '社区文化活动中心党支部',
        key: '2-7',
      },
      {
        label: '城市网格化综合管理中心党支部',
        key: '2-8',
      },
      {
        label: '社区综治中心党支部',
        key: '2-9',
      },
      {
        label: '保安协管大队党支部',
        key: '2-10',
      },
      {
        label: '城市管理执法支队花木中队党支部',
        key: '2-11',
      },
      {
        label: '城市建设管理事务中心党支部',
        key: '2-12',
      },
      {
        label: '花木街道机关退休干部党支部',
        key: '2-13',
      },
      {
        label: '花木街道机关离休干部党支部',
        key: '2-14',
      },
    ],
  },
  {
    label: '社区党委',
    key: '3',
    icon: renderIcon(),
    children: [
      {
        label: '六大社区党委',
        key: '3-1',
        children: [
          {
            label: '牡丹社区党委',
            key: '3-1-1',
            _hasSub: true,
          },
          {
            label: '自由社区党委',
            key: '3-1-2',
          },
          {
            label: '培花社区党委',
            key: '3-1-3',
          },
          {
            label: '东城社区党委',
            key: '3-1-4',
          },
          {
            label: '联洋社区党委',
            key: '3-1-5',
          },
          {
            label: '钦阳社区党委',
            key: '3-1-6',
          },
        ],
      },
      {
        label: '“两新”党组织',
        key: '3-2',
      },
      {
        label: '花木经济发展总公司党支部',
        key: '3-3',
      },
      {
        label: '花木房地产开发经营公司党支部',
        key: '3-4',
      },
      {
        label: '花木街道鑫荣联力联合党支部',
        key: '3-5',
      },
      {
        label: '上海钦洋投资管理中心党总支',
        key: '3-6',
      },
    ],
  },
]

const subList = [
  { label: '牡丹社区直属党支部', key: '3-1-1-1' },
  { label: '牡丹第一居民区党总支', key: '3-1-1-2' },
  { label: '牡丹第二居民区党总支', key: '3-1-1-3' },
  { label: '牡丹第三居民区党总支', key: '3-1-1-4' },
  { label: '牡丹第四居民区党总支', key: '3-1-1-5' },
  { label: '牡丹第五居民区党总支', key: '3-1-1-6' },
  { label: '牡丹第六居民区党总支', key: '3-1-1-7' },
  { label: '牡丹第七居民区党总支', key: '3-1-1-8' },
  { label: '牡丹第八居民区党总支', key: '3-1-1-9' },
  { label: '牡丹第九居民区党总支', key: '3-1-1-10' },
  { label: '牡丹兰庭居民区党支部', key: '3-1-1-11' },
]

const expandedKeys = ref<string[]>([])
const handleExpand = (val: string[]) => {
  if (expandedKeys.value.length === 0 || val.length === 0) {
    expandedKeys.value = val
  } else if (val[val.length - 1].startsWith(expandedKeys.value[0])) {
    expandedKeys.value = val
  } else {
    expandedKeys.value = [val[val.length - 1]]
  }
  console.log(expandedKeys.value)
  if (expandedKeys.value.length === 0) return
  curKey.value = expandedKeys.value[0]
  curMenu.value = menus.find((e) => e.key === curKey.value)!
}

const curKey = ref('default')
const subKey = ref<string | null>(null)
const curMenu = ref<any>({
  label: '中共浦东新区花木街道工作委员会',
  key: 'default',
})
const setCurKey = (val: string, item: any) => {
  curKey.value = val
  curMenu.value = item
  subKey.value = null
  if (val === 'default' || val === '1') handleExpand([])
}
const showSubordinates = computed(() => curMenu.value._hasSub || !!subKey.value)
const setSub = (data: any) => {
  subKey.value = data.key
  curMenu.value = data
}

const columns = [
  { title: '姓名', key: 'name' },
  { title: '性别', key: 'gender' },
  { title: '民族', key: 'ethic' },
  { title: '所属党组织', key: 'org' },
]
const tableList = [
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
  {
    name: '内容',
    gender: '内容',
    ethic: '内容',
    org: '内容',
  },
]
const pagination = {
  pageSize: 10,
}

const exportList = () => {}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
#struct-modal
  position relative
  font-size .1rem
  height 90vh
  border-radius .05rem
  .layout
    background inherit
    border-radius inherit
    width 100%
    height 100%
  .side-menu
    z-index 5
    height 100%
    box-shadow .01rem 0 .03rem rgba(0,0,0,0.3)
    h2
      border-radius .05rem
      padding .08rem
      margin .16rem .16rem 0
      font-size .14rem
      color $red
      cursor pointer
      &:hover
      &.on
        background $light-red
  .head
    $flex-align()
    justify-content space-between
    padding 0 .2rem
    box-shadow 0 .01rem .03rem rgba(0,0,0,0.3)
    z-index 1
    height .5rem
    box-sizing border-box
    p
      font-size .14rem
      font-family $font-ping-medium
      margin-right .2rem
    .close-btn
      color $font
      cursor pointer
  .content
    background #ededed
    flex 1
    box-sizing border-box
    padding .12rem
    .card
      box-sizing inherit
      padding .08rem .16rem
      border-radius .05rem
      background #fafafa
      margin-bottom .1rem
      .title
        $flex-align()
        justify-content space-between
        margin-bottom .1rem
        p
          font-family $font-ping-medium
          font-size .12rem
      .flex
        display flex
      .col
        flex 1
      .row
        margin-bottom .1rem
        padding-left .05rem
        span
          color $font
  .sub
    width 100%
    height 100%
    background #f7f7f7
    box-shadow .01rem 0 .03rem rgba(0,0,0,0.3)
    z-index 3
    box-sizing border-box
    padding .1rem 0
    p
      padding .1rem .2rem
      font-size .09rem
      color $font
      cursor pointer
      &:hover
      &.on
        color $red
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#struct-modal
  .side-menu
    display flex
    flex-direction column
    .menu
      flex 1
      overflow-y auto
  .n-menu
    .n-menu-item-content-header
      z-index 1
    >.n-submenu
      >.n-submenu-children
        .n-menu-item-content-header
          font-size .12rem
        .n-submenu-children
          .n-menu-item-content-header
            font-size .1rem
    .n-menu-item-content--child-active
      &:before
        content ""
        position absolute
        left 8px
        right 8px
        top 0
        bottom 0
        pointer-events none
        border-radius .05rem
        transition background .3s
        background $light-red
  .wrapper
    .n-layout-scroll-container
      display flex
      flex-direction column
</style>
