<script lang="ts">
import { defineComponent } from "vue";
import { useImportTaskStore } from "@/store/importTasks";

export default defineComponent({
  name: "ImportTaskIndicator",
  setup() {
    const taskStore = useImportTaskStore();

    const statusIcon = (status: string) => {
      if (status === "pending" || status === "uploading" || status === "processing") return "loading";
      if (status === "success") return "circle-check";
      return "circle-close";
    };

    const statusClass = (status: string) => {
      if (status === "success") return "task-success";
      if (status === "error") return "task-error";
      return "task-running";
    };

    const progressLabel = (task: any) => {
      if (task.totalRows > 0) {
        const pct = Math.round((task.processedRows / task.totalRows) * 100);
        return ` ${pct}%`;
      }
      return "";
    };

    const formatTime = (ts: number) => {
      const d = new Date(ts);
      return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`;
    };

    return { taskStore, statusIcon, statusClass, formatTime, progressLabel };
  }
});
</script>
<template>
  <div class="rr-header-right-items rr-header-action">
    <el-popover placement="bottom" :width="360" trigger="click" popper-class="import-task-popover">
      <template #reference>
        <div class="import-task-trigger">
          <template v-if="taskStore.hasActiveTasks">
            <el-badge :value="taskStore.activeTasks.length" :max="99" class="task-badge">
              <el-icon class="is-loading"><refresh-right /></el-icon>
            </el-badge>
          </template>
          <template v-else>
            <el-icon class="task-idle-icon"><bell /></el-icon>
          </template>
        </div>
      </template>
      <div class="import-task-panel">
        <div class="panel-header">
          <span>导入任务</span>
          <el-button size="small" text @click="taskStore.clearCompleted()">清除已完成</el-button>
        </div>
        <div class="panel-body">
          <div v-for="task in taskStore.recentTasks" :key="task.id" class="task-item">
            <el-icon :class="[statusClass(task.status), { 'is-loading': task.status === 'uploading' || task.status === 'processing' }]">
              <component :is="statusIcon(task.status)" />
            </el-icon>
            <div class="task-info">
              <span class="task-name">{{ task.fileName }}</span>
              <span class="task-message">{{ task.message }}</span>
            </div>
            <span v-if="task.status === 'processing' && task.totalRows > 0" class="task-progress">{{ Math.round((task.processedRows / task.totalRows) * 100) }}%</span>
            <span class="task-time">{{ formatTime(task.createdAt) }}</span>
            <el-button v-if="task.status === 'success' || task.status === 'error'" size="small" text @click="taskStore.removeTask(task.id)">
              <el-icon><close /></el-icon>
            </el-button>
          </div>
          <div v-if="taskStore.recentTasks.length === 0" class="panel-empty">暂无任务</div>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<style scoped>
.import-task-trigger {
  padding: 0 12px;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.task-badge {
  line-height: normal;
}
.task-idle-icon {
  color: #909399;
  font-size: 18px;
}
.import-task-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  font-size: 14px;
}
.import-task-panel .panel-body {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
}
.import-task-panel .task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid #f2f2f2;
}
.import-task-panel .task-item:last-child {
  border-bottom: none;
}
.import-task-panel .task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.import-task-panel .task-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-task-panel .task-message {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-task-panel .task-time {
  font-size: 12px;
  color: #c0c4cc;
  white-space: nowrap;
  flex-shrink: 0;
}
.task-success { color: #67c23a; }
.task-error { color: #f56c6c; }
.task-running { color: #409eff; }
.panel-empty {
  text-align: center;
  color: #c0c4cc;
  padding: 24px 0;
  font-size: 13px;
}
</style>
