<template>
	<el-container>
		<el-header v-if="this.date || dateGroup.length>0">
			<div class="left-panel">
				<el-radio-group v-model="dateType"  v-if="dateGroup.length>0" @change="changedateGroup" style="margin-right: 15px;">
					<el-radio-button v-for="item in dateGroup" :key="item.value" :label="item.text" :name="item.value"></el-radio-button>
				</el-radio-group>
				<el-date-picker class="hidden-sm-and-down" v-if="this.date" @change="changedate" format="YYYY-MM-DD HH:mm" v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
			</div>
		</el-header>
		<el-main>
			<el-card shadow="never" v-if="statistic.length>0">
				<div class="number-data">
					<div class="item" v-for="(s, index) in statistic" :key="index">
						<x-statistic :title="s.title" :value="s.value" :description="s.description" :tips="s.tips" groupSeparator>
							<x-trend v-model="s.trend" v-if="s.trend"></x-trend>
						</x-statistic>
					</div>					
				</div>
				<div class="chart" v-if="chartList.length>0">
					<el-row>
						<el-col :span="c.span || 12" v-for="(c,index) in chartList" :key="index">
							<xEcharts :height=" c.height ? Number(c.height)?Number(c.height)+'px':c.height :  '250px'" :option="c.option"></xEcharts>
						</el-col>
					</el-row>
				</div>
			</el-card>
			<el-card shadow="never" v-if="table && table.column.length>0" style="margin-bottom: 0px;">
				<xTable stripe ref="table" :data="table.data" :api="table.api" :tableColumn="table.column" :hideDo="table.hideDo || true" :hidePagination="table.hidePagination || true" show-summary :height="table.height || 'auto'">
					<el-table-column type="index" width="50" fixed />
				</xTable>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import xEcharts from '@/components/xEcharts';
	import xStatistic from '@/components/xStatistic';
	export default {
		name: 'chartlist',
		components: {
			xEcharts,
			xStatistic,
		},
		props: {
			name: { type: String, default: "" },
		},
		data(){
			return {
				dateGroup: [

				],
				chartList: [

				],
				statistic: [

				],
				table: {
					api:null,
					height:0,
					data:[],
					column:[],
				},
				dateType: '',
				date: null,
				statName:  this.$route.meta.tablename,
			}
		},
		watch: {
			//监听从props里拿到值了
			date(){

			},
		},
		mounted() {
			const now = new Date();
			const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
			lastDay.setHours(23, 59, 0, 0);
			this.date = [new Date(now.getFullYear(), now.getMonth(), 1, 0, 0), lastDay];

			if (this.name) {
				this.statName = this.name || this.$route.meta.tablename;
			}
			this.loaddata();
		},
		methods: {
			changedateGroup(){
				this.dateGroup.forEach((item) => {
					if (this.dateType === item.text) {
						this.date = item.value;
						this.loaddata();
					}
				})

			},
			changedate(){
				this.loaddata()
			},
			loaddata(){
				//判断是否开启自定义列
				if(this.statName) {
					this.$http.get('app/stat/get', { name: this.statName,date:this.date }).then((res) => {
					    if (res.code == 200) {
					    	Object.assign(this.$data, res.data);
					    	this.dateType = '';
					    	this.dateGroup.forEach((item) => {
					    		if (new Date(item.value[0]).getTime()==new Date(this.date[0]).getTime() && new Date(item.value[1]).getTime()==new Date(this.date[1]).getTime()) {
					    			this.dateType = item.text;
					    		}
					    	})
					    }
					});
				}
			}
		}
	}
</script>
<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;}
	.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
	.dark .number-data .item {border-color: var(--el-border-color-light);}
	.dark .number-data .item p {color: #d0d0d0;}
	.dark .chart {border-color: var(--el-border-color-light);}
</style>
