<template>
  <section class="page-grid">
    <section class="panel workspace-panel">
      <div class="panel-header">
        <div>
          <p class="eyebrow">流程工作台</p>
          <h3>{{ title }}</h3>
        </div>
        <span class="panel-tag">{{ panelTag }}</span>
      </div>

      <div v-if="visibleSections.length" class="workspace-tabbar">
        <button
          v-for="section in visibleSections"
          :key="section.key"
          class="workspace-tab"
          :class="{ 'workspace-tab-active': section.key === activeSection?.key }"
          type="button"
          :title="section.desc"
          @click="selectSection(section.key)"
        >
          <span class="workspace-tab-step">{{ section.step }}</span>
          <div>
            <strong>{{ section.label }}</strong>
          </div>
        </button>
      </div>

      <div v-if="activeSection" class="workspace-section-head">
        <div>
          <p class="eyebrow">当前环节</p>
          <span class="title-with-help" :title="activeSection.desc">
            <h3>{{ activeSection.label }}</h3>
          </span>
        </div>
        <span class="panel-tag">{{ activeSection.step }}</span>
      </div>

      <KeepAlive v-if="activeSection">
        <component :is="activeSection.component" :key="activeSection.key" />
      </KeepAlive>

      <div v-else class="feedback-banner error-banner">当前账号没有此流程工作台的访问权限。</div>
    </section>
  </section>
</template>

<script setup>
import { computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import { readSession } from "../services/api";

const props = defineProps({
  eyebrow: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  panelTag: {
    type: String,
    default: "流程融合"
  },
  stageCode: {
    type: String,
    required: true
  },
  sections: {
    type: Array,
    required: true
  }
});

const route = useRoute();
const router = useRouter();

const permissionCodes = computed(() => readSession()?.permission_codes || []);
const visibleSections = computed(() =>
  props.sections.filter((section) => {
    if (section.permissionsAny?.length) {
      return section.permissionsAny.some((permission) => permissionCodes.value.includes(permission));
    }
    return permissionCodes.value.includes(section.permission);
  })
);
const activeSection = computed(() => {
  const sectionKey = String(route.query.tab || "");
  return visibleSections.value.find((section) => section.key === sectionKey) || visibleSections.value[0] || null;
});

function selectSection(sectionKey) {
  router.replace({
    name: route.name,
    query: {
      ...route.query,
      tab: sectionKey
    }
  });
}

watch(
  () => [route.query.tab, visibleSections.value.map((section) => section.key).join("|")],
  () => {
    if (!visibleSections.value.length) {
      return;
    }

    const currentTab = String(route.query.tab || "");
    if (!visibleSections.value.some((section) => section.key === currentTab)) {
      selectSection(visibleSections.value[0].key);
    }
  },
  { immediate: true }
);
</script>
