<template>
	<div>
		<el-button @click="saveData">保存</el-button>
		<div id="container" style="width: 100%; height: 100%"></div>
		<!-- <base-drag-ball @handlepaly="handleaudioplay" style="cursor:pointer"></base-drag-ball> -->
	</div>
</template>
<script>
	// import baseDragBall from '@/components/base/baseDragBall'
	import "@/assets/XZReportDesigner/xzreportdesigner.js";
	import "@/assets/XZReportDesigner/xzreportdesigner.css";
	export default {
		data() {
			return {
				sheetDesigner: null
			}
		},
		// components: { baseDragBall },
		methods: {
			onUpdateDatasetList(){
				// let results = [{
				// 	name: "商品销售",
				// 	id: "商品销售id",
				// 	type: 4,
				// 	columns: [{
				// 			name: "商品名称", //这些name：可以是中文？
				// 			data_type: 3
				// 		},
				// 		{
				// 			name: "区域名称",
				// 			data_type: 3
				// 		},
				// 		{
				// 			name: "销售额",
				// 			data_type: 2
				// 		},
				// 	],
				// }]
				return new Promise((resolve, reject) => {
					// resolve的数据格式
					let results = [{
						name: "数据表名称",
						id: "数据表id",
						columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
						params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
					}]
					console.log(results)
					resolve(results)
				})
			},
			initPage(){

				let option = {
					dataset: [ //数据集按钮的方式 
						{
							id: 1,
							value: "新建Json数据集"
						},
						{
							id: 3,
							value: "API服务数据集"
						},
						{
							id: 4,
							value: "外部数据集"
						}
					],
					onUpdateDatasetList:this.onUpdateDatasetList
				}
				console.log(option)
				this.sheetDesigner = XZReportDesigner("#container", option);
			},
			saveData() {
				// config 为报表配置 ， data为 数据配置
				let reportTemplateInstance = this.sheetDesigner.getData();
			
				console.log(reportTemplateInstance)
				console.log(reportTemplateInstance.config)
				console.log(reportTemplateInstance.data);
			}
			// handleaudioplay() {}
		},

		watch:{
			"dataset-edited":function(dataset) {
			 console.log(dataset)
			},
			
		},

		mounted() {
			this.initPage()
			// const onUpdateDatasetList = () => {
			// 	return new Promise((resolve, reject) => {
			// 		console.log(resolve,reject,123)
			// 		// resolve的数据格式
			// 		let results = [{
			// 			name: "数据表名称",
			// 			id: "数据表id",
			// 			columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
			// 			params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
			// 		}]
			// 		resolve(results)
			// 	})
			// }

		}
	};
</script>
