<template>
<el-link     :underline="false"
             @mouseover.native="showIcon=true"
             @mouseleave.native="showIcon=false"
             @click="edit"
    >
        <div class="link-flex">
            <div class="child-div" v-if="model.length > 0">
                <el-tooltip placement="bottom" effect="light" v-if="property.type == 'area'">
                    <div slot="content" style="maxWidth: 220px;lineHeight: 1.5;"><span v-for="(code,index) in model" @key="index">{{code|veArea}} <span v-if="index < model.length - 1">,</span></span></div>
                    <div class="overflow-div">
                        <span v-for="(code,index) in model" @key="index">{{code|veArea}} <span v-if="index < model.length - 1">,</span></span>
                    </div>
                </el-tooltip>
                <el-tooltip placement="bottom" effect="light"  v-else-if="property.type == 'project'">
                    <div slot="content" style="maxWidth: 220px;lineHeight: 1.5;"><span v-for="(code,index) in model" @key="index">{{code|veProject}} <span v-if="index < model.length - 1">,</span></span></div>
                    <div class="overflow-div">
                        <span v-for="(code,index) in model" @key="index">{{code|veProject}} <span v-if="index < model.length - 1">,</span></span>
                    </div>
                </el-tooltip>
                <el-tooltip placement="bottom" effect="light" v-else>
                    <div slot="content" style="maxWidth: 220px;lineHeight: 1.5;"><span v-for="(code,index) in model" @key="index">{{code}} <span v-if="index < model.length - 1">,</span></span></div>
                    <div class="overflow-div">
                        <span v-for="(code,index) in model" @key="index">{{code}} <span v-if="index < model.length - 1">,</span></span>
                    </div>
                </el-tooltip>
            </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:Array,
                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%;
    }
    .link-flex {
        display: flex;
        align-items: center;
        justify-content: center;
        .child-div {
            width: 100%;
            .overflow-div {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        }
    }
</style>
