<script setup lang="tsx">
import { ref, onMounted, onBeforeUnmount } from 'vue'

import {
  ListNumNone,
  ListNum1,
  ListNum2,
  ListNum3,
  ListNum4,
  ListNum5
} from '@/renderer/pages/ListNum/list_num'

const httpServerPort = ref<number | null>(null)

onMounted(() => {
  window.mainApi.send('msgRequestGetServerPort')

  window.mainApi.receive('msgReceivedServerPort', (event, port) => {
    httpServerPort.value = port
  })
})

const languages = ref(['en'])
const appVersion = ref('Unknown')

const leftButtonList = () => {
  const leftButtons = ref(['功能测试', '干扰控制', '衰减控制', '负载控制', '帮助文档'])
  const selectedItem = ref('')

  return {
    leftButtons,
    selectedItem
  }
}

const { leftButtons, selectedItem } = leftButtonList()

const getSelectedComponent = (getSelectedItem) => {
  switch (getSelectedItem.value) {
    case '':
      return ListNumNone
    case '干扰控制':
      //   return ListNum1
      return ListNumNone
    case '衰减控制':
      return ListNum2
    case '负载控制':
      return ListNum3
    case '功能测试':
      return ListNum4
    case '帮助文档':
      return ListNum5
    default:
      return ListNumNone
  }
}

const selectedComponent = ref(getSelectedComponent(selectedItem))

const updateSelectedLeftButton = (buttonName: string) => {
  selectedItem.value = buttonName
  selectedComponent.value = getSelectedComponent(selectedItem)
}

// const minimizeWindow = () => {
//     // ipcRenderer.send('window-min')
// }

// const maximizeWindow = () => {
//     // ipcRenderer.send('window-max')
// }

// const closeWindow = () => {
//     // ipcRenderer.send('window-close')
// }

const getIconURL = () => {
  return {
    iconMinURL: './icons/icon-min-white.png',
    iconMaxURL: './icons/icon-max-white.png',
    iconCloseURL: './icons/icon-close-white.png',
    iconRestoreURL: './icons/icon-max-white.png'
  }
}

const iconURL = getIconURL()

const iconSaveBlack = './iconlib/google/save_black.png'
const iconSaveWhite = './iconlib/google/save_white.png'
const iconSave = ref(iconSaveWhite)

const iconSaveUseBlack = () => {
  iconSave.value = iconSaveBlack
}

const iconSaveUseWhite = () => {
  iconSave.value = iconSaveWhite
}

const iconOpenBlack = './iconlib/google/folder_open_black.png'
const iconOpenWhite = './iconlib/google/folder_open_white.png'
const iconOpen = ref(iconOpenWhite)

const iconOpenUseBlack = () => {
  iconOpen.value = iconOpenBlack
}

const iconOpenUseWhite = () => {
  iconOpen.value = iconOpenWhite
}

const iconSettingBlack = './iconlib/google/settings_black.png'
const iconSettingWhite = './iconlib/google/settings_white.png'
const iconSetting = ref(iconSettingWhite)

const iconSettingUseBlack = () => {
  iconSetting.value = iconSettingBlack
}

const iconSettingUseWhite = () => {
  iconSetting.value = iconSettingWhite
}

// 初始化为当前时间的24小时制
const currentDateTime = ref(getCurrentTime())

function getCurrentTime() {
  const now = new Date()
  return now.toLocaleTimeString('en-US', { hour12: false })
}

