<template>
  <div class="common-layout" :style="{ '--headerHeight': headerHeight, '--asideWidth': asideWidth }">
    <!-- 悬浮控制窗口 -->
    <div class="control-panel" id="control_panel1" v-if="useAppStoreInstance.iscontrolPanelShow">   
      <div class="panel-content">
        <div class="controls-list">
          <div class="control-item" v-for="item in controls" :key="item.label">
            <el-switch 
              v-model="item.enabled" 
              class="control-switch"
              active-color="#165DFF"
              inactive-color="#4E5969"
              :disabled="item.disabled"
              @change="handleSwitchChange(item)"
            />
            <span class="control-label">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="search-panel" id="search_panel">   
      <div class="search-panel-wrapper"> 
         <el-input
          v-model="searchSatelliteContent"
          class="responsive-input"
          placeholder="搜索卫星"
          ref="searchSatelliteRef"
          :suffix-icon="Search"
          @blur="searchSatellite"
        />
      </div>
    </div> -->
    <el-container class="layout-container">
      <el-container class="main-content-wrapper" >
        <!-- 左侧边栏 -->
        <el-aside class="fixed-aside left-aside" v-show="useAppStoreInstance.isdataPanelShow">
          <div class="aside-content">
            <keep-alive>
              <router-view name="left"></router-view> 
            </keep-alive>
          </div>
        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="main-container">
          <!-- 底部Footer区域 -->
          <el-footer class="main-footer" id="all_footer">
            <div class="footer-content footer-content-up" id="footer-content-up" v-show="useAppStoreInstance.isTimeLineShow">
              <keep-alive>
                <router-view name="foot_one"></router-view> 
              </keep-alive>
            </div>
            <div class="footer-content footer-content-down" id="two_footer" v-show="useAppStoreInstance.islegendShow">
              <keep-alive>
                <router-view name="foot_two"></router-view>    
              </keep-alive>
            </div>
          </el-footer>
        </el-main>

        <!-- 右侧边栏 -->
        <el-aside class="fixed-aside right-aside" v-if="useAppStoreInstance.isdataPanelShow">
          <div class="aside-content">
            <keep-alive>
              <router-view name="right"></router-view> 
            </keep-alive>
          </div>
        </el-aside>
      </el-container>
    </el-container>


  </div>
</template>

<script setup>

import { ref, onMounted, onUnmounted, watch, onActivated } from 'vue'
import  useAppStore  from '@/store/module/app'


const useAppStoreInstance = useAppStore();

// 布局尺寸控制
const headerHeight = ref('40px')
const asideWidth = ref('400px')
const isMobile = ref(false)
const isCollapsed = ref(false)
const input2 = ref('')

// 控制项数据
const controls = ref([
  { label: '卫星轨道', enabled: useAppStoreInstance.issatelliteOrbitShow, disabled: false },
  { label: '卫星波束', enabled: useAppStoreInstance.issatelliteBeamShow, disabled: false },
  { label: '数据面板', enabled: useAppStoreInstance.isdataPanelShow, disabled: false },
  { label: '时间轴', enabled: useAppStoreInstance.isTimeLineShow, disabled: false },
  { label: '图例', enabled: useAppStoreInstance.islegendShow, disabled: false }
])

const handleControlChange = (item, value) => {
  //console.log(`${item.label} 状态变为: ${value ? '开启' : '关闭'}`)
  item.enabled = value
}

// const checkScreenSize = () => {
//   isMobile.value = window.innerWidth <= 992
// }

const searchSatelliteContent = ref('')
const searchSatelliteRef = ref(null)




const handleSwitchChange = (item) => {
  

  //console.log("初始化调用11111",item.enabled,item);
  
  switch (item.label) {
    case '时间轴':
      useAppStoreInstance.setisTimeLineShow(item.enabled)
      if (window.ue5) {
        window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
          type: "TimeLineShow",
          status: item.enabled ? "open" : "close"
      })));}
      break;
    case '图例':
      useAppStoreInstance.setislegendShow(item.enabled)
      useAppStoreInstance.setisSourceLegendShow(item.enabled)
      if (window.ue5) {
        window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
          type: "LegendShow",
          status: item.enabled ? "open" : "close"
      })));}
      break;
    case '数据面板':
      useAppStoreInstance.setisdataPanelShow(item.enabled)
      if (window.ue5) {
        window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
          type: "DataPanelShow",
          status: item.enabled ? "open" : "close"
      })));}
      break;
    case '卫星轨道':
      useAppStoreInstance.setissatelliteOrbitShow(item.enabled)
      if (window.ue5) {
        window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
          type: "SatelliteOrbitShow",
          status: item.enabled ? "open" : "close"
      })));}
      break;
    case '卫星波束':
      useAppStoreInstance.setissatelliteBeamShow(item.enabled)
      if (window.ue5) {
        window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
          type: "SatelliteBeamShow",
          status: item.enabled ? "open" : "close"
      })));}
      
      break;
    default:
     
       ElMessage({
        type: 'error',
        message: `界面显示实例类型错误！`,
      })
      break;
  }
}


