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