<template>
    <div>
        <a-input-search v-model:value="state.htmlHref" placeholder="输入html链接" style="width: 100%;margin:10px;" @search="onSearch" />
        <div id="treeChartId" style="width:100%;height:600px;margin: 0 auto"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { reactive, onUnmounted, onMounted } from 'vue';
import { treeData } from './data.js'

const state = reactive({
    exportLoading: false,
    echartInstance: undefined,
    treeData: [],
    htmlHref:'htmlContent.html'
})

function renderEchartLine() {
    // 基于准备好的dom，初始化echarts实例
    const domInstance = document.getElementById('treeChartId')
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    const myChart = echarts.init(domInstance);

    const data = state.treeData

    const option = {
        title: {
            text: 'html可视化',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                id: 0,
                name: 'html tree',
                data: [data],
                top: '10%',
                left: '8%',
                bottom: '22%',
                right: '20%',
                symbolSize: 7,
                edgeShape: 'polyline',
                edgeForkPosition: '63%',
                initialTreeDepth: 3,
                lineStyle: {
                    width: 2
                },
                label: {
                    backgroundColor: '#fff',
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right'
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                emphasis: {
                    focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    window.onresize = myChart.resize;
}

const onSearch=async (htmlHref)=>{
    state.treeData = await treeData(htmlHref)
    renderEchartLine()
}

onUnmounted(() => {
    window.onresize = null
})
const getHubConfig = async () => {
    state.treeData = await treeData(state.htmlHref)
    renderEchartLine()
}

onMounted(() => {
    getHubConfig()
})
</script>