<template>
    <div>
        <h1 @click="markStuAnswer">按钮</h1>
        <div style="text-align:center;" id="test-hahah">
            <h1 style="text-align:center;margin-top:100px;font-size:22px;">学生扫码加入名单需要学生端APP对接，学生端APP扫码可以直接读取学生账号信息加入到班级。</h1>
            <!-- <p>{{tId}}</p> -->
            <p data-html2canvas-ignore>教师姓名：{{tName}}</p>
            <p>教室编码：{{cId}}</p>
            <p>教室名称：{{cName}}</p>

        </div>
        <Modal v-model="markStatus" fullscreen title="批注">
            <BaseMyCanvas v-if="markStatus" :bgImg="markBg"></BaseMyCanvas>
        </Modal>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    data() {
        return {
            tId: '',
            tName: '',
            cId: '',
            cName: '',
            markBg:'',
            markStatus:false
        }
    },
    methods: {
        // 批注学生作答数据
        markStuAnswer() {
            let answer = document.getElementById('test-hahah')
            console.log(answer)
            html2canvas(answer).then((canvas) => {
                // canvas.style.width = "100%"
                // canvas.style.height = "auto"
                console.log('111111111')
                this.markBg = canvas.toDataURL()
                console.log(this.markBg)
                this.markStatus = true
            });
        },
    },
    created() {
        this.tId = this.$route.query.tId
        this.tName = this.$route.query.tName
        this.cId = this.$route.query.cId
        this.cName = this.$route.query.cName
    }
}
</script>
<style scoped>
div p {
    margin: 10px;
}
</style>