<script setup>
import {ref} from 'vue'
import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'

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-item-page',lang=='en'?'ppt-item-box_en':'']">
		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
		<!-- 自定义标题 -->
		<div class="custom-title-wrap" 
			:style="pageData.titleDetail?{
				 left:pageData.titleDetail.left+'%',
						top:pageData.titleDetail.top+'%',
						width:pageData.titleDetail.width+'%',
						height:pageData.titleDetail.height+'%',
				}:{
						left:'10%',top:'6.6%',width:'68%',height:'5%',
				}"
		>
			<div class="title" v-html="pageData.title"
				:style="pageData.titleDetail?{
						color:pageData.titleDetail.color||'#333',
						fontSize:(pageData.titleDetail.fontSize||22)+'px',
						fontFamily:pageData.titleDetail.fontFamily||'helvetica'
				}:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
			></div>
		</div>
		<div class="ppt-content-box">
			<div class="container">
				<div class="top-box">
					<component 
						:is="getPPTContentType(1,pageData.elements)"
						:itemData="getPPTContentItemData(1,pageData)"
					/>
				</div>
				<div class="bot-box">
					<component 
						:is="getPPTContentType(2,pageData.elements)"
						:itemData="getPPTContentItemData(2,pageData)"
					/>
				</div>
			</div>
			<div class="layer-wrap">
				<template v-for="item in pageData.layers" :key="item.id">
					<component 
						:is="getPPTLayerType(item)"
						:itemData="item"
					/>
				</template>
			</div>
		</div>
	</div>
</template>



<style scoped lang="scss">
// @import '../style/common.scss';
.ppt-content-box{
	.top-box{
		width: 100%;
		height: 50%;
	}
	.bot-box{
		width: 100%;
		height: 50%;
	}
}
</style>