<template>
	<view v-if="async">
		<x-chart :type="reportModel.type" :dataModel="reportModel"></x-chart>
		<table-report :viewModel="tableData" v-if="dataModel.style !== 1"></table-report>
	</view>
</template>

<script>
	import actions from './actions'
	import ala from '@/service/ala.js'
	import tableReport from './table-report.vue'
	export default {
		components: {
			tableReport
		},
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			dataModel: {}
		},
		data() {
			return {
				viewModel: '',
				chartData: {},
				chartExtend: {},
				tableData: {},
				colors: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
					'#546570', '#c4ccd3'
				],
				grid: {
					show: true,
					height: 320,
					backgroundColor: '#fff',
					borderColor: '#fff'
				},
				chartSettings: {
					type: 'line'
				},
				currentPage: 1,
				reportApi: 'Api/Report/GetCountReport',
				tableApi: 'Api/Report/GetCountTable',
				async: false,
				reportModel: null
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				if (this.dataModel.style !== 2) {
					this.reportModel = await actions.getReport(this, this.dataModel)
				}
				if (this.dataModel.style !== 1) {
				 	this.tableData = await actions.getTable(this, this.dataModel)
				}
				this.async = true
			},
			async pagesChange(ev) {
				actions.pageChange(this, ev)
			}
		}
	}
</script>

<style>
</style>
