<script setup>
/**
 * 页面的头部
 *  */
import { computed, defineComponent, getCurrentInstance, onActivated, onMounted, reactive, ref, toRef, watch } from 'vue'
import headerBg from '@/assets/bigScreen/banner-bg.png'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  bgImg: {
    type: String,
    default: '',
  },
})
const dataContainer = reactive({
  img: {
    headerBg,
  },
  title: toRef(props, 'title'),
  bgImg: toRef(props, 'bgImg'),
})
</script>

<template>
  <div
    :style="{
      '--bg-img': `url(${dataContainer.bgImg || dataContainer.img.headerBg})`,
    }"
    class="view-head-cp-container"
  >
    <div class="left">
      <slot name="left" />
    </div>
    <div class="centre">
      {{ dataContainer.title }}
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.view-head-cp-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.938rem;
    box-sizing: border-box;
    // background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    > .left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 1rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
    }
    > .centre {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 2.8rem;
        line-height: 1;
        font-weight: 600;
        font-stretch: normal;
        letter-spacing: 0.5rem;
        color: #ffffff;
        transform: translateY(-0.688rem);
        font-family: Avenir, sans-serif;
        z-index: 11;
    }
    > .right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        font-size: 0.938rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
    }
}
</style>