<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>
    <el-dialog v-model="bigStatus" :modal='true' :show-close="true" :modal-penetrable='true' width="200"
      :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
      <div class="dashboard-container">
        <!-- 顶部导航栏 -->
        <header class="dashboard-header">
          <div class="logo">
            <div class="logo_header">
              <i class="icon-dashboard">
                <img src="@/assets/images/headers/config_header.png" alt="" style="width: 20px; height: 20px;">
              </i>
              <span class="logo_header_content">通信曲线</span>
            </div>
            <div class="logo_header_right">
              <span class="logo_header_right_content">[区域一特事故]</span>
            </div>
          </div>

          <div class="logo logo_right">
            <hr class="divider">
          </div>
          <div class="header-controls">
            <button class="close-btn" @click="closeDialogFn">×</button>
          </div>
        </header>
        <!-- 主体内容区 -->
        <main class="dashboard-main">
          <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
          <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>
        </main>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>
import instantCurve from './instantCurve.vue'
import bigdialog from '../../../header/component/bigdialog.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 bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
  console.log('放大');
  bigStatus.value = true
}
const closeDialogFn = () => {
  bigStatus.value = false
}
const componentProps = ref({})
</script>

<style scoped>
:deep(.el-dialog .el-dialog__header) {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 基础样式 */
.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>

<style scoped>
/* 基础样式设置 */
.dashboard-container {
  background-color: #000000;
  color: #080606;
  position: fixed;
  /* 改为fixed定位 */
  left: 10%;
  top: 10%;
  width: 1550px;
  z-index: 1001;
  overflow: hidden;
}

/* 头部样式 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0rem 1rem;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
  width: 200px;
  justify-content: space-between;
  color: #ffffff;
}

.logo_header {
  width: 90px;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.icon-dashboard {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
}

.logo_header_content {
  font-weight: 900;
  font-size: 16px;
  /* font-family: 'Consolas', monospace;  */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.logo_header_right {
  display: flex;
  padding-left: 10px;
  align-items: center;
  width: 100px;
  height: 100%;
}

.logo_header_right_content {
  color: #000000;
  padding: 2px;
  font-size: 12px;
  border-radius: 5px;
  font-weight: 200;
  background-color: #6ffcba;
}

.logo_right {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider {
  width: 100%;
  border: none;
  border-top: 1px solid #3e3f3f;
  margin: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.close-btn {
  background: none;
  border: none;
  color: #8890a6;
  cursor: pointer;
  font-size: 1.2rem;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #ffffff;
}

/* 主内容区域 */
.dashboard-main {
  height: 70vh;
  padding: 1rem;
  overflow-y: hidden;
}
</style>