<script setup lang="ts">
import Settings from './components/Settings.vue'
import Monitor from './components/Monitor.vue'
import Analysis from './components/Analysis.vue'
import Logger from './components/Logger.vue'
import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon,VideoPlay,VideoPause,CircleClose } from '@element-plus/icons-vue'
import { userStore } from '@/stores/counter'
import api from '@/api/index'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'


const isDark = useDark()
const users = userStore()

isDark.value = users.dark
// const toggleDark = useToggle(isDark)

const logo = ref("logo")
const value = ref(100)


// 获取页面高度
function init_page_height(){
  var h = document.getElementById('main')?.scrollHeight;
  users.pages_lo[0] =98
  var all_h = 2
  for(var i=1;i<users.pages_lo.length;i++){
    var r = (document.getElementById('page'+i)?.scrollHeight) / h;
    users.pages_lo[i] =100-(parseInt(r*100) + all_h)
    all_h += parseInt(r*100)
  }
}

// 初始化页面进度条
const marks = ref({})
function reload_marks(){
  marks.value = {}
  // console.log(users.pages_lo)
  for(var i=0;i<users.pages_title.length;i++){
    marks.value[users.pages_lo[i]] = users.pages_title[i]
  }
  // console.log(marks.value)
  formatTooltip(1)
}

import { onMounted,onBeforeUnmount,watch } from 'vue'

// 定时器
let timer: number | undefined;
onMounted(() => {
  // 页面加载完成后的操作
  console.log('页面加载完成')
  init_page_height()
  reload_marks()
  get_run_state()
})
// 清理定时器
onBeforeUnmount(() => {
  clearInterval(timer)
})

const formatTooltip = (val: number) => {
  var target_key = '10'
  for (var key in marks.value){
    if (val < parseInt(key)+10){
      target_key = key;
      break;
    }
  }

  for (var key in marks.value){
    if (marks.value[key].constructor == Object){
      marks.value[key] = marks.value[key]['label'];
      break;
    }
  }
  
  var label_text = marks.value[target_key]

  marks.value[target_key] = {
    style: {
      color: '#1989FA',
      'font-weight': 'bold',
    },
    label: marks.value[target_key],
  }

  return label_text
}

function show_logo(){
  users.dark = isDark.value
  if (isDark.value){
    logo.value = "logo_dark"
  }else{
    logo.value = "logo"
  }
}

function scroll_tab(event: any){
  var top = event.target.scrollTop;
  var h = event.target.scrollHeight;
  value.value = parseInt(100 * (h-top) / h)
}

// 监听元素高度变化
const old_height = ref(document.getElementById('main')?.scrollHeight)
function heightChange(){
  setTimeout(() => {
    var new_height = document.getElementById('main')?.scrollHeight
    if (old_height.value == new_height){
      return
    }else{
      // console.log(new_height)
      old_height.value = new_height
      init_page_height()
      reload_marks()
    }
  }, 350);
}

function changeTab(){
  var v = value.value
  for(var i=0;i<users.pages_lo.length;i++){
    var vv = users.pages_lo[i]
    if (v<vv + 6 && v> vv - 6){
      console.log(i)
      document.getElementById('page'+(i+1))?.scrollIntoView({
        behavior: 'smooth', // 滚动动画效果
        block: 'start', // 滚动到元素顶部对齐
      })
      break
    }
  }
}

// 开始测试
const start_btn_state = ref(true)
const start_btn_text = ref('开始执行')
const stop_btn_state = ref(true)
const stop_btn_text = ref('已停止...')

const settings = ref(null);
const analysis = ref(null);

function start(){
  start_btn_state.value = true
  start_btn_text.value = '启动中...'
  console.log(settings)
  settings.value.submitForm(get_run_state)
  analysis.value.analysis_data.filepath = settings.value.settings_data.logpath
  setTimeout(() => {
    get_run_state()
  }, 1000);
}

