<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" @click="clickBig">
        <svg class="rect" 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" v-if="!props.lineArray">
      <div class="flex-box flex-left">
        <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
          :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
      </div>
      <div class="flex-box flex-right">
        <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
          :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
      </div>
    </div>
    <div class="container" v-if="props.lineArray">
      <div class="flex-box">
        <instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
          :propsDate="componentProps" :color="colorList"></instantCurve>
      </div>
    </div>

  </div>
</template>

<script setup>
import instantCurve from './instantCurve.vue'
const instantCurveRight = ref('instantCurve_chart-right');
const instantCurveLeft = ref('instantCurve_chart-left');
const props = defineProps({
  legendName: {
    type: Array,
    default: () => ['默认曲线图1', '默认曲线图2']
  },
  title: {
    type: String,
    default: '默认曲线图'
  },
  slogan: {
    type: String,
    default: '网络延时/丢包'
  },
  data: {
    type: Array,
    default: () => []
  },
  zoomHeight: {
    type: String,
    default: null
  },
  lineArray: {
    type: Boolean,
    default: false
  }
});
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
  console.log('瞬时值曲线', props.lineArray)
}, 2000);
//点击放大窗口详细查看曲线
const clickBig = () => {
  console.log('放大');

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