<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  data: anyObj[]
  indicator?: boolean
}>()

const emit = defineEmits(['clickSymbol'])

const window_width = window.screen.width

const chartContainer = ref<HTMLDivElement | null>(null)

let myChart = reactive<anyObj>({})

const option = reactive<anyObj>({
  series: [
    {
      type: 'graph', // 图形类别-graph关系图
      layout: 'force', // 布局方式，force为力引导布局
      // edgeSymbol: ['arrow'],
      // symbolSize: (_value: anyObj, params: anyObj) => {
      //     // 节点大小根据数据params中的data来判定数据大小
      //     switch (params.data.level) {
      //         case 0:
      //             return (window_width / 1920) * 80;
      //         case 1:
      //             return (window_width / 1920) * 60;
      //         case 2:
      //             return (window_width / 1920) * 40;
      //         // return 0;
      //         default:
      //             return (window_width / 1920) * 30;
      //         // return 0;
      //     }
      // },
      roam: true, // 允许用户拖动和缩放图表
      data: [], // 数据
      links: [], // 关系连接线及关系内容
      lineStyle: {
        // 连接线的样式
        width: 2,
        curveness: 0,
      },
      emphasis: {
        // 高亮状态的图形样式。
        // focus: 'adjacency',
        // lineStyle: {
        //     width: 2,
        //     curveness: 0,
        // },
      },
      force: {
        // 力引导布局相关的配置项
        repulsion: window_width * 0.225,
        edgeLength: 100,
        gravity: 0.25,
      },
      zoom: 2,
      scaleLimit: {
        min: 2,
        max: 2,
      },

      // left: 10,
      // right: 10,
      // top: 10,
      // bottom: 10,
    },
  ],
})

// const colorConfig = [
//     '#C8FFC2',
//     '#EEC2FF',
//     '#C6C2FF',
//     '#C1F8FF',
//     '#FFF9C2',
//     '#FFD7C2',
//     '#C1DCFF',
//     '#FFC1D1',
//     '#90FCF7',
// ];
const colorConfig = [
  {
    bg: '#FF7A6A',
    label: '待点亮',
    color: '#BC2D37',
  },
  {
    bg: '#FED769',
    label: '陌生',
    color: '#A13C00',
  },
  {
    bg: '#A0FBF8',
    label: '熟悉',
    color: '#2D39BC',
  },
  {
    bg: '#B9FC90',
    label: '已掌握',
    color: '#2F8A5B',
  },
]
// 处理数据
const dataProcessingFun = (
  list: anyObj[],
  level = 0,
  data: anyObj[] = [],
  links: anyObj[] = [],
) => {
  list.forEach((item: anyObj, _idx) => {
    const { id, name, pid, masteryDegree } = item
    if (data.every(i => i.id !== item.id)) {
      const label: anyObj = {
        show: true,
        position: 'inside',
        fontSize: (window_width / 1920) * 24,
        lineHeight: (window_width / 1920) * 32,
        // backgroundColor: colorConfig[level], // 根据层级设定颜色
        backgroundColor: colorConfig[Number(masteryDegree) || 0]?.bg,
        color: '#fff',
        overflow: 'break',
        textBorderWidth: (window_width / 1920) * 6,
        textBorderColor: colorConfig[Number(masteryDegree) || 0]?.color,
        fontFamily: 'AlimamaShuHeiTi',
      }
      const rate = name.length <= 5 ? 24 : name.length < 10 ? 16 : name.length < 16 ? 12 : 10
      const _width = (window_width / 1920) * (name.length < 5 ? 5 : name.length) * rate
      label.width = _width
      label.height = _width
      label.borderRadius = _width
      label.padding = (window_width / 1920) * 14

      // 根据层级设定大小
      // if (level < 1) {
      //     label.width = (window_width / 1920) * 166;
      //     label.height = (window_width / 1920) * 166;
      //     label.borderRadius = (window_width / 1920) * 166;
      //     label.padding = 4;
      // } else if (level < 2) {
      //     label.width = (window_width / 1920) * 136;
      //     label.height = (window_width / 1920) * 136;
      //     label.borderRadius = (window_width / 1920) * 136;
      //     label.padding = 4;
      // }
      data.push({
        level,
        itemStyle: { color: 'transparent' },
        label,
        ...item,
      })
    }

    links.push({
      source: id,
      target: pid,
      level,
    })

    if (item.children?.length > 0) {
      dataProcessingFun(item.children, level + 1, data, links)
    }
  })
  return {
    data,
    links,
  }
}

function drawGraph() {
  if (myChart) {
    myChart.dispose?.() // 清除上一次已经画过得图，这样才能实时才到最新数据的图
    myChart = echarts.init(chartContainer.value)
  }
  const { data, links } = dataProcessingFun(props.data)
  option.series[0].data = data
  option.series[0].links = links
  // myChart = echarts.init(chartContainer.value);
  myChart.setOption(option)
  myChart.resize()
  myChart.on('click', (param: anyObj) => {
    if (param.dataType === 'node') {
      console.log('clickSymbol', param.data)
      emit('clickSymbol', param.data)
    }
    // else {
    //     console.log('点击了边', param);
    // }
  })
}

watch(
  () => props.data,
  () => {
    drawGraph()
  },
  { deep: true },
)
onMounted(() => {
  // myChart = echarts.init(chartContainer.value);
  drawGraph()
  // myChart.on('click', (param: anyObj) => {
  //     if (param.dataType === 'node') {
  //         console.log('clickSymbol', param.data);
  //         emit('clickSymbol', param.data);
  //     }
  //     // else {
  //     //     console.log('点击了边', param);
  //     // }
  // });
})
// onActivated(() => {
//     myChart = echarts.init(chartContainer.value);
// });
</script>
<template>
  <div class="map-region">
    <div
      ref="chartContainer"
      class="wrap"
      :style="{ height: indicator ? 'calc(100% - 84px) !important' : '100% !important' }"
    ></div>
    <div v-if="indicator" class="indicator-list">
      <div v-for="i in colorConfig" :key="i.label" class="indicator-item">
        <div class="indicator-dot" :style="{ background: i.bg }"></div>
        <div class="indicator-text">{{ i.label }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.map-region {
  width: 100%;
  height: 100%;
  .wrap {
    width: 100% !important;
    // height: calc(100% - 80px) !important;
    overflow-x: auto;
    @include hidden_scroll;
  }
  .indicator {
    &-list {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 7vh;
    }
    &-item {
      margin: 0 32px;
      display: flex;
      align-items: center;
    }
    &-dot {
      width: 2vh;
      height: 2vh;
      border-radius: 50%;
      margin-right: 8px;
    }
    &-text {
      color: $font-color;
      text-align: center;
      font-family: OPPOSans;
      font-size: 2vh;
    }
  }
}
</style>
