<template>
    <div class="mark-tools-container">
        <div class="mark-tools-wrap">
            <Icon custom="iconfont icon-move" class="tool-icon" :title="$t('learnActivity.mark.move')" @click="mouseStatus = 'move'" />
            <Icon custom="iconfont icon-text" class="tool-icon" :title="$t('learnActivity.mark.text')" @click="mouseStatus = 'text'" />
            <Icon custom="iconfont icon-mark" class="tool-icon" :title="$t('learnActivity.mark.brush')" @click="mouseStatus = 'line'" />
            <Icon custom="iconfont icon-arrow-mark" class="tool-icon" :title="$t('learnActivity.mark.arrow')" @click="mouseStatus = 'arrow'" />
            <Icon custom="iconfont icon-oval" class="tool-icon" :title="$t('learnActivity.mark.oval')" @click="mouseStatus = 'oval'" />
            <Icon custom="iconfont icon-rect" class="tool-icon" :title="$t('learnActivity.mark.rect')" @click="mouseStatus = 'rect'" />
            <Poptip transfer placement="right">
                <Icon custom="iconfont icon-smile" class="tool-icon" :title="$t('learnActivity.mark.seal')" />
                <div slot="content" class="expression-box">
                    <img v-for="(item,index) in imgs" :key="index" :src="item" alt="" class="expression-img" @click="drawImg(index)">
                </div>
            </Poptip>
            <Icon custom="iconfont icon-fresh" class="tool-icon" :title="$t('learnActivity.mark.clear')" @click="clear" />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            mouseStatus: 'move',
            imgs: [],
        }
    },
    methods: {
        clear() {
            this.$emit('onClear')
        },
        drawImg(imgIndex) {
            let curImg = new Image()
            curImg.src = this.imgs[imgIndex]
            curImg.onload = () => {
                // this.mouseStatus = ''
                this.mouseStatus = 'img'
                this.drawImgData = curImg
                this.$emit('onDrawImg', curImg)
            }
        }
    },
    created() {
        for (let i = 0; i < 9; i++) {
            this.imgs.push(require('@/assets/mark/' + i + '.svg'))
        }
    },
    watch: {
        mouseStatus: {
            handler(n, o) {
                this.$emit('onStatusChange', n)
            }
        }
    }

}
</script>
<style scoped lang="less">
.mark-tools-container {
    position: relative;
    box-shadow: 2px 0px 5px 0px rgba(100, 100, 100, 0.2);
    z-index: 9;
    width: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    .tool-icon {
        font-size: 20px;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        width: 39px;
        &:hover {
            color: #1cc0f3;
            box-shadow: 0 5px 10px -8px #1cc0f3;
            background: white;
            border-color: transparent;
        }
    }
}
.expression-box {
    max-width: 300px;
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
}
.expression-img {
    width: 80px;
    margin: 10px;
    height: auto;
}
</style>
<style lang="less">
.mark-tools-wrap .ivu-poptip-title::after {
    display: none;
}
</style>