<template>
  <a-tabs
    v-model="activeKey"
    :class="{ 'sd-has-table': tabs.length > 1, [$style.hiddenTab]: tabs.length === 1 }"
  >
    <a-tab-pane v-for="t in tabs" :key="t.key" :tab="t.label">
      <div :class="$style.wrapHeight">
        <sd-app-ywlx-tree
          :app-id="appId"
          :app-node-id="appNodeId"
          :editable="t.editable"
          :app-module-info="appModuleInfo"
          :class="{ [$style.tree]: tabs.length > 1 }"
          @treeSelect="(c) => (t.category = c)"
        />
        <sd-app-ywlx-list
          :app-id="appId"
          :app-node-id="appNodeId"
          :editable="t.editable"
          :category="t.category"
          :app-module-info="appModuleInfo"
          :class="$style.rightcard"
        />
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import components from './_import-components/sd-app-ywlx-manage-import'

export default {
  name: 'SdAppYwlxManage',
  metaInfo() {
    return {
      title:
        decodeURIComponent((location.hash + '&').split('&appName=')[1]?.split('&')[0] || '') ||
        '业务类型维护',
    }
  },
  components,
  data() {
    return {
      appId: '',
      appNodeId: undefined,
      tabs: [
        {
          key: 'self',
          label: '本部业务类型',
          editable: true,
          category: {},
        },
      ],
      activeKey: '',
      appModuleInfo: {},
    }
  },
  created() {
    this.appId = this.$route.query.appId
    this.appNodeId = this.$route.query.appNodeId
    if (this.appNodeId) {
      this.tabs.unshift({ key: 'share', label: '公共业务类型', editable: false, category: {} })
    }
    this.activeKey = this.tabs[0].key
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.hidden-tab {
  :global(.ant-tabs-bar) {
    display: none;
  }
}
.wrap-height {
  display: flex;
  flex: auto;
  height: 100%;
  .tree {
    margin-top: -16px;
  }
  .rightcard {
    flex: 1;
    width: calc(100% - 20%);
    height: 100%;
  }
}
</style>
