<template>
  <el-card shadow="never">
    <template #header>
      <span>毒 CD 空转</span>
    </template>
    <el-row>
      <el-col span="1"></el-col>
      <el-col span="23">
        <el-form class="form" label-position="left" label-width="30%">
          <el-form-item label="开启">
            <el-switch v-model="_drugCDMonitor"/>
            <span class="desc">开启后每个页面都会存在一个活跃的监视器，但是后台页面需要刷新后才会开启</span>
          </el-form-item>
          <el-form-item label="检查间隔(毫秒)">
            <el-input v-model="drugCDMonitorLoop" :disabled="_drugCDMonitor" type="number"/>
            <span class="desc">每个监视器在间隔时间后会检查一次</span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import drugCDMonitor from "../ts/monitor/DrugCDMonitor";
import IntervalSwitch from "../ts/monitor/IntervalSwitch";
import { Container } from "../ts/container/Container";
import LocalConfigWrapper from "../ts/class/LocalConfigWrapper";
import Logger from "../ts/class/Logger";

const _drugCDMonitor = ref(false)
const drugCDMonitorLoop = ref(999999)

const localConfigWrapper = Container.factory(LocalConfigWrapper)
const logger = Container.factory(Logger)

onMounted(() => {
  _drugCDMonitor.value = !!drugCDMonitor.getId() && localConfigWrapper.config.monitorOn.includes('drugCDMonitor')
  drugCDMonitorLoop.value = localConfigWrapper.config.drugCDMonitorInterval

  watch([_drugCDMonitor, drugCDMonitorLoop], ([_drugCDMonitor, drugCDMonitorLoop]) => {
    logger.info('新变动', _drugCDMonitor, drugCDMonitorLoop)
    const monitorOn = localConfigWrapper.config.monitorOn
    if (_drugCDMonitor) {
      drugCDMonitor.setMs(drugCDMonitorLoop)
      drugCDMonitor.switcher(IntervalSwitch.ON)
      monitorOn.push('drugCDMonitor')
    } else {
      drugCDMonitor.switcher(IntervalSwitch.OFF)
      for (let i = 0; i < monitorOn.length; i++) {
        if (monitorOn[i] === 'drugCDMonitor') {
          monitorOn.splice(i, 1)
          break
        }
      }
    }
    localConfigWrapper.config.monitorOn = monitorOn
    localConfigWrapper.config.drugCDMonitorInterval = Number(drugCDMonitorLoop)
  })
})

</script>

<style scoped>
.form span.desc {
  width: 100%;
  color: #363636;
}
</style>
