<template>
  <div class="header-container">
    <!-- 标题栏 -->
    <div class="section-divider">
      <div class="divider-line"></div>
      <h3 class="section-title">{{ props.slogan }}</h3>
      <div class="divider-line"></div>
    </div>
    <div class="hot-title">
      <div class="hot-title-text">{{ props.title }}</div>
      <div class="hot-title-enlarge">
        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
          <path class="arrow-path "
            d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
            fill="white" fill-opacity="0.65" />
          <path class="arrow-path "
            d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z"
            fill="white" fill-opacity="0.65" />
        </svg>
      </div>
    </div>
    <!-- 核心数据指标 -->
    <div class="container">
      <div class="flex-box flex-left">
        <cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
      </div>
      <div class="flex-box flex-right">
        <cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
        </cdfCurve>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue'

const props = defineProps({
  title: {
    type: String,
    default: '默认曲线图'
  },
  slogan: {
    type: String,
    default: '可用性'
  },
  legendName: {
    type: Array,
    default: () => ['默认曲线图1', '默认曲线图2']
  },
  data: {
    type: Array,
    default: () => []
  },
  zoomHeight: {
    type: String,
    default: null
  }
});

console.log("actualAvailabilityData", props.data[1])
onBeforeUnmount(() => {
  //console.log("中，zhelixieza");

});
const componentProps = ref({});
</script>

<style scoped>
/* 基础样式 */
.header-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

/* 标题栏 */
.section-divider {
  display: flex;
  align-items: center;
  margin: 0px 0 5px 0;
  background-image: url('@/assets/images/lefts/bg_title.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.section-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: 900;
  padding: 0 15px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.hot-title {
  display: flex;
  justify-content: space-between;
}

.hot-title-text {
  font-weight: 700;
  font-size: 13px;
}

.hot-title-enlarge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.hot-title-enlarge:hover .rect {
  /* transform: scale(1.51); */
  transform-origin: center;
}

.hot-title-enlarge:hover .arrow-path {
  transform: scale(1.2) skew(-10deg, -10deg);
  transform-origin: center;
  transition: transform 0.3s ease;
}



/* 新增的弹性盒子容器样式 */
.container {
  display: flex;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  /* background-color: rgb(75, 75, 75); */
}

.flex-box {
  flex: 1;


  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.flex-left {
  /* background-color: rgb(180, 180, 180); */
}
</style>