<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">
        <el-option v-for="(building, index) in props.legendName" :key="building" :label="building" :value="index"
          @click="() => {
            //console.log('我是喧杂',playbackSpeed);
            hotSelectFn()
          }" />
      </el-select>
      <div style="display: flex;align-items: center;">
        <div class="setImg" @click="setclick">
          <img src="../../../../assets/images/right2/chilun.png" alt="">
        </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>
    <div v-if="setdia" class="setTimeClass">
      <div class="selector-item">
        <label class="selector-label">时间窗口</label>
        <div class="custom-select">
          <!-- 地面粒度 -->
          <el-select v-model="timeValue" placeholder="" style="width: 100%;">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
              @click="dateClick()" />
          </el-select>
        </div>
      </div>

      <div class="selector-item">
        <label class="selector-label">历史查询</label>
        <div class="custom-select">
          <el-switch v-model="historyS" />
        </div>
      </div>
      <div class="selector-item" v-if="historyS">
        <label class="selector-label">时间段</label>
        <div class="custom-select">
          <el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
            start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </div>
      </div>
    </div>
    <!-- 核心数据指标 -->
    <div class="container">
      <div class="flex-box " v-if="hotStatus">
        <hotMap :title="props.legendName[selectedValue]" :yName="props.yName" :data="props.data[selectedValue]">
        </hotMap>
      </div>
      <!-- <div class="flex-box flex-right">
        <hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
      </div> -->
    </div>
    <el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :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="bigStatus">
            <!-- 核心数据指标 热力图-->
            <div class="flex-box flex-left">
              <hotMap :title="props.legendName[0]"
                :yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
                :data="props.data[0]"></hotMap>
            </div>
            <div class="flex-box flex-right">
              <hotMap :title="props.legendName[1]"
                :yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
                :data="props.data[1]"></hotMap>
            </div>
          </div>
        </main>
      </div>
    </el-dialog>
  </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: () => []
  },
  yName: {//y轴名称
    type: Array,
    default: () => []
  }
})
const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框
// console.log(props, '热力图数据')



const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
  timeValue.value = '1'
  setdia.value = !setdia.value
  historyS.value = false
}
const timeList = ref([
  {
    label: '当天',
    value: '1'
  },
  {
    label: '近七天',
    value: '2'
  },
  {
    label: '近一个月',
    value: '3'
  },
])
const emit = defineEmits();
const timeValue = ref('1')
//点击时隐弹框调取接口
const dateClick = (e) => {
  var startTime, endTime
  if (e && e != undefined) {
    dateValue.value = []
    startTime = e[0]
    endTime = e[1]
  } else {
    const now = new Date();
    const year = now.getFullYear();        // 年份，如 2026
    const month = now.getMonth() + 1;      // 月份，需要 +1，结果范围 1~12
    const day = now.getDate();
    endTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
    startTime = ''
    if (timeValue.value == 1) {//当天
      startTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
    } else if (timeValue.value == 2) {//近七天
      startTime = getLast7DaysIncludingToday()
    } else if (timeValue.value == 3) {//近一个月
      startTime = getPreviousMonthDate()
    }
  }
  emit("changeTime", [startTime, endTime]);
  setdia.value = false
}
//获取前7天和一个月的日期
function getLast7DaysIncludingToday() {
  const dates = [];
  const today = new Date();
  for (let i = 0; i < 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() - i);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    dates.push(`${year}-${month}-${day}`);
  }
  return dates[dates.length - 1];
}
function getPreviousMonthDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth(); // 0-11
  const day = today.getDate();

  // 减一个月
  const prevMonthDate = new Date(year, month - 1, day);

  // 如果日期溢出（例如 3月31日 -> 2月31日 -> 实际变成3月2日或3月3日？）
  // 这里直接用 new Date(year, month-1, day) 会自动调整，但我们需要的是“一个月前的同一天”，若不存在则取该月最后一天
  // 上述写法已经能正确处理（如 3月31日 -> 2月28/29日），因为 new Date(2026, 1, 31) -> 2026-02-28（2026非闰年）
  const y = prevMonthDate.getFullYear();
  const m = String(prevMonthDate.getMonth() + 1).padStart(2, '0');
  const d = String(prevMonthDate.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

const bigStatus = ref(false)
const hotSelectFn = () => {
  hotStatus.value = false
  // selectedValue.value = false 
  setTimeout(() => {
    hotStatus.value = true
  }, 100);
}
//点击放大窗口详细查看曲线
const clickBig = () => {
  bigStatus.value = true
  if (window.ue5) {
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "LargeScreenConfigurationDialog",
      status: "open"
    })));
  }
}
const closeDialogFn = () => {
  bigStatus.value = false
  if (window.ue5) {
    window.ue5("callBackAllDialogFn", String(JSON.stringify({
      type: "LargeScreenConfigurationDialog",
      status: "close"
    })));
  }
}
</script>

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

/* 标题栏 */
.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 !important;
  height: 32px !important;
  border-radius: 0px !important;
}

:deep(.selects .el-select__wrapper) {
  height: 12.5px;
  background: #000000;
  border: 1px solid #000000;
  color: #fff !important;
  box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
}

:deep(.selects .el-select__wrapper .el-select__placeholder) {
  color: #fff !important;
}
</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;
}

/* 弹框遮罩层 */
:deep().dialogModel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  /* background-color: red; */
}

:deep().dialogModel .dashboard-container {
  border: 1px solid #cccccc2a;
}

:deep().dialogModel .el-dialog__body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

:deep(.dialogModel>.el-dialog__body>.dashboard-container::before) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  /* 透明边框 */
  border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
  /* 渐变边框 */
  z-index: -1;
  /* 确保伪元素在内容之下 */
}

:deep(.dialogModel>.el-dialog__body::before) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  /* 透明边框 */
  border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
  /* 渐变边框 */
  z-index: -1;
  /* 确保伪元素在内容之下 */
}

.setImg {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  margin-bottom: 5px;
  /* background-color: red; */
}

.setImg img {
  width: 100%;
  height: 100%;
}

.setTimeClass {
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  min-height: 100px;
  background-color: #272f3e;
  z-index: 2;
  border-radius: 8px;
  padding: 10px;
}

.selector-label {
  width: 80px;
}

.selector-item {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  gap: 5px;
  min-width: 100px;
  /* 最小宽度 */
  flex: 1;
  /* 弹性增长 */
  /* z-index: 99999; */
}

.custom-select {
  position: relative;
  width: 120px;
  /* 自适应宽度 */
}

:deep(.custom-select .el-select__wrapper) {
  height: 12.5px;
}

:deep(.dateclass) {
  width: 250px !important;
}
</style>