<template>
  <!-- CDF曲线图 -->
  <div class="container">
    <div class="main">
      <div :id="idName" class="cdfCurve"></div>
      <div class="showDetial" @click="showViewClick" v-if="isShowDetial">
        <el-icon v-if="showView" class="icon"><View /></el-icon>
        <el-icon v-else class="icon"><Hide /></el-icon>
        <span>详情</span>
      </div>
      <div class="showValue">
        <div v-for="(item, index) in markLineData" :key="index">
          <span style="font-weight: 700;font-size: 10px; padding: 0 5.5px;" :style="{ color: item.color }">--</span>{{ item.descript }}
        </div>
      </div>
    </div>
      <el-dialog
    v-model="isDetialDialogVisible"
   
    :show-close="false"
    :modal="false"
    custom-class="custom-cdf-dialog"
    width="200"
    height="100"
    :destroy-on-close="true"
    :before-close="isDetialDialogVisibleHandleClose"
    style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);"
  >
    <childrenCdfCurve ref="childrenCdfRef" :propsDate="propsDate" @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose"  />
  </el-dialog>
  </div>
</template>

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

<script setup>

import * as echarts from 'echarts';
import childrenCdfCurve from './childrenCdfCurve.vue'
import { onMounted, onUnmounted, ref } from 'vue';



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

const showView = ref(false);

var lineColor = '#5470C6';
const markLineData = ref([
  {
    color: '#89dac4',
    descript: "最大值：12"
  },
  {
    color: '#da45ds',
    descript: "最小值：12"
  },
  {
    color: '#56fds9',
    descript: "平均值：12"
  },
])
let myChart = null;
const isDetialDialogVisible = ref(false);
function showViewClick() {
  // console.log("时间");
  isDetialDialogVisible.value = !isDetialDialogVisible.value;
  showView.value = true;
  // console.log("当前的值:",showView.value);
  
}
function isDetialDialogVisibleHandleClose() {
  isDetialDialogVisible.value = false;
  showView.value = false;
}
onMounted(() => {
  initChart();
  console.log("-------cdfCurve-------",props.idName);
  document.getElementById(props.idName).style.height = '240px';
  
});

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

function initChart() {
  const chartDom = document.getElementById(props.idName);
  chartDom.style.height = '180px';
  chartDom.style.width = '150px';
  myChart = echarts.init(chartDom);
  console.log("初始化图表propsDate:",chartDom,myChart);
  const option = {
    legend: {
      show: true,
      data: ['CDF曲线图'],
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      top: 0,
      left: '-5px',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      padding: [5, 10],
      // 添加图标样式控制
      icon: 'rect',  // 使用矩形图标
      itemWidth: 15, // 图例宽度
      itemHeight: 5, // 图例高度，设为较小值形成线条效果
      
    },
    grid: {
      top: '23%',
      right: '8%',
      bottom: '16%',
      left: '18%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 10,
        color: '#fff',
      }
    },
    yAxis: {
      type: 'value',
      max: 120,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
          width: 1,
          type: 'dashed'
        }
      },
      splitNumber: 5,
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        formatter: function (value) {
          return value.toFixed(0);
        }
      }
    },
    series: [
      {
        name: 'CDF曲线图',
        data: [12, 13, 5, 103, 19, 3, 18],
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: lineColor,
          width: 5
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: lineColor
              },
              {
                offset: 1,
                color: 'rgba(0,0,0,0.31)'
              }
            ],
            global: false
          }
        },
        markLine: {
          symbol: 'none',
          label: {
            show: false
          },
          data: [
            {
              yAxis: 45,
              lineStyle: {
                color: '#ff0000',
                width: 2,
                type: 'dashed'
              },
            },
            {
              yAxis: 70,
              lineStyle: {
                color: '#ff55f5',
                width: 2,
                type: 'dashed'
              },
            }
          ]
        }
      }
    ],
    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 ['10%', 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%;
  /* border: 1px solid #3A4C5B; */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

.cdfCurve {
  width: 100%;
  /* flex: 1; */
  min-height: 180px;
  /* 改为min-height确保足够空间 */
  position: relative;
  z-index: 1;
}
.cdfCurve div{
  width: 100%;
  height: 100%;
}
.showDetial{
  position: absolute;
  /* flex-direction: row; */
  font: 12px "微软雅黑";
  color: #8a8a8a;
  top: 0;
  right: 10px;
  z-index: 1;
  /* background-color: aquamarine; */
  /* justify-content: center;
  align-items: center; */
}
 .showDetial .icon{
  margin: 0;
  padding: 0;
  top: 2px;

 } 
.showDetial span{
  padding-left: 5px;
}
.showDetial:hover{
  /* background-color: rgba(255, 255, 255, 0.91); */
  color: #607FB0;
}
/* .custom-cdf-dialog{
  position: absolute;
  left: 100px;
} */
.showValue {
  width: 100%;
  /* padding: 5px; */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 10px;
  /* background-color: black; */
  z-index: 0;
  /* overflow: hidden; */
  /* 确保在图表下方 */
}
</style>