<template>
	<el-card class="box-card " :class="className" style="margin-right: 8px;">
		<div slot="header" class="clearfix">
			<span><i class="el-icon-caret-right" style="color: #F1993F;"></i>{{title}}</span>
			 <el-button style="float: right; background:rgba(0,201,83,1);" class="filter-item" @click="btnClick" size="mini" type="success"  v-if="buttonName">{{buttonName}}</el-button>
		</div>
		<slot></slot>
	</el-card>
</template>

<script>
	export default{
		props:['title','buttonName','className'],
		computed:{
			getClass(){
				if(this.buttonName){
					return "customBoxCart";
				}
				return ""
			}
		},
		methods:{
			btnClick(){
				this.$emit("btnClick")
			}
		}
	}
</script>

<style lang="scss">
	.customBoxCart{
		.el-card__header{
			padding:13px 20px;
		}
	}
</style>
