<template>
  <div class="platform flex">
    <Card class="tab-card" :bordered="false">
      <Tabs v-model:activeKey="activeKey" tab-position="left">
        <Tabs.TabPane
          v-if="
            isWhereAdmin == 'TENANT_ADMIN' ||
            (isWhereAdmin == 'SYS_ADMIN' || isWhereAdmin == 'CUSTOMER_USER')
          "
          key="企业信息"
          tab="企业信息"
        />
        <Tabs.TabPane
          v-if="isWhereAdmin !== 'CUSTOMER_USER' && isWhereAdmin !== 'TENANT_ADMIN'"
          key="平台信息"
          tab="平台信息"
        />
        <Tabs.TabPane
          v-if="isWhereAdmin !== 'CUSTOMER_USER' && isWhereAdmin !== 'TENANT_ADMIN'"
          key="APP信息"
          tab="APP信息"
        />
      </Tabs>
    </Card>

    <div style="width: 100%">
      <Card class="card" :title="activeKey" :bordered="false" :bodyStyle="{ display: 'none' }" />
      <EnterpriseInfo
        v-if="
          (activeKey === '企业信息' && isWhereAdmin == 'SYS_ADMIN') ||
          isWhereAdmin == 'TENANT_ADMIN' ||
          isWhereAdmin == 'CUSTOMER_USER'
        "
      />
      <CVIDraw
        v-if="
          activeKey === '平台信息' &&
          isWhereAdmin == 'SYS_ADMIN' &&
          isWhereAdmin !== 'CUSTOMER_USER' &&
          isWhereAdmin !== 'TENANT_ADMIN'
        "
      />
      <AppDraw
        v-if="
          activeKey === 'APP信息' &&
          isWhereAdmin == 'SYS_ADMIN' &&
          isWhereAdmin !== 'CUSTOMER_USER' &&
          isWhereAdmin !== 'TENANT_ADMIN'
        "
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Tabs, Card } from 'ant-design-vue';
  import { ref, computed } from 'vue';
  import EnterpriseInfo from './cpns/EnterpriseInfo.vue';
  import CVIDraw from './cpns/CVIDraw.vue';
  import AppDraw from './cpns/AppDraw.vue';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';

  const activeKey = ref('企业信息');
  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const isWhereAdmin: any = computed(() => {
    if (userInfo.roles.includes('TENANT_ADMIN')) {
      return 'TENANT_ADMIN';
    } else if (userInfo.roles.includes('CUSTOMER_USER')) {
      return 'CUSTOMER_USER';
    } else {
      return 'SYS_ADMIN';
    }
  });
</script>

<style lang="less" scoped>
  .title {
    width: 97.4%;
    height: 50px;
    margin: 1rem;
    line-height: 50px;
    font-size: 18px;
    padding-left: 10px;
    background-color: #fff;
  }

  .tab-card {
    margin: 1rem 0 1rem 1rem;
  }

  .card {
    margin: 1rem;
  }
</style>
