<template>
  <!-- 河道横断面分析echarts -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
import useUserStore from '@/store/modules/user';
const pinias = useUserStore();
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef('');

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    setTimeout(() => {
      intChart();
    });
  },
  { immediate: true }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    color: pinias.$state.chartColor,
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        var res = '<div><p>里程：' + params[0].name + ' m</div>'; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
        for (var i = 0; i < params.length; i++) {
          if (params[i].seriesName == '排口街道') {
            res += '<div><p>' + '';
            (' m</p></div>');
          } else {
            //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
            res += `<div style="color: #004565;font-size: 14px; padding:0 12px;line-height: 24px">
            <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
              params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
            ]};"></span>
            ${params[i].seriesName}
            ${params[i].data} m
          </div>`;
          }
        }

        return res;
      },
    },
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: props.echartData.xAxisData.length > 0 ? true : false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      top: '0',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: [
      {
        type: 'category',
        name: '里程(m)',
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
        },
        boundaryGap: false,
        data: props.echartData.xAxisData,
        axisLabel: {
          color: '#c6c6c6',
        },
        axisLine: {
          lineStyle: {
            color: '#066592',
          },
        },
      },
    ],
    yAxis: [
      {
        name: 'm',
        type: 'value',
        min: '15',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: props.echartData.seriesData,
  });

  myChart.value.on('click', function (params) {
    if (params.componentType === 'markPoint') {
      // 点击到了 markPoint 上
      console.log(params.data.lonLat, 222);
      let lonLat = params.data.lonLat.split(',');
      newfiberMapbox.map.easeTo({
        center: [Number(lonLat[0]), Number(lonLat[1]) - 0.005],
        zoom: 16,
      });
    }
  });
}
onMounted(() => {
  window.addEventListener('resize', resizeTheChart);
});
onBeforeUnmount(() => {
  document.removeEventListener('resize', resizeTheChart());
});
</script>