<template>
  <div v-if="currentTask" class="container">
    <div  class="task-info">
      <p class="task-name">当前任务: {{ currentTask.name }}</p>
      <p class="status-message">{{ statusMsg }}</p>
      <div class="progress-container">
        <progress :value="list.length" :max="sum" class="custom-progress"></progress>
        <span class="percentage">{{ (list.length / sum * 100).toFixed(2) }}%</span>
      </div>
      <button class="close-button" @click="closeTask">x</button>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import MqttClient from '@/mqtt/MqttClient';
import axios from 'axios';
import {ElMessage, ElMessageBox} from "element-plus";
import eventBus from "@/api/eventBus";
let props = defineProps({
  farmId:{
    type:[Number, String],
    required:true
  }
})

// 定义响应式状态
const currentTask = ref(null);
let list = ref([])
let sum = ref(100)
let statusMsg = ref('')

let mqttClient = null;

function onMqttMessage(topic, message) {
  console.log('收到MQTT消息:', topic, message);
  let data = JSON.parse(message)
  if(data.status === "0"){
    //待开始
    getTask(data.task_id)
    statusMsg.value = '待开始'
  }else if(data.status === "2"){
    statusMsg.value = '执行中'
    getTask(data.task_id, data.status)
  }else if(data.status === "5"){
    //已完成
    ElMessageBox.confirm(
        '任务已完成?',
        '提醒',
        {
          confirmButtonText: '确定',
          type: 'success',
        }
    ).then(() => {
      console.log('已完成');
      currentTask.value = false;
    }).catch(() => {
      console.log('取消执行任务');
    })
  }
}

function getTask(taskId,status) {
  //执行中
  VE_API.home.getSampleShowTime({taskId}).then((res)=>{
    currentTask.value = res.data.task
    sum.value = res.data.sum
    list.value = res.data.list
    if(status === '2'){
      changeShowStatus(list.value)
    }
  })
}

function changeShowStatus(list){
  eventBus.emit('farmFightTask:changeShowStatus',list)
}

function closeTask() {
  currentTask.value = null;
  list.value = [];
  sum.value = 100;
  statusMsg.value = '';
}

// 组件挂载时，检查无人机和任务状态
onMounted(() => {
  mqttClient = new MqttClient([`farm/fight/task/${props.farmId}`],onMqttMessage);
  mqttClient.connect();
});

onUnmounted(() => {
  if(mqttClient) {
    mqttClient.unsubscribe();
  }
});
</script>

<style scoped>
.container {
  width: 100%; /* 调整宽度 */
  max-width: 400px; /* 添加最大宽度 */
  margin: 20px auto; /* 水平居中并添加上下边距 */
  background: #f4f4f4; /* 调整背景颜色为灰色系 */
  padding: 20px; /* 添加内边距 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.task-info {
  text-align: center; /* 文本居中 */
}

.task-name {
  font-size: 1.5em; /* 调整字体大小 */
  margin-bottom: 10px; /* 添加下边距 */
  color: #333; /* 调整字体颜色 */
}

.status-message {
  font-size: 1.2em; /* 调整字体大小 */
  margin-bottom: 20px; /* 添加下边距 */
  color: #666; /* 调整字体颜色 */
}

.progress-container {
  display: flex;
  justify-content: space-between; /* 调整子元素间距 */
  align-items: center;
}

.custom-progress {
  width: 80%; /* 调整进度条宽度 */
  height: 10px; /* 调整进度条高度 */
  appearance: none; /* 移除默认样式 */
  background-color: #ddd;
  border-radius: 5px;
}

.custom-progress::-webkit-progress-bar {
  background-color: #ddd;
  border-radius: 5px;
}

.custom-progress::-webkit-progress-value {
  background-color: #888; /* 调整进度条颜色为灰色系 */
  border-radius: 5px;
}

.custom-progress::-moz-progress-bar {
  background-color: #888; /* 调整进度条颜色为灰色系 */
  border-radius: 5px;
}

.percentage {
  font-size: 1em; /* 调整字体大小 */
  color: #555; /* 调整字体颜色 */
}

.close-button {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 调整关闭按钮位置 */
  right: 10px; /* 调整关闭按钮位置 */
  background-color: #ddd; /* 调整背景颜色 */
  border: none; /* 去掉边框 */
  border-radius: 50%; /* 圆形按钮 */
  width: 24px; /* 调整按钮大小 */
  height: 24px; /* 调整按钮大小 */
  font-size: 1em; /* 调整字体大小 */
  color: #555; /* 调整字体颜色 */
  cursor: pointer; /* 改变鼠标悬停样式 */
}

.close-button:hover {
  background-color: #ccc; /* 鼠标悬停时的背景颜色 */
  color: #333; /* 鼠标悬停时的字体颜色 */
}
</style>
