<template>
	<view class="charts" v-if="show">
		<charts :config="config" :key="key" ref="charts"></charts>
	</view>
</template>
<script>
	import charts from './charts.vue'
	import {
		getDataInterfaceRes
	} from '@/api/common'
	export default {
		components: {
			charts
		},
		props: {
			config: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				key: +new Date(),
				show: false
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				// 提取视图初始化逻辑
				const initializeView = () => {
					this.show = true;
					this.key = Date.now();
				};
				if (this.config.appDataType === 'dynamic') {
					if (!this.config.appPropsApi) return;
					try {
						const res = await getDataInterfaceRes(
							this.config.appPropsApi, {
								paramList: this.config.appTemplateJson
							}
						);
						this.config.appOption = Object.assign({},
							this.config.appOption,
							res.data
						);
						initializeView();
					} catch (error) {
						console.error('Failed to fetch app props:', error);
					}
				}
				// 静态数据类型的处理
				else {
					initializeView();
				}
			}
		}
	}
</script>
<style lang="scss">
	.charts {
		padding: 20rpx;
	}
</style>