<template>
  <div class="data-card" :id="id"></div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue'
import * as echarts from 'echarts'
import {getXqqy} from "../../dashboard/Analysis/api";
// import { Info } from '@element-plus/icons-vue'
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  data: {
    type: String
  }
});
let quCn = ref([
]);
let quWeight = ref([]);
let myChart = reactive({});
function tid(data) {
  quCn.value = [];
  quWeight.value = [];
  data.forEach((item, idx) => {
    quCn.value.push({
      name: item.housingestateName,
      value: item.cn,
      symbolSize: item.cn / 10,
      count: item.cn,
      weight: item.weight
    });

    quWeight.value.push({
      source: '中心节点',
      target: item.housingestateName,
      value: item.weight,
      lineStyle: {
        width: item.weight / 20,
        color: `rgba(100, 255, 218, ${item.weight / 3000 + 0.1})`
      }
    });
  });
  const chartDom = document.getElementById(props.id);
  myChart = echarts.init(chartDom);

  // 科技风格配色
  const colors = {
    primary: 'rgba(66, 165, 245, 0.9)',     // 主色调：科技蓝
    secondary: 'rgba(100, 255, 218, 0.9)',   // 辅助色：科技青
    accent: 'rgba(255, 102, 102, 0.9)',      // 强调色：科技红
    gridLine: 'rgba(100, 150, 255, 0.1)',    // 网格线
    axisLine: 'rgba(100, 150, 255, 0.3)',    // 坐标轴
    textColor: '#a8b2d1',                     // 文本
    tooltipBg: 'rgba(10, 25, 47, 0.8)',      // 提示框背景
  };


  // 图表配置
  // 图表配置
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.dataType === 'edge') {
          return `
                            <div style="color:#64ffda;font-weight:bold">连接</div>
                            <div>投递重量(T): ${params.data.value}</div>
                            <div>${params.data.source} → ${params.data.target}</div>
                        `;
        }
        return `
                        <div style="color:#64ffda;font-weight:bold">${params.data.name}</div>
                        <div>投递重量(T): ${params.data.weight}</div>
                        <div>投递次数: ${params.data.count}</div>

                    `;
      },
      backgroundColor: colors.tooltipBg,
      borderColor: 'rgba(100, 150, 255, 0.3)',
      borderWidth: 1,
      textStyle: { color: '#e6f1ff' }
    },
    series: [
      {
        type: 'graph',
        layout: 'force',
        data: quCn.value,
        links: quWeight.value,
        roam: true,
        focusNodeAdjacency: true,
        draggable: true,
        force: {
          repulsion: 100,
          edgeLength: [40, 100]
        },
        label: {
          show: true,
          position: 'right',
          color: colors.textColor
        },
        lineStyle: {
          color: 'source',
          curveness: 0.1
        },
        emphasis: {
          lineStyle: {
            width: function (edge) {
              return edge.value / 120;
            }
          }
        },
        itemStyle: {
          color: function (params) {
            if (params.data.category === 0) {
              return colors.primary;
            }
            // 根据次数调整颜色透明度
            return `rgba(${params.data.count *0.15}, ${params.data.count *0.4}, ${params.data.count * 0.75}, ${params.data.count / 300 + 0.9})`;
          },
          shadowBlur: 50,
          shadowColor: function (params) {
            if (params.data.category === 0) {
              return 'rgba(100, 255, 218, 0.7)';
            }
            return 'rgba(66, 165, 245, 0.5)';
          }
        },
        animationDuration: 500,
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return idx * 100;
        }
      }
    ]
  };


  // 设置配置项并渲染
  myChart.setOption(option);
}

// 小区清运
async function loadXqqy(){
  const resData = await getXqqy({});
  const res = resData.result;
  let Qy = [];
  for (let i = 0; i < res.length; i++) {
    Qy.push({
      housingestateName: res[i].housingestateName,
      cn: res[i].cn,
      weight: res[i].weight,
    });
  }
  tid(Qy);
}

setInterval(function() {
  loadXqqy();
}, 30*60*1000);

// 响应窗口大小变化
onMounted(() => {
  window.addEventListener('resize', () => {
    myChart.resize();
  });
  loadXqqy();
})
</script>

<style scoped>
.data-card {
  width: 100%;
  height: 100%;
}
</style>