let interval
onMounted(() => {
  interval = setInterval(() => {
    currentDateTime.value = getCurrentTime()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(interval)
})
</script>

<template>
  <div id="main-screen-app" class="main-screen">
    <div class="top-bar">
      <div class="title">
        <div class="title-text"> </div>
        <div class="button-bar">
          <button
            class="button-unlock"
            @mousedown="iconOpenUseBlack"
            @mouseup="iconOpenUseWhite"
            @mouseleave="iconOpenUseWhite"
          >
            <img :src="iconOpen" class="icon" id="icon-open" />
            <div class="text">打开项目</div>
          </button>
          <button
            class="button-unlock"
            @mousedown="iconSaveUseBlack"
            @mouseup="iconSaveUseWhite"
            @mouseleave="iconSaveUseWhite"
          >
            <img :src="iconSave" id="icon-save" class="icon" />
            <div class="text">保存项目</div>
          </button>
          <div class="middle"></div>
          <button
            class="button-unlock"
            @mousedown="iconSettingUseBlack"
            @mouseup="iconSettingUseWhite"
            @mouseleave="iconSettingUseWhite"
          >
            <img :src="iconSetting" id="icon-setting" class="icon" />
            <div class="text">偏好设置</div>
          </button>
        </div>
      </div>
      <div class="middle"></div>
      <div class="window-buttons-zone">
        <!-- <button id="min" class="window-buttons" @click="minimizeWindow()">
                    <img :src="iconURL.iconMinURL" alt="error" class="icons">
                </button>
                <button id="max" class="window-buttons" @click="maximizeWindow()">
                    <img :src="iconURL.iconMaxURL" alt="error" class="icons">
                </button>
                <button id="close" class="window-buttons" @click="closeWindow()">
                    <img :src="iconURL.iconCloseURL" alt="error" class="icons">
                </button> -->
      </div>
    </div>
    <div class="content">
      <div class="left-side">
        <div class="container">
          <div class="title"> 测试项目 </div>
          <div v-for="currentButton in leftButtons" :key="currentButton" class="row">
            <div class="col">
              <button
                class="button"
                :class="{ active: selectedItem === currentButton }"
                @click="updateSelectedLeftButton(currentButton)"
              >
                {{ currentButton }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="right-side">
        <div class="container">
          <keep-alive>
            <component :is="selectedComponent"></component>
          </keep-alive>
        </div>
      </div>
    </div>
    <div class="status-bar">
      <div class="running-status"> Ready </div>
      <div class="server-status"> Server Port: {{ httpServerPort }} </div>
      <div class="middle"></div>
      <div class="current-datetime"> 当前时间: {{ currentDateTime }} </div>
      <div class="version"> v1.0.0 </div>
    </div>
  </div>
</template>

<style>
html {
  overflow-y: hidden !important;
  user-select: none;
}

html,
body {
  overflow-y: hidden !important;
  width: 100%;
  height: 100%;
}

.main-screen {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  width: 100%;
  height: 45px;
  background-color: #2673e3;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.top-bar,
.top-bar * {
  -webkit-app-region: drag;
}

.top-bar .title {
  width: 100%;
  margin-left: 15px;
  color: white;
  font-size: 20px;
  font-weight: 500;
}

.top-bar .middle {
  flex: 1;
}

.top-bar .window-buttons-zone {
  margin-right: 8px;
}

.top-bar .window-buttons {
  -webkit-app-region: no-drag;
  width: 40px;
  height: 30px;
}

.top-bar .window-buttons .icons {
  width: 12px;
  height: 12px;
  margin: 0 auto;
}

.top-bar .window-buttons:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.top-bar {
  .button-bar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
  }

  .button-bar .button-lock,
  .button-bar .button-unlock {
    width: auto;
    height: 35px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 5px;
    margin-right: 3px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: white;
  }

  .button-bar .button-lock:hover,
  .button-bar .button-unlock:hover {
    font-weight: 500;
    text-decoration: underline;
  }

  .button-bar .button-lock.active,
  .button-bar .button-unlock:active {
    color: black;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
  }

  .icon {
    width: 20px;
    height: 20px;
    margin: 0px;
    margin-right: 5px;
    margin-left: -5px;
    padding: 0px;
  }

  .button-bar .middle {
    flex: 1;
    width: 100%;
  }
}

.content {
  width: 100%;
  background-color: #e9edf5;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}

.status-bar {
  width: 100%;
  height: 23px;
  background-color: #2673e3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 13px;
}

.status-bar {
  .running-status {
    margin-left: 12px;
  }

  .server-status {
    margin-left: 15px;
  }

  .middle {
    flex: 1;
  }

  .current-datetime {
    margin-right: 15px;
  }

  .version {
    margin-right: 12px;
  }
}

.right-side {
  flex: 1;
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  overflow-y: hidden;
}

.right-side .container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.left-side {
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  width: auto;
  overflow-y: hidden;
  overflow-x: hidden;
  border-right: 1px solid #dfdfdf;
}

.left-side .container {
  /* margin-top: 20px; */
  margin-bottom: 20px;
  /* margin-left: 20px; */
  /* padding-top: 8px; */
  width: 100%;
  height: 100%;
  background-color: white;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: start;
  flex-direction: column;
  /* border-radius: 10px; */
}

.left-side .container .title {
  width: 100%;
  height: 25px;
  font-size: 15px;
  font-weight: 500;
  color: black;
  background-color: #dee2ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}

.left-side .title-text {
  margin-left: 30px;
  color: black;
}

.left-side .container .button {
  /* width: 180px; */
  width: 150px;
  height: 35px;
  font-size: 15px;
  /* border-radius: 10px; */
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  text-align: left;
  padding-left: 20px;
  color: gray;
}

.left-side .container .button:hover {
  background-color: #ffffff;
  color: black;
  font-weight: 500;
}

.left-side .container .button.active {
  background-color: #2673e3;
  color: white;
  font-weight: 500;
}
</style>
