<template>
    <div class="main-box" ref="mainBoxRef">
        <img class="main-bg" src="@/public/other/gongzidan/gongzidan.png" alt="">
        <span class="item-info" style="left: 156px;bottom: 210px;">{{ formData.job }}</span>
        <span class="item-info" style="left: 202px;bottom: 210px;">{{ formData.name }}</span>
        <span class="item-info" style="left: 248px;bottom: 210px;">{{ formData.basicSalary }}</span>
        <span class="item-info" style="left: 288px;bottom: 210px;">{{ formData.performanceSalary }}</span>
        <span class="item-info" style="left: 326px;bottom: 210px;">{{ formData.fullAttendanceBonus }}</span>
        <span class="item-info" style="left: 366px;bottom: 210px;">{{ formData.otherBonus }}</span>
        <span class="item-info" style="left: 408px;bottom: 210px;">{{ formData.totalSalary }}</span>
        <span class="item-info" style="left: 452px;bottom: 210px;">{{ formData.socialInsurance }}</span>
        <span class="item-info" style="left: 492px;bottom: 210px;">{{ formData.taxDeduction }}</span>
        <span class="item-info" style="left: 530px;bottom: 210px;">{{ formData.attendanceDeduction }}</span>
        <span class="item-info" style="left: 568px;bottom: 210px;">{{ formData.otherDeduction }}</span>
        <span class="item-info" style="left: 607px;bottom: 210px;">{{ formData.totalDeduction }}</span>
        <span class="item-info" style="left: 646px;bottom: 210px;">{{ formData.netSalary }}</span>
        <span class="item-info time" style="left: 434px; bottom: 298px;">{{ formData.year }}</span>
        <span class="item-info time" style="left: 488px; bottom: 298px;">{{ formData.month }}</span>
        <div v-if="!isVip" class="watermark-overlay"></div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { useWatermarkGuard } from '@/hooks/useWatermarkGuard'

const props = defineProps({
    formData: {
        type: Object,
        required: true
    }
})

const userStore = useUserStore()
const { isVip } = storeToRefs(userStore)
const mainBoxRef = ref(null)
useWatermarkGuard(mainBoxRef, isVip)

defineExpose({
    mainBoxRef
})
</script>

<style scoped lang="scss">
.main-box {
    position: relative;
    margin: 0 54px;

    .main-bg {
        width: 800px;
        height: 600px;
        object-fit: contain;
    }

    .watermark-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 800px;
        height: 600px;
        background-image: url('@/public/common/watermaker.png');
        background-size: 125px 125px;
        background-repeat: repeat;
        pointer-events: none;
        z-index: 1;
    }

    .item-info {
        position: absolute;
        font-size: 11px;
        color: #454649;
        opacity: 0.9;
        transform: translateX(-50%);
        text-shadow: 0 0 1px #454649EE;

        &.time {
            font-size: 16px;
            font-weight: 500;
            color: #46474C;
        }
    }
}
</style>
