<template>
    <div class="mark-container">
        <MarkTools @onStatusChange="getMouseStatus" @onDrawImg="getDarmImg" @onClear="clear"></MarkTools>
        <MarkCanvas ref="markCanvas" :bgImg="bgImg" :status="mouseStatus" :drawImgData="darwImg" @getImg="getMarkData"></MarkCanvas>
		<!-- <BaseCanvas :bgImg="bgImg" @getImg="getMarkData"></BaseCanvas> -->
    </div>
</template>
<script>
import MarkTools from './MarkTools.vue'
import MarkCanvas from './MarkCanvas.vue'
export default {
    props: {
        //canvas主图（eg：学生作答数据）
        bgImg: {
            type: [String, Object],
            default: ''
        },
        defaultStatus: {
            type: String,
            default: ''
        }
    },
    components: {
        MarkTools, MarkCanvas
    },
    data() {
        return {
            mouseStatus: '',
            darwImg: ''
        }
    },
    created() {
    },
    methods: {
        getMouseStatus(data) {
            this.mouseStatus = data
        },
        getMarkData(data) {
			console.log(data);
            this.$emit('onMarkChange', data)
        },
        getDarmImg(data) {
            this.darwImg = data
        },
        //清除批注
        clear() {
            this.$refs['markCanvas'].clear()
        }
    },
    watch: {
        defaultStatus: {
            handler() {
                this.mouseStatus = this.defaultStatus || 'move'

            },
            immediate: true
        }
    }
}
</script>
<style lang="less" scoped>
.mark-container {
    width: 100%;
    height: 100%;
    display: flex;
}
</style>