<template>
    <div :style="lineStyle" class="tag-layout-area" v-if="lineStyle" v-resize="resize">
        <div class="content-area">
            <div v-for="(item,index) in data" :key="data.id||index" class="tagItem" :style="tagStyle">
                <slot name="tag" :item="item"></slot>
            </div>
            <div style="clear: both;"></div>
        </div>
        <el-link v-if="isAbove" class="right-area tagItem" @click="toggle">
            <slot name="open" v-if="!isOpen"></slot>
            <slot name="hide" v-else></slot>
        </el-link>
    </div>
</template>

<script>
import TimerUtil from "../../../util/global/timer";
import resize from "../../../service/directives/resize";

export default {
    name: "veTagLayout",
    directives:{
        resize
    },
    data() {
        return {
            isOpen: false,
            isAbove: false,
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        defaultRow: {
            type: Number, String,
            default: 1
        },
        itemHeight: {
            type: Number, String,
            default: 20
        },
        rightWidth: {
            type: Number, String,
            default: 50
        },
    },
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                this.refire();
            }
        }
    },
    computed: {
        defaultHeight() {
            return this.itemHeight * this.defaultRow
        },
        lineStyle() {
            let style = {
                'line-height': this.defaultHeight + "px",
                'height': this.defaultHeight + "px",
                "overflow": "hidden",
                "padding-right": this.rightWidth + "px",
            };
            if (!this.isAbove) {//不超出逻辑
                delete style["padding-right"];
                delete style["height"];
            }
            if (this.isAbove && this.isOpen) {//展开逻辑
                delete style["height"];
            }
            if (this.isAbove && !this.isOpen) {//隐藏逻辑
            }
            return style;
        },
        tagStyle() {
            let lineHeight = this.lineStyle["line-height"];
            if (lineHeight) {
                return {
                    "line-height": lineHeight
                }
            } else {
                return {};
            }
        }
    },
    mounted() {
        this.singleTimer = TimerUtil.createSingleTimer(() => {
            this.refire();
        }, 100);
    },
    destroy() {
        this.singleTimer.clear();
    },
    methods: {
        refire() {
            if (!this.$el) return;
            let areaHeight = this.$el.getElementsByClassName("content-area")[0].offsetHeight;
            this.isAbove = areaHeight > this.defaultHeight;
        },
        resize() {
            this.singleTimer.reset();
        },
        toggle() {
            if (this.isOpen) {
                this.hide();
            } else {
                this.open();
            }
        },
        open() {
            this.isOpen = true;
        },
        hide() {
            this.isOpen = false;
        }
    }
}
</script>

<style type="less" scoped>
.tag-layout-area {
    position: relative;

    .tagItem {
        float: left;
    }

    .right-area {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
</style>
