<template>
<view class="card" :style="{borderRadius: radius ? '10rpx' : '0'}">
	<view class="title" :style="{border: titleBorder ? '1px solid #efefef' : '0'}" @click="headClick">
		<slot name="header">
			<text class="t">{{ title }}</text>
			<text class="icon cuIcon-right" v-if="arrow"></text>
		</slot>
	</view>
	<view class="body">
		<slot></slot>
	</view>
	<view class="footer">
		<slot name="footer"></slot>
	</view>
</view>
</template>

<script>
export default {
	emits: ['headClick'],
	props: {
		title: {
			type: String,
			default: ''
		},
		titleBorder: {
			type: Boolean,
			default: true
		},
		radius: {
			type: Boolean,
			default: false
		},
		arrow: {
			type: Boolean,
			default: false
		},
	},
	data(){
		return {
		}
	},
	mounted(){
	},
	methods:{
		headClick(){
			this.$emit('headClick')
		}
	}
}
</script>

<style lang="scss" scoped>
.card{
	background: #ffffff;
	.title{
		display: flex; justify-content: space-between; align-items: center;
		.t{padding: 20rpx 30rpx; font-size: 30rpx; font-weight: bold;}
		.icon{padding: 0 20rpx;}
	}
	.body{padding: 10rpx;}
}
</style>