watch(useAppStoreInstance, () => { 

  if (useAppStoreInstance.isTimeLineShow && !useAppStoreInstance.islegendShow && useAppStoreInstance.isdataPanelShow) {
    // document.getElementsByClassName('footer-content-up').style.position = 'absolute'
    // document.getElementById('all_footer').style.width = '100%'
     document.getElementById('footer-content-up').style.bottom = '300px'
  }
 if (useAppStoreInstance.isdataPanelShow) { 
  // //console.log(window.innerWidth);
  document.getElementById('footer-content-up').style.bottom = '0px'
  document.getElementById('all_footer').style.width = `calc(100% - ${asideWidth.value} - ${asideWidth.value})`
  // document.getElementById('all_footer').style.bottom = '10px'
  if (document.getElementById('control_panel1')) {
    document.getElementById('control_panel1').style.right = '335px'
  }
  // document.getElementById('search_panel').style.left = '395px'
  
  document.getElementById('two_footer').style.bottom = '100px'
  
}else { 

  document.getElementById('all_footer').style.position = 'absolute'
  document.getElementById('all_footer').style.width = '100%'
  // document.getElementById('all_footer').style.bottom = '10px'
  // if (!useAppStoreInstance.islegendShow) {document.getElementById('all_footer').style.bottom = '20px'}
  // document.getElementById('search_panel').style.left = '30px'
  if (document.getElementById('control_panel1')) {
  document.getElementById('control_panel1').style.right = '-30px'
  }
  
}
  
}, {deep: true,immediately: true})



const checkScreenSize = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  //console.log("当前设备的尺寸:",width,height);
  isMobile.value = width <= 940;
  useAppStoreInstance.setisdataPanelShow(!isMobile.value);
  controls.value.forEach(item => {
    if (item.label === '数据面板') {
      item.enabled = !isMobile.value,
      item.disabled = isMobile.value
    }
    
  })
 
}
const currSeriveSize = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  //console.log("当前设备的尺寸:",width,height);
  
}

onActivated(() => {
  // //console.log("111111111111114onActivated",useAppStoreInstance.islegendShow,useAppStoreInstance.isTimeLineShow);
  controls.value = [
  { label: '卫星轨道', enabled: useAppStoreInstance.issatelliteOrbitShow, disabled: false },
  { label: '卫星波束', enabled: useAppStoreInstance.issatelliteBeamShow, disabled: false },
  { label: '数据面板', enabled: useAppStoreInstance.isdataPanelShow, disabled: false },
  { label: '时间轴', enabled: useAppStoreInstance.isTimeLineShow, disabled: false },
  { label: '图例', enabled: useAppStoreInstance.islegendShow, disabled: false }
]

});
onMounted(() => {
  checkScreenSize();
  handleSwitchChange({disabled: false,enabled: useAppStoreInstance.islegendShow,label: "图例"})
  window.addEventListener('resize', checkScreenSize);
  //  //console.log("111111111111114ononMounted",useAppStoreInstance.islegendShow,useAppStoreInstance.isTimeLineShow);
  controls.value = [
  { label: '卫星轨道', enabled: useAppStoreInstance.issatelliteOrbitShow, disabled: false },
  { label: '卫星波束', enabled: useAppStoreInstance.issatelliteBeamShow, disabled: false },
  { label: '数据面板', enabled: useAppStoreInstance.isdataPanelShow, disabled: false },
  { label: '时间轴', enabled: useAppStoreInstance.isTimeLineShow, disabled: false },
  { label: '图例', enabled: useAppStoreInstance.islegendShow, disabled: false }
]
});

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize);

});
</script>

<style scoped>
.common-layout {
  --aside-bg-color: rgba(36, 36, 36, 0);
  --footer-bg-color: #34495e;
  --border-color: rgba(255, 255, 255, 0.1);
  --transition-time: 0.3s;
  --control-panel-width: 130px;
  --control-panel-collapsed-width: 20px;
  max-height: calc(100vh - 25px);
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 640px;
}

/* 修改搜索面板样式 */
/* 修改搜索面板样式 */
.search-panel {
  position: fixed;
  top: 70px;
  left: 395px;
  transform: translateY(-50%);
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  overflow: hidden;
  transition: width var(--transition-time) ease;
  width: var(--control-panel-width);
  background-color: #000; /* 添加黑色背景 */
  /* border: 1px solid rgba(59, 130, 246, 0.3); 添加与control-panel一致的边框 */
  /* border-radius: 80px; */
}

