<template>
  <!-- CDF曲线图 -->
  <div class="container">
    <div class="main">
      <div :id="idName" class="cdfCurve"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cdfCurve_chart"
}
</script>

<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';

const props = defineProps({
  idName: {
    type: String,
    default: 'main'
  },
  propsDate: {
    type: Object,
    default: () => ({})
  },
  isShowDetial: {
    type: Boolean,
    default: false
  }
})

watch(() => props.propsDate, (newVal, oldVal) => {
  if (newVal?.isFirstSearch) { 
    changeCharte();
    console.log("完全不一样的数据",newVal);
  }
}, { immediate: true, deep: true })

let myChart = null;

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', resizeChart);
    myChart.dispose();
  }
});

function changeCharte() {
  // 销毁旧实例
  if (myChart) {
    myChart.dispose();
    myChart = null;

    // 清空 DOM 元素内容
    const chartDom = document.getElementById(props.idName);
    if (chartDom) {
      chartDom.innerHTML = '';
    }
  }

  // 初始化新实例
  const chartDom = document.getElementById(props.idName);
  chartDom.style.height = '300px';
  chartDom.style.width = '360px';
  if (!chartDom) {
    console.error("DOM 元素未找到:", props.idName);
    return;
  }

  myChart = echarts.init(chartDom);
  
  // 设置新 option
  const option = {
    // tooltip: {
    //   trigger: 'axis',
    //   position: function (pt) {
    //     return [pt[0], '10%'];
    //   },
    //   backgroundColor: 'rgba(50,50,50,0.8)',
    //   borderColor: '#333',
    //   borderWidth: 1,
    //   padding: 10,
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 12
    //   }
    // },
    // title: {
    //   left: 'center',
    //   text: props.propsDate.chartName || 'CDF Curve',
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    // toolbox: {
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
      legend: {
      show: true,
      data: [props.propsDate.chartName],
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      top: '10px',
      // left: '-5px',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      padding: [5, 10],
      // 添加图标样式控制
      icon: 'rect',  // 使用矩形图标
      itemWidth: 15, // 图例宽度
      itemHeight: 5, // 图例高度，设为较小值形成线条效果
      
    },
    grid: {
      // top: '-1%',
      right: '8%',
      // bottom: '16%',
      left: '15%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show:false,
      data: props.propsDate.dataX,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      min:props.propsDate.minY,
      max:props.propsDate.maxY,
     
      boundaryGap: [0, '100%'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff',
        formatter: function (value) {
      return value.toFixed(2); // 保留三位小数
    }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      // {
      //   start: 0,
      //   end: 100
      // }
    ],
    series: [
      {
        name: props.propsDate.chartName || 'CDF',
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(58, 77, 233, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(58, 77, 233, 0.1)'
            }
          ])
        },
        data: props.propsDate.dataY
      }
    ],
           tooltip: {
      trigger: 'axis',
      // 确保tooltip显示在最上层
      extraCssText: 'z-index: 999999 !important;',
      backgroundColor: 'rgba(50,50,50,0.8)',
      borderColor: '#333',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      // 固定tooltip位置在顶部
       position: function (pos, params, dom, rect, size) {
        return ['15%', pos[1]];
      }
    }
  };

  myChart.setOption(option, { notMerge: true });
  resizeChart();
}

function initChart() {
  const chartDom = document.getElementById(props.idName);
  chartDom.style.height = '300px';
  chartDom.style.width = '360px';
  myChart = echarts.init(chartDom);

  const option = {
    // tooltip: {
    //   trigger: 'axis',
    //   position: function (pt) {
    //     return [pt[0], '10%'];
    //   },
    //   backgroundColor: 'rgba(50,50,50,0.8)',
    //   borderColor: '#333',
    //   borderWidth: 1,
    //   padding: 10,
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 12
    //   }
    // },
    // title: {
    //   left: 'center',
    //   text: 'CDF Curve',
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    // toolbox: {
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    grid: {
      top: '-1%',
      right: '8%',
      // bottom: '16%',
      left: '15%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show:false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
        
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      min:props.propsDate.minY,
      max:props.propsDate.maxY,
      boundaryGap: [0, '100%'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
       axisLabel: {
    color: '#fff',
    formatter: function (value) {
      return value.toFixed(2); // 保留三位小数
    }
  },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
   
    ],
    series: [
      {
        name: props.propsDate.chartName || 'CDF',
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(58, 77, 233, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(58, 77, 233, 0.1)'
            }
          ])
        },
        data: [12, 13, 85, 53, 19, 23, 18]
      }

    ],
        tooltip: {
      trigger: 'axis',
      // 确保tooltip显示在最上层
      extraCssText: 'z-index: 999999 !important;',
      backgroundColor: 'rgba(50,50,50,0.8)',
      borderColor: '#333',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      // 固定tooltip位置在顶部
       position: function (pos, params, dom, rect, size) {
        return ['15%', pos[1]];
      }
    }
  };

  myChart.setOption(option);
  resizeChart();
  window.addEventListener('resize', resizeChart);
}

function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.main {
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

.cdfCurve {
  width: 100%;
  min-height: 180px;
  position: relative;
  z-index: 1;
}
</style>