<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script setup>
import { init } from "echarts";
import { ref, onMounted, nextTick } from "vue";
const assetEchart = ref(null);
let {
  echartData
} = defineProps(['echartData']);
const emit = defineEmits(['click-call-back'])
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener("resize", () => {
    chart.resize();
  });

  var xn = 8;
  var ynj = [0, 200, 400, 600, 800, 1000, 1200, 1400]
  var yno = [1400, 1200, 1000, 800, 600, 400, 200, 0]
  var data = echartData.map((el, ei) => {
    let rn = Math.floor(ei / xn);
    return {
      name: el.uri,
      draggable: false,
      value: ((rn + 1) % 2 !== 0) ?
        [ynj[ei % xn], 100 * (rn + 1)] : // 奇数行
        [yno[ei % xn], 100 * (rn + 1)], // 偶数行
      itemStyle: {
        color: el.status === 1 ? '#25B5FF ' : '#032350 '
      }
    }
  })
  var links = echartData.map((el, ei) => {
    return {
      source: el.uri,
      value: '',
      target: echartData[ei + 1]?.uri || null
    }
  })
  chart.setOption({
    grid: [
      {x: 30, y: 0, width: "95%", height: '95%'   ,
      tooltip:{
          trigger: 'item',
          formatter: "{a}"
        },
      }
    ],
    egend: {
    },
    tooltip:
    {
      trigger: 'axis',
    },
    xAxis: [
      { gridIndex: 0, type:"value", show:false },
      { gridIndex: 0, type:"value", show:false }
    ],
    yAxis: [
      {
        gridIndex: 0,
        type:"category",
        data:[""],
        axisTick: {show: false},
        axisLine: {show: false}
      },
      { gridIndex: 0, show: false,  type: 'value', inverse: true, max: 600 }
    ],
    axisPointer: {
      label: {
        backgroundColor: '#777'
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: '100%',
        barGap: 0,
        data: [2000],
        itemStyle: {
          color: '#021534'
        },
        label:{
          show: true,
          color: '#000000',
          position: [16, 45],
          formatter: "{a}"
        },
        zlevel: 1
      },
      {
        type: 'graph',
        coordinateSystem: 'cartesian2d', // 使用二维的直角坐标系
        legendHoverLink: false,
        hoverAnimation: true,
        nodeScaleRatio: false,
        symbol: 'rectangle', // 节点显示形状
        symbolSize:[90 ,36], // 节点大小
        edgeSymbol: ['none', 'arrow'], // 线两边的标记
        symbolOffset: [0, 0],
        edgeSymbolSize: [0, 2], // 标记大小
        edgeLabel: {
          show: false,
          normal: {
            show: true,
            position: 'middle',
            textStyle: {
                fontSize: 12,
            },
            formatter: "{c}"
          }
        },
        focusNodeAdjacency: true, // 鼠标移到节点上突出显示节点以及节点的边和邻接节点
        roam: false, // 关闭鼠标缩放
        itemStyle: {
          normal: {
            label: {
              show: true,
              textStyle: {
                  color: '#fff'
              }
            },
            nodeStyle : {
              brushType : 'both',
              borderColor : 'rgba(255,215,0,0.4)',
              borderWidth : 1
            }
          }
        },
        lineStyle: {
          normal: {
            width: 1,
            shadowColor: 'none',
            color:'#1096DB',
          },
        },
        tooltip: {
            formatter: '{b}'
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
        zlevel: 10,
        data: data,
        links: links
      }
    ]
  });
  chart.on('click', function(params) {
    emit('click-call-back', params)
  })
};
onMounted(() => {
  setTimeout(initM);
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 98%;
  min-height: 400px;
  // overflow-y: scroll;
}
</style>