<script lang="ts" setup>
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import CombinedDisplay from '/src/views/reportManage/dataCenter/combinedDisplay/index.vue';
// import DataExport from '/src/views/reportManage/dataCenter/normalDisplay/components/DataExport.vue'
//import CompareData from '/src/views/reportManage/dataCenter/normalDisplay/components/CompareData.vue'
import NormalDisplay from '/src/views/reportManage/dataCenter/normalDisplay/index.vue';

const activeName = ref('NormalDisplay');
const tabsComponents: any = {
  NormalDisplay,
  CombinedDisplay,
  //CompareData,
  // DataExport,
};
const panes = [
  {label: '普通展示', name: 'NormalDisplay'},
  {label: '合并展示', name: 'CombinedDisplay'},
  //{ label: '对比数据', name: 'CompareData' },
  // { label: '数据导出', name: 'DataExport' },
];

</script>

<template>
  <div>
    <div class="custom-container">
      <div class="custom-tabs">
        <div
            v-for="pane of panes"
            :key="pane.name"
            :class="['asj-tab', { active: activeName === pane.name }]"
            @click="activeName = pane.name">
          {{ pane.label }}
        </div>
      </div>
      <component :is="tabsComponents[activeName]"></component>
    </div>
  </div>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.custom-container {
  overflow: inherit;
}

.custom-tabs {
  background-color: #fff;
  top: 0px;
  z-index: 9;
  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
  position: sticky;
  padding: 0 12px;
  display: flex;
  height: 40px;
  gap: 24px;
  /* border-radius: 12px; */
  overflow: hidden;
}
</style>
