<template>
  <a-card>
    <a-tabs v-model="activeTab" :class="$style.tab" @change="tabChange">
      <a-tab-pane v-for="menu in menuList" :key="menu.id" :tab="menu.name" />
    </a-tabs>
    <div :class="$style.content">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </a-card>
</template>

<script>
import PageService from '@/common/services/page-service'
import components from './_import-components/sd-application-manage-import'

export default {
  name: 'SdApplicationManage',
  metaInfo() {
    return {
      title: this.appName,
    }
  },
  components,
  props: {
    appId: {
      type: String,
      default: '',
    },
    appName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      menuList: [],
      activeTab: '',
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        // 同一应用，路由有变化：当前有页签（menuList）,并且路由是/sd-frame/sd-application-manage
        // 则是从应该中心再次点击打开应用，此时不会走created方法，直接将路由重置为已经选中页签的路由
        if (
          this.appId === newVal.query.appId &&
          this.menuList.length > 0 &&
          newVal.path === '/sd-frame/sd-application-manage'
        ) {
          // 获取当前选中页签的url
          const url = this.menuList.find((m) => m.id === this.activeTab)?.url
          this.$router.push({
            path: `/sd-frame/sd-application-manage${url}`,
            query: { ...this.$props, ...this.$attrs },
          })
        }
      },
      immediate: true,
    },
  },
  created() {
    // 获取应用菜单列表
    this.getAppMenuList()
  },
  methods: {
    // 获取应用菜单列表
    getAppMenuList() {
      const params = {
        columns: 'id,creationTime,appId,name,url,sortNumber,status',
        orderBy: 'sortNumber asc',
        formId: 'weAppMenu',
        maxResults: -1,
        startPosition: 0,
        expressions: [
          {
            dataType: 'str',
            name: 'appId',
            op: 'in',
            stringValues: ['0', this.appId],
          },
          {
            dataType: 'str',
            name: 'menuType',
            op: 'eq',
            stringValue: 'app_tab',
          },
          {
            dataType: 'str',
            name: 'status',
            op: 'eq',
            stringValue: '1',
          },
        ],
      }
      PageService.getList(params).then((res) => {
        this.menuList = (res.data.data || []).map((item) => {
          return {
            id: item.id,
            name: item.name,
            url: item.url,
          }
        })
        const index = this.menuList.findIndex(
          (item) => this.$route.path === `/sd-frame/sd-application-manage${item.url}`
        )
        if (index !== -1) {
          this.activeTab = this.menuList[index].id
        } else {
          // 未找到匹配的路由，默认显示第一个页面
          if (this.menuList[0]) {
            this.activeTab = this.menuList[0].id
            this.$router.push({
              path: `/sd-frame/sd-application-manage${this.menuList[0].url}`,
              query: { ...this.$props, ...this.$attrs },
            })
          }
        }
      })
    },
    tabChange(key) {
      const url = this.menuList.find((item) => item.id === key)?.url || ''
      this.$router.push({
        path: `/sd-frame/sd-application-manage${url}`,
        query: { ...this.$props, ...this.$attrs },
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tab {
  :global(.ant-tabs-bar) {
    margin-bottom: $padding-xs;
  }
}
.content {
  > div > :global(.ant-spin-spinning) {
    margin: auto;
  }
  :global(> .ant-card > .ant-card-body) {
    padding: 0;
  }
}
</style>
