<template>
<el-link
            :underline="false"
             @mouseover.native="showIcon=true"
             @mouseleave.native="showIcon=false"
             @click="edit"
    >
        <div class="link-flex">
            <div class="overflow-div" v-if="model.label">
                <el-tooltip  placement="bottom" effect="light">
                    <div slot="content" style="maxWidth: 220px;lineHeight: 1.5;">{{model.label}}</div>
                    <div class="special-show">
                        <span class="overflow-span">
                            {{model.label}}
                        </span>
	                    <i class="el-icon-edit el-icon--right" v-if="showIcon && !property.disabled"></i>
                    </div>
                </el-tooltip>
            </div>
            <div v-else class="empty-div">
                <i class="el-icon-edit el-icon--right" v-if="showIcon && !property.disabled"></i>
            </div>
        </div>

    </el-link>
</template>

<script>
    export default {
        name: "baseView",
        data(){
            return {
                showIcon:false
            }
        },
        props:{
            model:{
                type:Object,
                default:()=>{}
            },
            property:{
                type:Object,
                default:()=>{}
            }
        },
        created() {
        },
        mounted() {

        },
        methods:{
			edit() {
				if (this.property.disabled) {
					return
				}
				this.$emit('edit');
				this.showIcon=false;
			}

        }
    }
</script>

<style scoped  lang="less">
    /deep/ .el-link--inner {
        width: 100%;
	    height: 100%;
    }
    .link-flex {
        width: 100%;
	    height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .overflow-div {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .empty-div {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
    }
</style>
