<script setup>
import { ref } from "vue";
import { getPPTConfig } from '../hooks/createPPTContent'

console.log(getPPTConfig())

const props = defineProps({
  pageData: {
    type: Object,
    default: {},
  },
});

const lang = ref(window.location.pathname.startsWith("/ppten") ? "en" : "zh");
</script>

<template>
  <div class="ppt-item-box ppt-cover-page" id="ppt-cover-page" :style="`color: ${getPPTConfig().pptCoverTextColor||'#fff'}`">
    <!-- <img :src="pageData.imgLocalUrl.image_url" class="pptbg" style="width: 100%" /> -->
    <img :src="pageData.BackgroundImg" class="pptbg" style="width: 100%" />
    <div style="width: 62%; font-size: 16px; text-align: center; line-height: 1.6; position: absolute; right: 20px; top: 50%; zindex: 20">
      <p style="height: 5px; marginbottom: 21px"></p>
      <p style="font-size: 28px">{{ pageData.Title }}</p>
      <p style="display: flex; align-items: center; justify-content: center; margin: 10px 0">
        <span :style="`display: inline-block; width: 15px; margin-right: 5px; border-top: 1px solid ${getPPTConfig().pptCoverTextColor||'#fff'}`"></span>
        <span>{{getPPTConfig().pptCoverCompenyName||'ETA'}}</span>
        <span :style="`display: inline-block; width: 14px; height: 14px; background: ${getPPTConfig().pptCoverTextColor||'#fff'}; border-radius: 100%; margin: 0 5px`"></span>
        <span>{{ pageData.ReportType }}</span>
        <span :style="`display: inline-block; width: 15px; margin-left: 5px; border-top: 1px solid ${getPPTConfig().pptCoverTextColor||'#fff'};`"></span>
      </p>
      <p>{{getPPTConfig().pptCoverDepartName||'投研部'}}</p>
      <p>{{ pageData.PptDate }}</p>
      <p style="width: 80%; height: 1px; margin: 21px auto 0"></p>
    </div>
    <!-- <div v-if="lang == 'en'" style="width: 62%; font-size: 16px; text-align: center; line-height: 1.6; color: #fff; position: absolute; right: 20px; top: 50%; zindex: 20">
      <p style="height: 5px; border-top: 1px solid #fff; marginbottom: 21px"></p>
      <p style="font-size: 28px">{{ pageData.Title }}</p>
      <p style="display: flex; align-items: center; justify-content: center; margin: 10px 0">
        <span>HORIZON INSIGHTS PTE. LTD.</span>
      </p>
      <p style="display: flex; align-items: center; justify-content: center">
        <span style="display: inline-block; width: 15px; margin-left: 5px; border-top: 1px solid #fff"></span>
        <span>{{ pageData.ReportType }}</span>
        <span style="display: inline-block; width: 15px; margin-left: 5px; border-top: 1px solid #fff"></span>
      </p>
      <p>FICC Research Department</p>
      <p>{{ pageData.PptDate }}</p>
      <p style="width: 80%; height: 1px; border-bottom: 1px solid #fff; margin: 21px auto 0"></p>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
// @import "../style/common.scss";
.ppt-cover-page {
  position: relative;
  overflow: hidden;
  background: none;
}
</style>
