<template>
  <a-layout-header class="custom-header">
    <header class="custom-header-box">
      <div class="header-item left">
        <a-space>
          <ChartHeaderLeft />
        </a-space>
      </div>
      <div class="header-item center">
        <CustomHeaderTitle :reportName="props.reportName"/>
      </div>
      <div class="header-item right">
        <a-space>
          <ChartHeaderRight :reportId="props.reportId"/>
        </a-space>
      </div>
    </header>
  </a-layout-header>
</template>

<script setup name="ChartHeader">
import ChartHeaderLeft from './header-left.vue';
import CustomHeaderTitle from './header-title.vue';
import ChartHeaderRight from './header-right.vue';
import { LayoutHeader as ALayoutHeader } from 'ant-design-vue';

const props = defineProps({
  reportId: String,
  reportName: String,
})
</script>

<style lang="less">
.custom-header {
  background-color: #fff !important;
  .custom-header-box {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);

    .header-item {
      display: flex;
      align-items: center;
      min-width: 400px;
      &.left {
        justify-content: start;
      }
      &.center {
        justify-content: center;
      }
      &.right {
        justify-content: end;
      }

      height: 60px;
    }
  }
}
</style>
