<template>
    <transition name="hanzo-fade">
        <div v-show="value" :class="[classes([style, position]), className]">
            <div v-if="style === 'text'">{{message}}</div>
            <div v-else-if="style === 'html'" v-html="message"></div>
            <h-loading v-else-if="style !== 'text' && style !== 'html' && type === 'loading'" color="white" :type="loadingType"/>
            <h-icon v-else-if="style !== 'text' && style !== 'html' && type !== 'loading'" :class="classes('icon')" :type="type"/>
            <div  v-if="style !== 'text' && style !== 'html' && value !== undefined && value !== null">{{message}}</div>
        </div>
    </transition>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import { PopupMixin } from '../../common/mixins/popup';
import hIcon from '../icon/';
import hLoading from '../loading/';
let classMixin = classesMixin('toast');
export default {
    name: "h-toast",
    mixins: [ classMixin, PopupMixin ],
    components: {
        hIcon, hLoading
    },
    props: {
        className: null,
        loadingType: String,
        forbidClick: Boolean,
        message: [String, Number],
        type: {
            type: String,
            default: 'text'
        },
        position: {
            type: String,
            default: 'middle'
        },
        lockScroll: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        clickable: false
        };
    },
    mounted() {
        this.toggleClickale();
    },
    destroyed() {
        this.toggleClickale();
    },
    watch: {
        value() {
            this.toggleClickale();
        },
        forbidClick() {
            this.toggleClickale();
        }
    },
    computed: {
        style() {
            const STYLE = ['success', 'error', 'loading'];
            const style = STYLE.indexOf(this.type) !== -1 ? 'default' : this.type;
            return style;
        }
    },
    methods: {
        toggleClickale() {
            const clickable = this.value && this.forbidClick;
            if (this.clickable !== clickable) {
                this.clickable = clickable;
                const action = clickable ? 'add' : 'remove';
                document.body.classList[action]('hanzo-toast--unclickable');
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
