<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>
      <el-select v-model="selectedValue" placeholder="切换热力图" class="selects" clearable>
        <el-option v-for="(building, index) in props.legendName" :key="building" :label="building" :value="index" />
      </el-select>
      <div class="hot-title-enlarge">
        <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">
      <div class="flex-box ">
        <hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
      </div>
      <!-- <div class="flex-box flex-right">
        <hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import hotMap from './hotMap.vue'
const props = defineProps({
  slogan: {
    type: String,
    default: '容量/流量'
  },
  legendName: {
    type: Array,
    default: () => ['默认曲线图1', '默认曲线图2']
  },
  title: {
    type: String,
    default: '默认热力图'
  },
  data: {
    type: Array,
    default: () => []
  }
})
const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据')
</script>

<style scoped>
/* 基础样式 */
.header-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  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: scaleX(1.1); */
  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%;
  /* height: 185px; */
  gap: 14px;
  /* background-color: rgb(245, 16, 16); */
}

.flex-box {
  flex: 1;
}

/* .flex-left {
  background-color: rgb(180, 180, 180);
} */
.selects {
  width: 140px;
  border-radius: 0px !important;
}
</style>