<template>

	<div class="base-action" >
		<transition name="el-zoom-in-center" v-if="false">
			<el-button-group class="base-btn-group" v-if="action">
				<el-button type="primary" class="actionButton" size="mini"  @click="$emit('ok')"
				           title="确认"
				           :style="okStyle"
				           @mouseover.native="hoverOk"
				><i class="el-icon-check"></i></el-button>
				<el-button type="info" class="actionButton" size="mini" @click="$emit('reset')"
				           title="取消"
				           :style="resetStyle"
				           @mouseover.native="hoverReset"
				           @mouseleave.native="hoverOk"><i class="el-icon-close"></i></el-button>
			</el-button-group>
		</transition>
		<div v-if="!action" class="base-action-div">
			<slot name="view" ></slot>
		</div>
		<div v-if="action"  class="base-action-div"><!--width: calc(100% - 0px); -->
			<slot name="edit" ></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: "baseAction",
		data(){
			return {
				style:{
					hover:{
						padding: '3px 8px'
					},
					over:{
						padding: '3px 2px'
					}
				},
				okStyle:{},
				resetStyle:{},
			}
		},
		props:{
			action:{
				type:Boolean,
				default:false
			}
		},
		created() {
			this.hoverOk()
		},
		mounted() {

		},
		methods:{
			hoverOk(){
				this.okStyle=this.style.hover;
				this.resetStyle=this.style.over;
			},
			hoverReset(){
				this.okStyle=this.style.over;
				this.resetStyle=this.style.hover;
			}
		}
	}
</script>

<style scoped  lang="less">
	.base-action {
		width:100%;
		display: flex;
		align-items:center;
		justify-content:center;
		position: relative;
		height: 100%;
		min-height: 24px;
	}
	.base-action-div {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	/deep/ .base-action-div > div {
		width: 100%;
		.el-select {
			width: 100%;
		}
	}
	.base-btn-group {
		position: absolute;
		top: -20px;
		right:0;
		z-index:500;
	}
	.actionButton{
		padding: 4px 8px;
	}
</style>
