<template>
	<div class="pi-statistic">
		<div class="pi-statistic-title">
			{{ title }}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px;line-height: 2;">
						{{ tips }}
					</div>
				</template>
				<el-icon class="pi-statistic-tips"><el-icon-question-filled/></el-icon>
			</el-tooltip>
		</div>
		<div class="pi-statistic-content">
			<span v-if="prefix" class="pi-statistic-content-prefix">{{ prefix }}</span>
			<span class="pi-statistic-content-value">{{ cmtValue }}</span>
			<span v-if="suffix" class="pi-statistic-content-suffix">{{ suffix }}</span>
		</div>
		<div v-if="description || $slots.default" class="pi-statistic-description">
			<slot>
			{{ description }}
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: { type: String, required: true, default: "" },
			value: { type: String, required: true, default: "" },
			prefix: { type: String, default: "" },
			suffix: { type: String, default: "" },
			description: { type: String, default: "" },
			tips: { type: String, default: "" },
			groupSeparator: { type: Boolean, default: false }
		},
		data() {
			return {

			}
		},
		computed: {
			cmtValue(){
				return this.groupSeparator ? this.$TOOLS.groupSeparator(this.value) : this.value
			}
		}
	}
</script>

<style scoped>
	.pi-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
	.pi-statistic-tips {margin-left: 5px;}
	.pi-statistic-content {font-size: 20px;color: #333;}
	.pi-statistic-content-value {font-weight: bold;}
	.pi-statistic-content-prefix {margin-right: 5px;}
	.pi-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
	.pi-statistic-description {margin-top: 10px;color: #999;}

	.dark .pi-statistic-content {color: #d0d0d0;}
</style>
