<template>
<el-link style="width: 100%"
            :underline="false"
             @mouseover.native="showIcon=true"
             @mouseleave.native="showIcon=false"
             @click="edit"
    >
        <div class="link-flex">
            <div class="overflow-div" v-if="model">
                <span v-if="property.type == 'area'">{{model | veArea}}</span>
                <span v-else-if="property.type == 'project'">{{model | veProject}}</span>
                <span v-else="property.type == 'area'">{{model}}</span>
            </div>
            <div v-else></div>
        <i class="el-icon-edit el-icon--right" v-if="showIcon && !property.disabled"></i>
        </div>

    </el-link>
</template>

<script>
    export default {
        name: "baseView",
        data(){
            return {
                showIcon:false
            }
        },
        props:{
            model:{
                type:String,
                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">
    .link-flex {
        width: 159px;
        display: flex;
        align-items: center;
        justify-content: center;
        .child-div {
            width: 80%;
            .overflow-div {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        }
    }
</style>