.search-panel .search-panel-wrapper {
  width: 100%;
}

/* 使用深度选择器修改 el-input 内部元素样式 */
.search-panel .search-panel-wrapper :deep(.el-input__wrapper) {
  background: rgba(0, 0, 0, 1) !important;
  border: none;
}


/* 修改 el-input 聚焦时的样式 */
.search-panel .search-panel-wrapper :deep(.el-input__wrapper.is-focus) {
 
  box-shadow:inset  0 0 0 1px  rgba(0, 0, 0, 1) !important; 
}

/* .search-panel .search-panel-wrapper :deep(.el-input__wrapper:focus) {
  background: rgba(0, 0, 0, 1) !important;
  border: none;
  outline: none;
}
.search-panel .search-panel-wrapper :deep(.el-input__inner:focus) {
  background-color: black;
  color: #e0e7ff;
  outline: none;
  border: none;
} */

.search-panel .search-panel-wrapper :deep(.el-input__inner) {
  background-color: black;
  color: #e0e7ff;
}

.search-panel .search-panel-wrapper :deep(.el-input__inner::placeholder) {
  color: rgba(224, 231, 255, 0.7);
}

/* 控制面板样式 */
.control-panel {
  position: fixed;
  top: 16.8%;
  right: 330px;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  overflow: hidden;
  transition: width var(--transition-time) ease;
  width: var(--control-panel-width);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.control-panel.panel-collapsed {
  width: var(--control-panel-collapsed-width);
}

.control-panel.panel-collapsed .panel-content {
  display: none;
}

.control-panel .panel-content {
  flex: 1;
  padding: 5px 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, rgba(0, 0, 0, 0.93) 0%, rgba(63, 123, 245, 1.7) 50%, transparent) 1;
}

.control-panel .panel-content .controls-list {
  padding: 5px 10px;
}

.control-panel .panel-content .controls-list .control-item {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.control-panel .panel-content .controls-list .control-item:last-child {
  margin-bottom: 0;
}

.control-panel .panel-content .controls-list .control-item .control-switch {
  margin-right: 10px;
}

.control-panel .panel-content .controls-list .control-item .control-label {
  color: #e0e7ff;
  font-size: 10px;
  font-weight: 500;
}

.layout-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.fixed-aside {
  width: var(--asideWidth);
  background-color: var(--aside-bg-color);
  transition: all var(--transition-time) ease;
  position: relative;
  /* z-index: 1; */
  display: flex;
  flex-direction: column;
}

.fixed-aside .aside-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  height: 100%;
}

.left-aside {
  order: 1;
  /* border-right: 1px solid var(--border-color); */
}

.right-aside {
  order: 4;
  /* border-left: 1px solid var(--border-color); */
}

.main-container {
  flex: 1;
  order: 2;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.el-footer{
  padding: 0;
}
.main-container .content-wrapper {
  flex: 1;
  padding: 0px;
  overflow-y: auto;
  display: none;
}

.main-footer {
  height: auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-width: 590px;
  width: calc(100% - 800px);
  gap: 10px;
  border-top: 1px solid var(--border-color);
  transition: all var(--transition-time) ease;
  position: absolute;
  bottom: 20px;

}

.main-footer .footer-content {
  min-height: 100px;
  border-bottom: 1px solid var(--border-color);
}
.footer-content-up{
  position: relative;
  /* bottom: 10px; */
}
.footer-content-down{
  /* height: 50px; */
}
.main-footer .footer-content:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.6);
}

@media (max-width: 1700px) {
  .main-footer {
    margin-left: 0;
    margin-right: 10px;
    position: absolute;
    bottom: 20px;
    border-radius: 0;
  }
}
/* max-width: 1540px */
@media (max-width: 940px) {
  .common-layout {
    --control-panel-width: 160px;
  }
  
  .fixed-aside {
    position: absolute;
    height: 100%;
    z-index: 100;
    transform: translateX(-100%);
  }
  
  .control-panel {
    right: -60px;
  }
  
  .search-panel {
    left: 30px;
  }
  
  .fixed-aside.left-aside {
    left: 0;
  }
  
  .fixed-aside.right-aside {
    right: 0;
    transform: translateX(100%);
  }
  
  .fixed-aside.active {
    transform: translateX(0);
  }
  
  .main-footer {
    margin-left: 0;
    margin-right: 10px;
    width: 100% !important;
    position: absolute;
    /* background-color: bisque; */
    bottom: 20px;
    border-radius: 0;
  }

}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 15px !important;
  }
}

@media (max-width: 600px) {
  /* Empty rule kept for structure */
}
</style>