<template>
  <a-layout :class="$style.page">
    <sd-header :class="[$style.header, collapsed ? $style.isCollapsedheader : '']">
      <!-- <div :class="$style.trigger">
        <a-icon
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </div> -->
      <!-- <portal-target name="top-nav-menu" slim /> -->
      <!-- <div :class="$style.tools">
        <div><ext-header-tools-before /></div>
        <span :class="$style.links">
          <a-icon
            v-if="showBusinessNavi"
            type="sd-home"
            title="首页"
            @click="$router.push('/sd-home')"
          />
          <a-icon
            v-if="showBusinessNavi"
            type="sd-module"
            title="工作台"
            @click="$router.push('/sd-frame/iam-content')"
          />
          <a-icon
            type="sd-bell"
            title="消息提醒"
            @click="$router.push('/sd-frame/sd-message-remind')"
          />
          <a-badge v-if="remindTotal > 0" dot :class="$style.headerbadge" />
          <!- - 导航菜单切换 - ->
          <naviGroupsMenu :data-source="naviGroups" />
        </span>
        <sd-header-user-action />
      </div> -->
    </sd-header>
    <a-layout :has-sider="true">
      <a-layout-sider
        v-model="collapsed"
        :trigger="null"
        collapsible
        :breakpoint="isCollapsed ? null : 'lg'"
        :width="siderWidth"
      >
        <sd-nav-menu
          :collapsed="collapsed"
          @naviGroupsUpdated="(groups) => (naviGroups = groups || [])"
        />
      </a-layout-sider>
      <div :class="[$style.trigger, collapsed ? $style.isCollapsedtrigger : '']">
        <a-icon
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </div>
      <a-layout-content :class="{ 'sd-frame-main': !multiTabs }">
        <sd-tabbed-view
          v-if="multiTabs"
          :show-business-navi="showBusinessNavi"
          :remind-total="remindTotal"
          :navi-groups="naviGroups"
          :data-source="dataSource"
        />
        <router-view v-else />
      </a-layout-content>
      <!-- </div> -->
    </a-layout>
  </a-layout>
</template>

<script>
import { Icon, Dropdown, Menu } from 'ant-design-vue'
import { sdLocalStorage } from '@/common/services/storage-service'
import storeMixin from '@/common/store-mixin'
import eventBus from '@/common/services/event-bus'
import frequentlyService from '../frequently/frequently-service'
import components from './_import-components/sd-frame-import'
import navMenuService from './nav-menu-service'

const naviGroupsMenu = {
  props: ['dataSource'],
  methods: {
    changeNavi(menu) {
      const { href } = this.$router.resolve({ path: '/sd-frame' })
      const url = `?menuGroupCode=${encodeURIComponent(menu.code)}${href}`
      if (menu.target === '_blank') {
        window.open(url, '_blank')
      } else {
        location.replace(url)
      }
    },
  },
  render() {
    let menu = ''
    const data = this.dataSource[0]
    if (this.dataSource.length === 1) {
      menu = (
        <Icon
          type={data.icon || 'sd-module'}
          title={data.tooltip || data.text}
          vOn:click={() => this.changeNavi(data)}
        />
      )
    } else if (this.dataSource.length > 1) {
      menu = (
        <Dropdown>
          <Icon type={data.icon || 'sd-module'} />
          <Menu slot='overlay'>
            {this.dataSource.map((item) => (
              <Menu.Item vOn:click={() => this.changeNavi(item)}>
                {item.tooltip || item.text}
              </Menu.Item>
            ))}
          </Menu>
        </Dropdown>
      )
    }
    return menu
  },
}

