<template>
        <div :class="[
                prefixCls,
                prefixCls + '-' + type,
                {
                    [`${prefixCls}-multi-line`]: isMultiLine
                }
            ]" ref="messageItem">
            <span :class="`${prefixCls}-icon`">
                <svg v-if="type==='error'">
                  <path  fill="#FA785A" d="M7,14c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S10.9,14,7,14z M7,6.6L4.7,4.3C4.5,4.1,4.2,4.1,4,4.3
	C3.8,4.5,3.8,4.8,4,5l2.3,2.3L4,9.6C3.8,9.7,3.8,10,4,10.2c0.2,0.2,0.5,0.2,0.7,0L7,7.9l2.4,2.3c0.2,0.2,0.5,0.2,0.7,0
	s0.2-0.5,0-0.7L7.7,7.3L10,5c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0L7,6.6z"/>
                </svg>
                <svg v-if="type==='success'">
                    <path fill="#17B57F" d="M7,14c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S10.9,14,7,14z M6.5,8.8L4.4,6.7
	c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l2.5,2.4c0.2,0.2,0.5,0.2,0.7,0L11,5.4c0.2-0.2,0.2-0.5,0-0.7
	c-0.2-0.2-0.5-0.2-0.7,0L6.5,8.8z"/>
                </svg>
                <svg v-if="type==='warning'">
                    <path fill="#FA785A" d="M7,14c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S10.9,14,7,14z M6.5,4v3c0,0.3,0.2,0.5,0.5,0.5
                    S7.5,7.3,7.5,7V4c0-0.3-0.2-0.5-0.5-0.5S6.5,3.7,6.5,4z M7,10.5c0.4,0,0.8-0.3,0.8-0.8S7.4,9,7,9S6.2,9.3,6.2,9.8S6.6,10.5,7,10.5z"
                    />
                </svg>
            </span>
            <div :class="`${prefixCls}-text`"> 
                {{content}}
            </div>
            <div 
                v-if="closeable"
                :class="`${prefixCls}-close`"
                @click="handleClose"> 
                <Icon type="close"/>
            </div>
        </div>
</template>
<script>
    import Icon from '../icon/'

    const prefixCls = 'yy-message-item'
    export default {
        name: 'YYMessageItem',
        components: {
            Icon
        },
        props: {
            type: {
                type: String
            },
            name: {
                type: String,
                required: true
            },
            content: {
                type: String
            },
            duration: {
                type: Number,
                default: 1.5
            },
            closeable: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                closeTimer: null,
                isMultiLine: false
            }
        },
        methods: {
            clearCloseTimer () {
                if (this.closeTimer) {
                    clearTimeout(this.closeTimer)
                    this.closeTimer = null
                }
            },
            handleClose () {
                this.clearCloseTimer()
                this.$emit('on-close', this.name)
            },
            setIsMultiLine() {
                if(this.$refs.messageItem.offsetHeight > 40) {
                    this.isMultiLine = true
                }
            }
        },
        mounted() {
            this.setIsMultiLine()
            this.clearCloseTimer()
            if (this.duration !== 0) {
                this.closeTimer = setTimeout(() => {
                    this.handleClose()
                }, this.duration * 1000)
            }
        },
        beforeDestroy () {
            this.clearCloseTimer()
        }
    }
</script>

