<!--
 * @Author: tangqihui tangqihui@yuan-info.com
 * @Date: 2023-09-08 11:15:24
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-09-21 15:48:26
 * @FilePath: /御安项目/火影资管/yuan-asset-management-browser/src/components/chart/tree/tree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { Ref, defineProps, watchEffect, nextTick, unref, computed } from 'vue';
import type { EChartsOption } from 'echarts';
import { useECharts } from '@/hooks/web/useECharts';
import {
  colorList,
  mergeOptions,
  getBarChartThemeColor,
  getCommonTheme,
} from '@/components/chart/options/index';
import { isObject } from '@/utils/is';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);
import useEchartsAutoTooltip from '@/components/chart/logic/useEchartsAutoTooltip';
interface BarChartProps {
  chartData: any[];
  chartHeight: string;
  theme?: string;
  fatherId?: string;
}

const {
  chartData = [],
  theme = 'light',
  chartHeight = 'calc(100vh)',
  fatherId = 'customTree',
} = defineProps<BarChartProps>();

const currentTheme = computed(() => {
  return getBarChartThemeColor(unref(theme));
}) as any;

const commonChartTheme = computed(() => {
  return getCommonTheme(unref(theme));
}) as any;

let options: EChartsOption = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove',

    // trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    textStyle: {
      color: unref(commonChartTheme).tooltip.textStyle.color,
    },
    // valueFormatter: unref(tooltipValueFormatter),
    show: true,
    confine: true,
    backgroundColor: unref(commonChartTheme).tooltip.backgroundColor,
    borderColor: 'transparent',
    extraCssText: 'border-radius: 4px;',
  },
  series: [
    {
      roam: false,
      type: 'tree',
      top: 0,
      left: '7%',
      bottom: 0,
      right: '7%',
      symbolSize: 7,
      label: {
        position: 'left',
        verticalAlign: 'middle',
        align: 'right',
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.80)',
      },
      itemStyle: {
        normal: {
          color: '#467FEA',
        },
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left',
        },
      },
      emphasis: {
        focus: 'descendant',
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750,

      data: unref(chartData),
    },
  ],
};

watchEffect(() => {
  options.series&&(options.series[0].data = unref(chartData))
  setOptions(options);
  nextTick(() => {
    let height = document.body.clientHeight;
    if(unref(fatherId)) {
      document.getElementById(unref(fatherId)).scrollTo(0, height / 2);
    }
  });
});
</script>

<template>
  <div
    id="chart"
    class="chart"
    ref="chartRef"
    :style="{ width: '100%', height: chartHeight }"
  ></div>
</template>
