<template>
    <div v-show="show" class="ctn-full">
        <div :id="ctnId" class="ctn-full">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import printJS from 'print-js'
import {deepClone} from "ap-util/util/ObjectUtil";

export default {
    name: "ApPrint",
    props: {
        options: {
            type: Object,
            required: false
        },
        show: {
            type: Boolean,
            default: false,
            required: false
        },
    },
    created() {
        this.handleDefaultOptions();
    },
    data() {
        let id = "Table" + parseInt(Math.random() * 10000000); // 随机ID
        return {
            ctnId: id,
            opts: {},
        }
    },
    methods: {
        // 参数设定：默认参数
        handleDefaultOptions() {
            let options = {};
            if (this.options != null) {
                options = deepClone(this.options);
            }
            // 默认参数
            let defaultOpts = {
                printable: this.ctnId, // 标签元素id
                type: 'html',
                header: '',
                documentTitle: '',
                targetStyles: ['*'],
                scanStyles: false,
                style: ``,
                maxWidth: '100%'
            };

            // 默认参数覆盖
            for (let optKey in defaultOpts) {
                let customOpt = options[optKey];
                // 其他参数：直接替换默认
                if (customOpt == null) {
                    options[optKey] = defaultOpts[optKey];
                }
            }
            this.opts = options;
        },
        print() {
            this.$nextTick(() => {
                printJS(this.opts);
            })
        }
    }
}
</script>

<style scoped>
.ctn-full {
    height: 100%;
    width: 100%;
}
</style>