<template>
  <el-popover
    placement="bottom"
    :width="270"
    trigger="click"
  >
    <template #reference>
      <el-button size="small">
        <el-icon><Setting /></el-icon>
        调度器状态
      </el-button>
    </template>
    
    <div class="schedule-state">
      <div class="state-title">调度器状态: {{ state.running ? '运行中' : '已停止' }}</div>
      
      <div class="state-actions">
        <el-button 
          v-if="!state.running" 
          type="success" 
          size="small"
          @click="startScheduler"
        >
          启动调度器
        </el-button>
        
        <el-button 
          v-if="state.running" 
          type="danger" 
          size="small"
          @click="confirmShutdown"
        >
          关闭调度器
        </el-button>
        
        <el-button 
          v-if="state.running && !state.paused" 
          type="warning" 
          size="small"
          @click="pauseScheduler"
        >
          暂停调度器
        </el-button>
        
        <el-button 
          v-if="state.running && state.paused" 
          type="primary" 
          size="small"
          @click="resumeScheduler"
        >
          恢复调度器
        </el-button>
      </div>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import * as scheduleApi from '@/api/schedule'

const emit = defineEmits(['success'])

const state = reactive({
  running: false,
  paused: false
})

const getSchedulerState = async () => {
  try {
    const res = await scheduleApi.getScheduleState()
    if (res.code === 0) {
      state.running = res.data.running
      state.paused = res.data.paused
    }
  } catch (error) {
    console.error('获取调度器状态失败:', error)
  }
}

const startScheduler = async () => {
  try {
    const res = await scheduleApi.startSchedule()
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '启动成功!'
      })
      await getSchedulerState()
      emit('success')
    }
  } catch (error) {
    console.error('启动调度器失败:', error)
  }
}

const confirmShutdown = () => {
  ElMessageBox.confirm('关闭调度器后将停止执行所有定时任务, 是否确认?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await shutdownScheduler()
    })
    .catch(() => {
      // 用户取消操作
    })
}

const shutdownScheduler = async () => {
  try {
    const res = await scheduleApi.shutdownSchedule()
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '关闭成功!'
      })
      await getSchedulerState()
      emit('success')
    }
  } catch (error) {
    console.error('关闭调度器失败:', error)
  }
}

const pauseScheduler = async () => {
  try {
    const res = await scheduleApi.pauseSchedule()
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '暂停成功!'
      })
      await getSchedulerState()
      emit('success')
    }
  } catch (error) {
    console.error('暂停调度器失败:', error)
  }
}

const resumeScheduler = async () => {
  try {
    const res = await scheduleApi.resumeSchedule()
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '恢复成功!'
      })
      await getSchedulerState()
      emit('success')
    }
  } catch (error) {
    console.error('恢复调度器失败:', error)
  }
}

onMounted(() => {
  getSchedulerState()
})
</script>

<style lang="scss" scoped>
.schedule-state {
  .state-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
  }
  
  .state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>
