<template>
    <!-- 封面 -->
    <div :class="['area_page', `${bookBg}`]">
        <div class="report_cover" v-if="!isCover">
            <div class="cover_header">
                <p class="cover_header_title1">
                    {{ reportTitle }}
                </p>
                <p class="cover_header_title1">{{ title }}</p>
                <p class="cover_header_title2 mt15">（{{ subtitle }}）</p>
            </div>
            <div class="full_screen_button" v-if="showButton">
                <el-button round :disabled="requestLoading" v-if="requestLoading">点击全屏查看</el-button>
                <el-button round :loading="openLoading" v-else @click="showFullScreen">点击全屏查看</el-button>
            </div>
            <div class="cover_footer">
                <p class="cover_footer_desc">报告时间：{{ reportTime }}</p>
                <p class="cover_footer_desc mt5">报告单位：{{ userInfo.schoolName }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        // 背景
        bookBg: {
            type: String,
            default: () => ''
        },
        //标题
        title: {
            type: String,
            default: () => ''
        },
        //副标题
        subtitle: {
            type: String,
            default: () => ''
        },
        // 是否显示按钮
        showButton: {
            type: Boolean,
            default: () => false
        },
        isCover:{//是否是最后一页封面
            type: Boolean,
            default: () => false
        },
        requestLoading:{
            type:Boolean,
            default: false
        },//接口请求的loading
        openLoading:{
            type:Boolean,
            default: false
        },//开发全屏预览
    },
    data() {
        return {
            reportTime: this.$global.getNowDate('yyyy年mm月dd日 hh:mm:ss'),
            titleSize:32,
            subtitleSize:24,
            btnWidth:210,
            btnHeight:60,
            btnSize:21,
            footerSize:13
        };
    },
    computed: {
        ...mapGetters(["userInfo"]),
        reportTitle() {
            return this?.$store?.state?.report?.examSelectItem?.examName ?? '';
        }
    },
    mounted() {
        // 初始化时执行一次
        // this.setFontSizeByWindowWidth();
        // 监听窗口大小变化，实时更新
        // window.addEventListener('resize', this.setFontSizeByWindowWidth);
    },
    beforeDestroy() {
        // window.removeEventListener('resize', this.setFontSizeByWindowWidth);
    },
    methods: {
        // 计算并设置字体大小的函数
        // setFontSizeByWindowWidth() {
        //     const windowWidth = window.innerWidth;
        //     const windowHeigh = window.innerHeight;
        //     const scale1 = (30 / 1920).toFixed(2);
        //     let size1 = Math.round(windowWidth * scale1);

        //     const scale2 = (24 / 1920).toFixed(2);
        //     let size2 = Math.round(windowWidth * scale2);

        //     const scale3 = (21 / 1920).toFixed(2);
        //     let size3 = Math.round(windowWidth * scale3);

        //     const btnWidthScale = (210 / 1920).toFixed(2);
        //     let btnWidth = Math.round(windowWidth * btnWidthScale);
        //     const btnHeightScale = (60 / 950).toFixed(2);
        //     let btnHeight = Math.round(windowHeigh * btnHeightScale);

        //     const scale4 = (13 / 1920).toFixed(2);
        //     let size4 = Math.round(windowWidth * scale4);
        //     // 限制字体大小范围（最小12px，最大30px）
        //     this.titleSize = Math.max(12, Math.min(30, size1));
        //     this.subtitleSize = Math.max(12, Math.min(24, size2));
        //     this.btnSize = Math.max(12, Math.min(21, size3));
        //     this.btnWidth = btnWidth;
        //     this.btnHeight = btnHeight;
        //     this.footerSize = Math.max(12, Math.min(13, size4));
        // },
        //点击进入全屏
        showFullScreen() {
            this.$emit('openFullScreen');
        }
    }
};
</script>

<style scoped lang="scss"></style>