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

<script>
	export default {
		name: "baseView",
		data(){
			return {
				showIcon:false
			}
		},
		props:{
			model:{
				type:[String, Number, Object, Array],
				default:""
			},
			property:{
				type:Object,
				default:{
					wrap: false,
				}
			},
		},
		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%;
	}
	.special-show {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.overflow-span {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	}
</style>
