<template>
  <!-- CDF曲线图 -->
  <div class="container">
    <div class="main">
      <div :id="idName" class="cdfCurve"></div>
      <!-- <div class="showDetial" @click="showViewClick" v-if="isShowDetail">
        <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" :modal='false' :show-close="false" :modal-penetrable='true' width="200"
      height="100" :before-close="isDetialDialogVisibleHandleClose"
      style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);">
      <childrenInstantCurveDetail ref="childrenInstantRef" :propsDate="propsDate"
        @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
    </el-dialog>
  </div>
</template>

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

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

const idName = ref(Math.random().toString(30).slice(2, 8))


const props = defineProps({
  propsDate: {
    type: Object,
    default: () => ({})
  },
  isShowDetail: {
    type: Boolean,
    default: false
  },
  legendName: {
    type: String,
    default: '默认曲线图'
  },
  color: {
    type: String,
    default: '#5470C6'
  },
  data: {
    type: Array,
    default: () => []
  },
  zoomHeight: {
    type: String,
    default: null
  }
})

watch(() => props.data, (newVal) => {
  initChart();
})

const dataX = computed(() => {
  return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
})
const dataY = computed(() => {
  if (props.data[0]?.y && Object.prototype.toString(props.data[0]?.y) === '[object Object]' && props.data[0].y?.errorRate !== undefined) {
    props.data.forEach(item => {
      item.y = item.y.dropRate
    })
  }
  return props.data.length > 0 ? props.data.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18]
})



var lineColor = props.color;
const markLineData = ref([
  {
    color: '#89dac4',
    descript: "最大值：12"
  },
  {
    color: '#da45ds',
    descript: "最小值：12"
  },
  {
    color: '#56fds9',
    descript: "平均值：12"
  },
])
const showView = ref(false)
const isDetialDialogVisible = ref(false)
function showViewClick() {
  // //console.log("时间");

  showView.value = true;
  isDetialDialogVisible.value = true;
  if (window.ue5) {
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "InstantaneousCurveDetailsDialog",
      status: "open"
    })));
  }
  // //console.log("当前的值:",showView.value);

}

const childrenInstantRef = ref(null)
const isDetialDialogVisibleHandleClose = () => {
  isDetialDialogVisible.value = false;
  showView.value = false;
  if (window.ue5) {
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "InstantaneousCurveDetailsDialog",
      status: "close"
    })));
  }
}

let myChart = null;

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

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

function initChart() {
  const chartDom = document.getElementById(idName.value);
  if (!myChart) {
    myChart = echarts.init(chartDom);
  };
  chartDom.style.height = '100%';
  chartDom.style.width = '100%';
  const option = {
    legend: {
      show: true,
      data: [props.legendName],
      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%',
      containLabel: true //自动计算x轴label
    },
    xAxis: {
      type: 'category',
      // type: 'time',
      boundaryGap: false,
      data: dataX.value,
      // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      axisLabel: {
        interval: 0,
        fontSize: 10,
        color: '#fff',
        rotate: 45,
        fontSize: 10,
        margin: 20,
        interval: 'auto', // 或直接不写
        // interval: function (index) {
        //   return index % 10 === 0 // 每10个显示一个
        // },
        hideOverlap: true, //  防重叠（很关键）

      },
      axisLine: {
        show: true, //去除轴线
        lineStyle: {
          color: "#DCE2E8",//设置x轴轴线颜色
        }
      },
    },
    yAxis: {
      type: 'value',
      // max: 120,
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
          width: 1,
          type: 'dashed'
        }
      },
      splitNumber: 5,
      axisLabel: {
        color: '#fff',
        // rotate: 45,
        fontSize: 10,
        formatter: function (value) {
          if (Number(value) >= 1e8) {
            return (Number(value) / 1e8).toFixed(0) + '亿'
          }
          return value
        }
      }
    },
    dataZoom: dataX.value.length <= 7 ? [] : [
      // {
      //   type: 'slider',
      //   xAxisIndex: 0,
      //   startValue: 0,
      //   endValue: 20, // 一屏只看20个点 ⭐
      //   height: 5,
      //   showDetail: false,
      //   top: 40
      // },

      // {
      //   type: 'inside',
      //   start: 0,
      //   end: 10,
      //   left: '18%',
      //   right: '8%',
      //   minSpan: 1,
      //   handleLabel: {
      //     show: false
      //   },
      //   labelFormatter: function (value) {
      //     console.log('xxx', dataX[value])
      //     return dataX[value]
      //   },
      //   textStyle: {
      //     color: 'rgba(255, 255, 255, 0.92)',
      //     fontSize: 8
      //   }
      // },
      {
        start: 0,
        end: 100,
        minSpan: 1,
        type: 'slider',
        left: '14%',
        right: '10%',
        height: Number(props.zoomHeight) || 20,
        bottom: 8,
        handleLabel: {
          show: false
        },
        labelFormatter: function (value) {
          return dataX[value]
        },
        textStyle: {
          color: 'rgba(255, 255, 255, 0.92)',
          fontSize: 8
        }
      }
    ],
    series: [
      {
        color: props.color,
        name: props.legendName,
        data: dataY.value,
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: lineColor,
          width: 3
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: lineColor
              },
              {
                offset: 1,
                color: 'rgba(111,252,186,0.20)'
              }
            ],
            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: 100%;
  /* border: 1px solid #3A4C5B; */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

.cdfCurve {
  width: 100%;
  /* flex: 1; */
  min-height: 180px;
  height: 100%;
  /* 改为min-height确保足够空间 */
  position: relative;
  z-index: 1;
}


.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;
  /* font-weight: 800; */
}

.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>