<template>
	<el-card shadow="hover" header="销售简报" v-loading="loading">

		<div class="number-data">
			<div class="item" v-for="(s, index) in briefList" :key="index">
				<x-statistic :title="s.label" :value="s.num" :description="s.status" :tips="s.rate" groupSeparator>
					<x-trend v-model="s.rate" v-if="s.rate"></x-trend>
				</x-statistic>
			</div>					
		</div>
		

	</el-card>
</template>

<style scoped>
	.el-card {margin-bottom: 15px;}
	.number-data {display: flex;}
	.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
	.number-data .item:last-child {border: 0;}
	.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
	.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
	.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}

	</style>

<script>
	import xStatistic from '@/components/xStatistic';

			

	export default {
		title: "统计",
		icon: "el-icon-data-line",
		description: "实时统计",
		components: {
			xStatistic
		},
		data() {
			return {
				loading: true,
				briefList: [
					{
						color:'#fdsfdsf',
						icon:0,
						label:'fdsafafa',
						num:100,
						rate:10,
						status:'fdsafa'
					},
					{
						color:'#fdsfdsf',
						icon:0,
						label:'fdsafafa',
						num:100,
						rate:10,
						status:'fdsafa'
					},
					{
						color:'#fdsfdsf',
						icon:0,
						label:'fdsafafa',
						num:100,
						rate:10,
						status:'fdsafa'
					},
					{
						color:'#fdsfdsf',
						icon:0,
						label:'fdsafafa',
						num:100,
						rate:10,
						status:'fdsafa'
					},
					{
						color:'#fdsfdsf',
						icon:0,
						label:'fdsafafa',
						num:100,
						rate:10,
						status:'fdsafa'
					},
				]
			}
		},
		created() {
			
			this.loading = false;
		},
		methods: {
			reportClick(){
				alert(1)
			}
		},
	}
</script>
