<template>
  <div class="dashboard-editor-container">
    <!-- 动态渲染有权限的Tab -->
    <el-tabs v-model="activeTab" class="workorder-tabs">
      <el-tab-pane
        v-for="tab in allowedTabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      ></el-tab-pane>
    </el-tabs>

    <!-- 根据当前Tab显示内容 -->
    <div v-if="activeTab === 'dashboard'">
      <HarmfulInfoReport/>
    </div>

    <div v-else-if="activeTab === 'report'">
      <RectifyInfoReport/>
    </div>

    <div v-else-if="activeTab === 'audit'">
      <InterviewArticle/>
    </div>

    <div v-else-if="activeTab === 'workorder'">
      <WorkorderHomePage/>
    </div>

    <div v-else-if="activeTab === 'communication'">
      <CommunicationsPage/>
    </div>

    <!-- 无权限时的提示 -->
    <div v-else class="no-permission-tip">
      <el-alert
        title="无访问权限"
        type="warning"
        description="您没有访问任何功能的权限，请联系管理员"
        show-icon
        :closable="false"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import HarmfulInfoReport from './dashboard/HarmfulInfoReport';
import RectifyInfoReport from './dashboard/RectifyInfoReport';
import InterviewArticle from './dashboard/InterviewArticle';
import WorkorderHomePage from './dashboard/WorkorderHomePage';
import CommunicationsPage from './dashboard/CommunicationsPage';

export default {
  name: 'Index',
  components: {
    /*HarmfulInfoReport,
    RectifyInfoReport,
    InterviewArticle,
    WorkorderHomePage,*/
    CommunicationsPage
  },
  data() {
    return {
      activeTab: null, // 初始为null，等待权限检查
      initialized: false // 标记是否已完成初始化
    };
  },
  computed: {
    ...mapGetters(['permissions']),

    // 定义所有Tab及其所需权限
    allTabs() {
      return [
        /*{ name: 'workorder', label: '工单首页', requiredPermission: 'server:workorder-infos:query' },
        { name: 'dashboard', label: '有害信息上报', requiredPermission: 'server:harmful-info-report:query' },
        { name: 'report', label: '整改结果上报', requiredPermission: 'server:rectify-info-report:query' },
        { name: 'audit', label: '访谈稿', requiredPermission: 'server:interview-article:query' },*/
        { name: 'communication', label: '沟通分析', requiredPermission: null },
      ];
    },

    // 计算有权限访问的Tab
    allowedTabs() {
      return this.allTabs.filter(tab =>
        this.hasPermission(tab.requiredPermission)
      );
    }
  },
  methods: {
    hasPermission(permission) {
      if (!permission) return true;
      return this.permissions?.includes(permission) ?? false;
    },

    // 设置默认选中的Tab
    setDefaultTab() {
      if (this.allowedTabs.length > 0) {
        this.activeTab = this.allowedTabs[0].name;
      } else {
        this.activeTab = 'no-permission';
      }
      this.initialized = true;
    }
  },
  watch: {
    // 监听权限变化
    permissions: {
      immediate: true,
      handler() {
        this.setDefaultTab();
      }
    },

    // 监听allowedTabs变化
    allowedTabs() {
      if (this.initialized && !this.allowedTabs.some(tab => tab.name === this.activeTab)) {
        this.setDefaultTab();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .workorder-tabs {
    margin-bottom: 20px;
    background: #fff;
    padding: 0 20px;
    border-radius: 4px;

    :deep(.el-tabs__header) {
      margin: 0;
    }
  }

  .tab-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .no-permission-tip {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
