<!-- renderjs 逻辑层 -->
<script>
    import { nanoid } from 'nanoid'

    export default {
        emits: ['register'],
        data() {
            return {
                id: nanoid(),
                option: {},
            }
        },
        mounted() {
            this.$emit('register', this)
        },
        methods: {
            setOption(option, opts) {
                // 处理tooltip formatter函数序列化
                if (option.tooltip && typeof option.tooltip.formatter === 'function') {
                    // 将函数转换为字符串，在视图层重新构建
                    option.tooltip.formatter = option.tooltip.formatter.toString()
                }

                this.option = {
                    id: this.id,
                    ...option,
                }

                // 保存 opts 供 renderjs 层使用
                if (opts?.notMerge !== undefined) {
                    this.option.__notMerge = opts.notMerge
                }
            },
        },
    }
</script>

<!-- renderjs 视图层模块 -->
<script module="echarts" lang="renderjs" src="./echarts.module.js"></script>

<template>
    <!-- #ifdef APP-PLUS || H5 -->
    <view class="wrap echarts" :id="id" :option="option" :change:option="echarts.changeOption" />
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view class="wrap empty">非 APP、H5 环境不支持</view>
    <!-- #endif -->
</template>

<style lang="less" scoped>
    //
</style>
