<template>
    <div class="content">
        <div id="textArea"> </div>
        <Modal v-model="markStatus" fullscreen :title="$t('studentWeb.exam.answer')" footer-hide  ref="compose">
                <BaseMyCanvas v-if="markStatus" :bgImg="markBg" @onCloseModal="closeModal" :isStudent="markStatus" @onSaveCanvas="saveMark"></BaseMyCanvas>
        </Modal>
        <iframe class="frame" id="answerIframe" :srcdoc="itemInfo.question"></iframe>
    </div>
</template>
<script>
    import html2canvas from 'html2canvas';
    import E from 'wangeditor'
    export default {
        components: {

        },
        props: {
            index: {
                type: Number,
                default: -1
            },
            textData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            itemInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            },     
            close: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                tabName: 'exercise',
                editorContent: "",
                examInfo: [],
                editor: null,
                markStatus: false,
                markBg:""
            }
        },
        methods: {
            async getInfo() {
                this.examInfo = []
                this.initEditor()
                if (this.textData.length > 0) {
                    this.examInfo = [...this.textData]
                    this.editor.txt.html(this.examInfo[0])
                }
            },
            closeModal() {
                this.markStatus = false
                this.markBg = ""
            },
            saveMark(data) {
                if (data) {
                    data.height = 400
                    data.width = 400
                    let img = document.createElement('img')
                    img.src = data.base64
                    console.log(img)
                    this.editor.txt.html(img.outerHTML)
                    this.markStatus = false
                }
            },
            initEditor() {
                this.editorContent = ""
                this.editor = new E("#textArea");
                this.editor.config.onchange = (html) => {
                    this.editorContent = html;
                };
                this.editor.config.showFullScreen = false
                this.editor.config.menus = [
                    "link", // 插入链接
                    "justify", // 对齐方式
                    "image", // 插入图片
                ]
                this.editor.config.zIndex = 1
                this.editor.config.placeholder = this.$t('studentWeb.exam.inputAnswers')
                this.editor.config.height = 300
                this.editor.config.showLinkImg = false;
                this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种，我只是图个方便
                if (this.itemInfo.type == 'correct' || this.itemInfo.type == 'connector') {
                    this.editor.config.menus.push('connector')
                    this.$editorTools.addStuBgBtn(this, this.editor)
                } else {
                    this.$editorTools.addCanvas(this, this.editor)
                }
                this.editor.create();
                if (this.close) {
                    this.editor.disable()
                }
                this.editor.txt.clear()
                if (this.examInfo.length > 0) {
                    this.editor.txt.html(this.examInfo[0])
                } 
            },
            markStuAnswer() {
                let answerIframe = ''
                answerIframe = document.getElementById('answerIframe')
                answerIframe.contentWindow.document.body.style.width = 'fit-content'
                answerIframe.contentWindow.document.body.style.minWidth = '600px'
                answerIframe.contentWindow.document.body.style.backgroundColor = '#f5f5f5'
                console.log(document.getElementById('answerIframe').contentWindow.document)
                let iframe = document.getElementById('answerIframe').contentWindow.document.getElementsByTagName('p')
                if (iframe.length > 0) {
                    for (let i = 0; i < iframe.length -1; i++) {
                        iframe[i].style.lineHeight = '50px'
                        iframe[i].style.paddingBottom = '30px'
                    }
                    iframe[iframe.length -1].style.paddingBottom = '100px'
                    iframe[iframe.length - 1].style.lineHeight = '50px'
                }
                html2canvas(answerIframe.contentWindow.document.body).then(canvas => {
                    this.markStatus = true
                    this.markBg = canvas.toDataURL("image/png");
                })
            },
        },
        mounted() {
            this.initEditor()
            this.getInfo()
            // 监听富文本画板功能
            this.$EventBus.$off('onStuCanvas')
            this.$EventBus.$on('onStuCanvas', editor => {
                this.markBg = ""
                this.markStuAnswer()
            })
        },
        watch: {
            index() {
                this.getInfo()
                deep: true
                immediate:true
            },
            editorContent() {
                this.$emit("dataGet", this.editorContent, this.index)
            }
        }
	}
</script>
<style scoped>
	.content{
		width:100%;
		height:100%;
	}
    .textArea {
        width: 100%;
        height: 100%;
    }
    .frame {
        /*height: 100px;*/
        border: none;
        position:fixed;
        height:0.1px;
        width: 50%;
        /*margin-left:10px;*/
        /*line-height: 50px;*/
    }
    .canvas-tools {
        bottom: -50px;
    }
</style>
