<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="control-panel" style="top: 22.8%;" id="control_panel1" v-else>
      <div class="panel-content">
        <div class="controls-list">
          <div class="control-item" v-for="item in subControls" :key="item.label">
            <el-switch v-model="item.enabled" class="control-switch" active-color="#165DFF" inactive-color="#4E5969"
              @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 }
])

// let siteExpand1 = ref(false)
// let siteExpand2 = ref(false)

const subControls = ref([
  { label: '展开一级', enabled: false },
  { label: '展开二级', enabled: 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;

    case '展开一级':
      if (window.ue5) {
        window.ue5("callBackControlExpendFn", String(JSON.stringify({
          type: "SatelliteExpend1",
          status: item.enabled ? "open" : "close"
        })));
      }
      // console.log('item.enabled', item.enabled, String(JSON.stringify({
      //   type: "SatelliteExpend1",
      //   status: item.enabled ? "open" : "close"
      // })))
      break;

    case '展开二级':
      if (window.ue5) {
        window.ue5("callBackControlExpendFn", String(JSON.stringify({
          type: "SatelliteExpend2",
          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('control_panel1').style.right = '18%'
    }
    // 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(() => {
  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); */
  width: fit-content;
  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%;
  width: 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: 1; */
  width: 20%;
  flex-direction: column;
  min-width: 400px;
}

.fixed-aside .aside-content {
  /* flex: 1; */
  padding: 12px;
  overflow-y: auto;
  /* background-color: red; */
  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;
  /* width: 100%; */
  margin: 0 auto;
  max-width: 1600px;
  position: relative;
}

.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: 100%;
  /* width: 1120px; */
  /* max-width: 1600px; */
  margin: 0 auto;
  /* width: calc(100% - 800px); */
  gap: 10px;
  border-top: 1px solid var(--border-color);
  transition: all var(--transition-time) ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  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;
    /* right: -20%; */
    /* top: 30px; */
  }

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