<template>
  <div class="header-container">
    <!-- 标题栏 -->
    <div class="section-divider">
      <div class="divider-line"></div>
      <h3 class="section-title">可用性</h3>
      <div class="divider-line"></div>
    </div>
    <div class="hot-title">
        <div class="hot-title-text">巴西-最小值(CDF曲线图)</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 :idName="`${cdfCurveLeft}+${allIdName[0]}`" :propsDate="componentProps"></cdfCurve>
      </div>
      <div class="flex-box flex-right">
        <cdfCurve :idName="`${cdfCurveRight}+${allIdName[1]}`" :propsDate="componentProps" :isShowDetial="true"></cdfCurve>
      </div>  
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue'
const cdfCurveRight = ref('chart-right'); 
const cdfCurveLeft = ref('chart-left'); 
const props = defineProps({
  allIdName: {
    type: Array,
    default: () => ['allIdName1','allIdName2'],
  },
});
onBeforeUnmount(() => { 
  //console.log("中，zhelixieza");
  
});
const componentProps = ref({});
</script>

<style scoped>

/* 基础样式 */
.header-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 标题栏 */
.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: 200px;
  /* 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>