function get_run_state(){
  api.get('/api/runner/getrun')
  .then((response: any) => {
    // 请求成功处理
    // ...
    if (response.data.code == 1){
      ElMessage.success(response.data.msg)
      start_btn_state.value = true
      start_btn_text.value = '正在执行'
      stop_btn_state.value = false
      stop_btn_text.value = '停止测试'
      monitor.value.auto_clear_func()
      timer = setInterval(() => {
        get_monitor()
      }, 1000) // 每1秒调用一次接口
      // 开始监控
      document.getElementById('page'+(2))?.scrollIntoView({
        behavior: 'smooth', // 滚动动画效果
        block: 'start', // 滚动到元素顶部对齐
      })
    }else{
      if (response.data.code > 1){
        ElMessage.warning(response.data.msg)
      }
      start_btn_state.value = false
      start_btn_text.value = '开始执行'

      stop_btn_state.value = true
      stop_btn_text.value = '已停止...'
    }
  })
  .catch((error: any) => {
    // 请求失败处理
    // ...
    console.log(error)
    start_btn_state.value = true
    start_btn_text.value = '开始执行'

    stop_btn_state.value = true
    stop_btn_text.value = '已停止...'
  });
}


const monitor = ref(null);
function get_monitor(){
  api.get('/api/monitor/getmonitor')
  .then((response: any) => {
    // 请求成功处理
    // ...
    if (response.data.code == 1){
      console.log(response.data.data)
      if (response.data.data){
        monitor.value.cpu_data.push(response.data.data[0])
        monitor.value.mem_data.push(response.data.data[1])
        monitor.value.refresh()
      }
    }else{
      if (response.data.data){
        monitor.value.cpu_data.push(response.data.data[0])
        monitor.value.mem_data.push(response.data.data[1])
        monitor.value.refresh()
        clearInterval(timer)
        stop()
      }
    }
  })
  .catch((error: any) => {
    // 请求失败处理
    // ...
    console.log(error)
  });
}

function stop(){
  stop_btn_state.value = true
  api.get('/api/runner/stop')
  .then((response: any) => {
    // 请求成功处理
    // ...
    console.log(response)
    start_btn_state.value = false
    start_btn_text.value = '开始执行'

    stop_btn_state.value = true
    stop_btn_text.value = '已停止...'
    clearInterval(timer)
    ElMessage.success('执行完成')
  })
  .catch((error: any) => {
    // 请求失败处理
    // ...
    stop_btn_state.value = false
    console.log(error)
  });
}

window.onresize = function(e) {
  setTimeout(() => {
    monitor.value.refresh_dom()
  }, 100);
}


</script>

<template>
  <el-container style="height: 100%;">
    <el-header style="line-height:50px;height: 50px;border-bottom: 1px solid #dcdbdb;">
      <img style="height: 45px; float: left;" :src="'/src/assets/'+logo+'.png'"/>
            <!-- <img style="height: 45px; float: left;" src='@/assets/logo.png'/> -->
      <div class="opt" style="float: right;">
        <el-button type="primary" :loading="start_btn_state"  plain @click="start()" :icon="VideoPlay">{{start_btn_text}}</el-button>
        <el-button type="danger" :disabled="stop_btn_state" plain @click="stop()" :icon="CircleClose">{{stop_btn_text}}</el-button>
        <el-switch
          v-model="isDark"
          inline-prompt
          :active-icon="Moon"
          :inactive-icon="Sunny"
          @change="show_logo"
        />
      </div>
    </el-header>
    <el-container>
      <el-aside width="100px" style="padding-left: 1%;">
        <div style="height: 97%; padding-top: 15px;">
          <el-slider v-model="value" :marks="marks" vertical :format-tooltip="formatTooltip" @change="changeTab"/>
        </div>
      </el-aside>
        <el-main id="main" style="height: calc(100vh - 60px);width: 100%;" @scroll="scroll_tab" @click="heightChange()">
          <Settings ref="settings" id="page1"/><br>
          <Monitor ref="monitor" id="page2"/><br>
          <Analysis ref="analysis" id="page3"/><br>
          <Logger ref="logger" id="page4"/>
        </el-main>
    </el-container>
  </el-container>
</template>

<style scoped >
.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {

  .logo {
    margin: 0 2rem 0 0;
  }
}

.dark header{
  border-bottom: 1px solid #5c5c5c !important;
}
.dark aside{
  border-right: 1px solid #5c5c5c !important;
}

::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(67, 161, 255);
  border-radius: 5px;
}

.opt button{
  margin-right: 20px;
}

.el-button>span{
  font-weight: bold !important;
}

</style>

<style deep>
.el-button>span{
  font-weight: 600;
}
</style>