<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-flow-category-tree
          :app-id="appId"
          :app-node-id="appNodeId"
          :editable="t.editable"
          :id-prefix="idPrefix"
          :class="{ [$style.tree]: tabs.length > 1 }"
          @treeSelect="(c) => (t.category = c)"
        />
        <sd-flow-design-list
          :app-id="appId"
          :app-node-id="appNodeId"
          :editable="t.editable"
          :category="t.category"
          :id-prefix="idPrefix"
          :class="$style.rightcard"
        />
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { sdLocalStorage } from '@/common/services/storage-service'
import components from './_import-components/sd-flow-design-manage-import'

export default {
  name: 'SdFlowDesignManage',
  metaInfo() {
    return {
      title: decodeURIComponent((location.hash + '&').split('&appName=')[1]?.split('&')[0] || ''),
    }
  },
  components: {
    ...components,
  },
  data() {
    return {
      appId: '',
      appNodeId: '',
      idPrefix: '',
      tabs: [
        {
          key: 'self',
          label: '本部流程',
          editable: true,
          category: {},
        },
      ],
      activeKey: '',
    }
  },
  created() {
    this.appId = this.$route.query.appId
    this.appNodeId = this.$route.query.appNodeId
    const GID = JSON.parse(sdLocalStorage.getItem('hierarchicalInfo') || '{}')?.authGroupId || ''
    this.idPrefix = GID === -1 ? 'G_1_' : 'G' + GID + '_'
    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>
