<script setup lang="ts">
import { shallowRef, onMounted } from "vue";
import { usePermission } from "/@/hooks/core";
import Detail from "./components/detail.vue";
import Summary from "./components/summary.vue";
import NoAuth from "/@/components/NoAuth/NoAuth.vue";

const active = shallowRef("");

const { hasPermissionWithCode } = usePermission("saleDepartment");

onMounted(() => {
  if (hasPermissionWithCode("11")) {
    active.value = "4";
    return
  }

  if (hasPermissionWithCode("3")) {
    active.value = "3";
    return
  }
});
</script>

<template>
  <div class="report-container">
    <ElTabs v-model="active" style="color: #fff" v-if="active">
      <ElTabPane name="4" label="业绩表明细" v-if="hasPermissionWithCode('11')">
        <Detail v-if="active === '4'" />
      </ElTabPane>

      <ElTabPane name="3" label="业绩表汇总" v-if="hasPermissionWithCode('3')">
        <Summary v-if="active === '3'" />
      </ElTabPane>
    </ElTabs>

    <NoAuth v-else />
  </div>
</template>

<style scoped lang="scss">
.report-container {
   height: calc(100vh - 48px);
   :deep(.el-tabs__header) {
    background-color: #fff;
    padding: 10px 10px 0;
  }
}
</style>
