<script lang="ts" setup name="IntegralHeader">
// $import
import { ref, onMounted, defineProps } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { default as _ } from "lodash";
import { events } from "@/until/eventBus";
// $import

// $props
const props = withDefaults(
  defineProps<{
    pointsInfo: any;
    callback?: (data: any) => void;
  }>(),
  {
    pointsInfo: () => ({}),
    callback: () => {},
  }
);
// $props

// $data
const route = useRoute();
const router = useRouter();
const store = useStore();
const bus = events;
const common_data = ref(store.state.common_data);
const page_width = ref(769);
// $data

// $methods
const backRoute = () => {
  router.back();
};
// $methods

// $lifecycle
onMounted(async () => {
  page_width.value = document.querySelector('.integral-header-component')?.clientWidth || 769;
});
// $lifecycle
</script>

<template>
  <div
    class="integral-header-component"
    :style="`padding-top:${common_data.appHeight}px;`"
  >
    <div :style="`height:${common_data.appHeight}px; max-width: ${page_width}px`" class="temp-box"></div>
    <div
      id="integral-header"
      :style="`margin-top:${common_data.appHeight}px; max-width: ${page_width}px`"
    >
      <div class="tool-left">
        <span class="back" @click="backRoute"
          ><svg-icon iconName="back"></svg-icon
        ></span>
      </div>
      <div class="center-content">
        <div
          class="logo"
          :style="`background-image: url(${props.pointsInfo.logo});`"
        ></div>
        <h3 class="title">
          {{ props.pointsInfo.competition_name || "无数据" }}
        </h3>
        <h5 class="title-en">
          {{ props.pointsInfo.competition_name_en || "no data" }}
        </h5>
      </div>
    </div>
    <div
      class="reserve-box"
      :class="!['/live_attention'].includes(route.path) ? '' : 'attention-box'"
    ></div>
  </div>
</template>

<style lang="scss">
.integral-header-component {
  position: relative;
  background-color: #ebf4fe;
  overflow: hidden;
  max-width: 100%;

  #integral-header,.temp-box {
    z-index: 9998;
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 320px !important;
    overflow: hidden;
    color: #000;
    background-color: #eaf4fe;
  }

  #integral-header {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    .tool-left {
      display: flex;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);

      span {
        padding: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        line-height: 20px;

        svg {
          display: inline-block;
        }
      }
    }

    .center-content {
        position: relative;
        text-align: center;
        padding-left: 50px;
        .title {
          height: 26px;
          line-height: 26px;
          font-size: 18px;
          font-weight: 500;
        }
        .title-en {
          font-weight: 500;
        }

        .logo {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 44px;
          height: 44px;
          flex-grow: 0;
          flex-shrink: 0;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: 50%;
        }
      }
  }

  .reserve-box {
    width: 100%;
    min-height: 58px;
    background-color: #eaf4fe;
  }

  .attention-box {
    width: 100%;
    height: 160px;
  }
}
</style>
