<template>
	<view class="coust-chart box-shadow" :style="{
		height: props.height>0?`${props.height}rpx`:'auto',
		background: props.bgColor,
		margin: props.margin,
		padding: props.padding
	}">
		<view v-if="props.title" class="coust-chart-tit" :style="{
			color: props.titFontColor,
			borderBottom: props.showTitLine?'1rpx solid  var(--u-border-color)':'none'
		}">{{props.title}}</view>
		<view v-show="props.loading" class="coust-loading" >
			<u-loading size="40" mode="flower"></u-loading>
		</view>
		<slot></slot>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		height: {
			type: Number,
			default: 0
		},
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		loading: {
			type: Boolean,
			default: false
		},
		margin: {
			type: String,
			default: '0'
		},
		padding: {
			type: String,
			default: '20rpx'
		},
		title: {
			type: String,
			default: ''
		},
		// titFontSize: {
			
		// },
		titFontColor: {
			type: String,
			default: '#333333'
		},
		showTitLine:{
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss">
	.coust-chart {
		width: 100%;
		position: relative;

		&-tit {
			font-size: 28rpx;
			font-weight: 700;
			padding-bottom: 20rpx;
		}
		.coust-loading{
			position: absolute;
			left: 50%;transform: translate(-50%,-50%);
			top: 50%;
		}
	}
</style>