export default {
  name: 'SdFrame',
  components: {
    ...components,
    // naviGroupsMenu,
  },
  mixins: [storeMixin],
  data() {
    return {
      collapsed: false,
      siderWidth: 220,
      isCollapsed: false, // 是否收缩左侧导航条
      paramId: 2, // 个性化设置收缩导航条参数id
      naviGroups: [],
      showBusinessNavi: true, // 显示业务导航
      unreadCount: {
        reminder: 0,
        expiry: 0,
        sys: 0,
      },
    }
  },
  computed: {
    remindTotal() {
      // 消息提醒数 = 催办提醒数 + 到期提醒数 + 系统提醒数
      let total = 0
      Object.keys(this.unreadCount).forEach((key) => (total += this.unreadCount[key]))
      return total
    },
  },
  created() {
    const openSecret = JSON.parse(sdLocalStorage.getItem('commonConfig') || '{}').openSecret
    // 开启三员，且用户为其中之一
    if (
      openSecret &&
      this.userInfo &&
      (this.userInfo.isSysAdmin || this.userInfo.isSecAdmin || this.userInfo.isSecAudit)
    ) {
      this.showBusinessNavi = false
    }
    // 获取是否收缩左侧导航条配置参数
    frequentlyService.getPersonalsetes(this.paramId).then((res) => {
      if (res && res.paramValue === '1') {
        this.collapsed = true
        this.isCollapsed = true
      }
    })
    this.updateRemindCount()
    // 添加消息数更新的监听
    this.watchRemindCountEvent = eventBus.on('updateRemindCount', (evt, unreadCount) => {
      Object.assign(this.unreadCount, unreadCount)
    })
  },
  destroyed() {
    eventBus.off(this.watchRemindCountEvent)
  },
  methods: {
    updateRemindCount() {
      navMenuService.getRemindCount().then((res) => {
        if (res.data) {
          this.unreadCount.expiry = Number(res.data.EXPIRY) || 0
          this.unreadCount.reminder = Number(res.data.REMINDER) || 0
          this.unreadCount.sys = Number(res.data.SYS) || 0
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$link-icon-size: 22px;
$line-height-theme: 66px;
$theme-check: #fff;
$icon-size: 15px;
.page {
  height: 100%;
  .trigger {
    display: inline-block;
    padding: 0 15px;
    vertical-align: top;
    cursor: pointer;
    transition: color 0.3s;
    // &:hover {
    //   color: $text-color-inverse;
    // }
    position: absolute;
    top: 24px;
    left: 230px;
    z-index: 1000;
  }
  .isCollapsedtrigger {
    left: 90px !important;
  }

  aside {
    overflow: auto;
  }
  :global(.sd-frame-main) {
    height: 100%;
    padding: $padding-lg;
    overflow: auto;
  }
}
.title {
  display: inline-block;
  margin-left: -35px;
  font-weight: 600;
  line-height: inherit;
  text-align: center;
  vertical-align: top;
  > i {
    // 固定大小的logo
    /* stylelint-disable-next-line */
    font-size: 20px;
    transform: scale(10);
  }
}
// 主内容区的Card白色背景要占满
:global .sd-frame-main > .ant-card {
  min-height: 100%;
}
.header > div:last-child {
  width: calc(100% - 200px);
}
.isCollapsedheader {
  width: 80px !important;
  :global(.left_sd-header_common) {
    width: 0;
  }
  :global(.title_sd-header_common) {
    width: 80px;
  }
  :global(.title_sd-header_common) {
    background: url('~@custom/images/logo1.png') no-repeat center;
  }
}
.links {
  display: flex;
  align-items: center;
  margin: 0 $link-icon-size / 2;
  li:global(.ant-menu-item) {
    padding: 0;
  }
  i:global(.anticon) {
    padding: 0 $link-icon-size / 2;
    margin: 0;
    font-size: $link-icon-size;
    line-height: $layout-header-height;
    vertical-align: middle;
    &:hover {
      // 悬浮的颜色，与主题无关
      /* stylelint-disable-next-line */
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}
.tools {
  display: flex;
  float: right;
}
.headerbadge {
  bottom: $line-height-theme / 6;
  left: -$link-icon-size / 2 - 5;
}
</style>
