<template>
  <GiPageLayout>
    <div class="system-backup-container">
      <!-- 备份概览 -->
      <a-card title="备份概览" class="mb-6">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic title="总备份数量" :value="backupStats.totalBackups" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="成功备份" :value="backupStats.successBackups" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="失败备份" :value="backupStats.failedBackups" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="备份总大小" :value="backupStats.totalSize" suffix="GB" />
          </a-col>
        </a-row>
      </a-card>

      <!-- 备份任务管理 -->
      <a-card title="备份任务管理" class="mb-6">
        <template #extra>
          <a-space>
            <a-button type="primary" @click="createBackupTask">
              <template #icon><icon-plus /></template>
              创建备份任务
            </a-button>
            <a-button @click="scheduleBackup">
              <template #icon><icon-schedule /></template>
              定时备份设置
            </a-button>
          </a-space>
        </template>

        <GiTable
          row-key="id"
          :data="backupTasks"
          :columns="taskColumns"
          :pagination="taskPagination"
          :loading="tasksLoading"
        >
          <!-- 备份类型 -->
          <template #backupType="{ record }">
            <a-tag :color="getBackupTypeColor(record.backupType)">
              {{ record.backupType }}
            </a-tag>
          </template>

          <!-- 任务状态 -->
          <template #status="{ record }">
            <a-space>
              <div 
                :class="getStatusDotClass(record.status)"
                class="status-dot"
              ></div>
              <a-tag :color="getTaskStatusColor(record.status)">
                {{ getTaskStatusText(record.status) }}
              </a-tag>
            </a-space>
          </template>

          <!-- 进度条 -->
          <template #progress="{ record }">
            <a-progress 
              v-if="record.status === 'running'"
              :percent="record.progress"
              size="small"
            />
            <span v-else>-</span>
          </template>

          <!-- 备份大小 -->
          <template #backupSize="{ record }">
            <span v-if="record.backupSize">{{ record.backupSize }} GB</span>
            <span v-else>-</span>
          </template>

          <!-- 操作 -->
          <template #taskAction="{ record }">
            <a-space>
              <a-link @click="viewTaskDetail(record)">详情</a-link>
              <a-link 
                @click="startBackup(record)" 
                v-if="record.status === 'stopped'"
              >
                开始
              </a-link>
              <a-link 
                @click="stopBackup(record)" 
                v-if="record.status === 'running'"
              >
                停止
              </a-link>
              <a-link @click="editTask(record)">编辑</a-link>
              <a-link @click="deleteTask(record)">删除</a-link>
            </a-space>
          </template>
        </GiTable>
      </a-card>

      <!-- 备份记录 -->
      <a-card title="备份记录">
        <template #extra>
          <a-space>
            <a-button @click="cleanupBackups">
              <template #icon><icon-delete /></template>
              清理过期备份
            </a-button>
            <a-button @click="restoreFromBackup">
              <template #icon><icon-redo /></template>
              恢复数据
            </a-button>
          </a-space>
        </template>

        <GiTable
          row-key="id"
          :data="backupRecords"
          :columns="recordColumns"
          :pagination="recordPagination"
          :loading="recordsLoading"
        >
          <!-- 备份类型 -->
          <template #recordBackupType="{ record }">
            <a-tag :color="getBackupTypeColor(record.backupType)">
              {{ record.backupType }}
            </a-tag>
          </template>

          <!-- 备份状态 -->
          <template #recordStatus="{ record }">
            <a-tag :color="getRecordStatusColor(record.status)">
              {{ getRecordStatusText(record.status) }}
            </a-tag>
          </template>

          <!-- 文件大小 -->
          <template #fileSize="{ record }">
            <span class="font-medium">{{ record.fileSize }}</span>
          </template>

          <!-- 耗时 -->
          <template #duration="{ record }">
            <span>{{ record.duration }}</span>
          </template>

          <!-- 操作 -->
          <template #recordAction="{ record }">
            <a-space>
              <a-link @click="downloadBackup(record)">下载</a-link>
              <a-link @click="restoreBackup(record)">恢复</a-link>
              <a-link @click="verifyBackup(record)">验证</a-link>
              <a-link @click="deleteBackup(record)">删除</a-link>
            </a-space>
          </template>
        </GiTable>
      </a-card>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 备份统计信息
const backupStats = reactive({
  totalBackups: 156,
  successBackups: 148,
  failedBackups: 8,
  totalSize: 2456.8
})

// 备份任务数据
const backupTasks = ref([
  {
    id: 1,
    taskName: '系统全量备份',
    backupType: '全量备份',
    targetPath: '/backup/system/full',
    schedule: '每天 02:00',
    status: 'running',
    progress: 65,
    backupSize: 125.6,
    lastRun: '2024-03-15 02:00:00',
    nextRun: '2024-03-16 02:00:00',
    operator: '系统自动'
  },
  {
    id: 2,
    taskName: '数据库增量备份',
    backupType: '增量备份',
    targetPath: '/backup/database/incremental',
    schedule: '每小时执行',
    status: 'stopped',
    progress: 0,
    backupSize: null,
    lastRun: '2024-03-15 01:00:00',
    nextRun: '2024-03-15 16:00:00',
    operator: '数据库管理员'
  },
  {
    id: 3,
    taskName: '用户文件备份',
    backupType: '差异备份',
    targetPath: '/backup/files/diff',
    schedule: '每周日 03:30',
    status: 'completed',
    progress: 100,
    backupSize: 89.2,
    lastRun: '2024-03-10 03:30:00',
    nextRun: '2024-03-17 03:30:00',
    operator: '文件管理员'
  }
])

// 备份记录数据
const backupRecords = ref([
  {
    id: 1,
    backupName: '系统全量备份_20240315',
    backupType: '全量备份',
    backupTime: '2024-03-15 02:00:00',
    completedTime: '2024-03-15 04:30:00',
    duration: '2小时30分钟',
    fileSize: '125.6 GB',
    filePath: '/backup/system/full/backup_20240315.tar.gz',
    status: 'success',
    operator: '系统自动'
  },
  {
    id: 2,
    backupName: '数据库增量备份_20240315',
    backupType: '增量备份',
    backupTime: '2024-03-15 01:00:00',
    completedTime: '2024-03-15 01:15:00',
    duration: '15分钟',
    fileSize: '2.3 GB',
    filePath: '/backup/database/incremental/inc_20240315.sql',
    status: 'success',
    operator: '数据库管理员'
  },
  {
    id: 3,
    backupName: '配置文件备份_20240314',
    backupType: '配置备份',
    backupTime: '2024-03-14 23:30:00',
    completedTime: '2024-03-14 23:35:00',
    duration: '5分钟',
    fileSize: '156 MB',
    filePath: '/backup/config/config_20240314.zip',
    status: 'success',
    operator: '系统管理员'
  },
  {
    id: 4,
    backupName: '应用数据备份_20240314',
    backupType: '应用备份',
    backupTime: '2024-03-14 22:00:00',
    completedTime: '',
    duration: '',
    fileSize: '',
    filePath: '',
    status: 'failed',
    operator: '应用管理员'
  }
])

// 任务表格列配置
const taskColumns: TableColumnData[] = [
  { title: '任务名称', dataIndex: 'taskName', width: 200 },
  { title: '备份类型', dataIndex: 'backupType', slotName: 'backupType', width: 120 },
  { title: '目标路径', dataIndex: 'targetPath', width: 200 },
  { title: '执行计划', dataIndex: 'schedule', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 120 },
  { title: '进度', dataIndex: 'progress', slotName: 'progress', width: 120 },
  { title: '备份大小', dataIndex: 'backupSize', slotName: 'backupSize', width: 100 },
  { title: '上次执行', dataIndex: 'lastRun', width: 160 },
  { title: '下次执行', dataIndex: 'nextRun', width: 160 },
  { title: '操作人员', dataIndex: 'operator', width: 120 },
  { title: '操作', slotName: 'taskAction', width: 200 }
]

// 记录表格列配置
const recordColumns: TableColumnData[] = [
  { title: '备份名称', dataIndex: 'backupName', width: 250 },
  { title: '备份类型', dataIndex: 'backupType', slotName: 'recordBackupType', width: 120 },
  { title: '开始时间', dataIndex: 'backupTime', width: 160 },
  { title: '完成时间', dataIndex: 'completedTime', width: 160 },
  { title: '耗时', dataIndex: 'duration', slotName: 'duration', width: 120 },
  { title: '文件大小', dataIndex: 'fileSize', slotName: 'fileSize', width: 100 },
  { title: '状态', dataIndex: 'status', slotName: 'recordStatus', width: 100 },
  { title: '操作人员', dataIndex: 'operator', width: 120 },
  { title: '操作', slotName: 'recordAction', width: 200 }
]

// 分页配置
const taskPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true
})

const recordPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 4,
  showTotal: true
})

const tasksLoading = ref(false)
const recordsLoading = ref(false)

// 获取备份类型颜色
const getBackupTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '全量备份': 'blue',
    '增量备份': 'green',
    '差异备份': 'orange',
    '配置备份': 'purple',
    '应用备份': 'cyan'
  }
  return colorMap[type] || 'gray'
}

// 获取任务状态颜色
const getTaskStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'running': 'blue',
    'stopped': 'gray',
    'completed': 'green',
    'failed': 'red'
  }
  return colorMap[status] || 'gray'
}

// 获取任务状态文本
const getTaskStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'running': '运行中',
    'stopped': '已停止',
    'completed': '已完成',
    'failed': '失败'
  }
  return textMap[status] || status
}

// 获取记录状态颜色
const getRecordStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'success': 'green',
    'failed': 'red',
    'partial': 'orange'
  }
  return colorMap[status] || 'gray'
}

// 获取记录状态文本
const getRecordStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'success': '成功',
    'failed': '失败',
    'partial': '部分成功'
  }
  return textMap[status] || status
}

// 获取状态点样式
const getStatusDotClass = (status: string) => {
  const classMap: Record<string, string> = {
    'running': 'running-dot',
    'stopped': 'stopped-dot',
    'completed': 'completed-dot',
    'failed': 'failed-dot'
  }
  return classMap[status] || 'stopped-dot'
}

// 操作方法
const createBackupTask = () => {
  Message.info('创建备份任务功能开发中...')
}

const scheduleBackup = () => {
  Message.info('定时备份设置功能开发中...')
}

const viewTaskDetail = (task: any) => {
  Message.info(`查看任务详情: ${task.taskName}`)
}

const startBackup = (task: any) => {
  Message.info(`开始备份: ${task.taskName}`)
}

const stopBackup = (task: any) => {
  Message.info(`停止备份: ${task.taskName}`)
}

const editTask = (task: any) => {
  Message.info(`编辑任务: ${task.taskName}`)
}

const deleteTask = (task: any) => {
  Message.info(`删除任务: ${task.taskName}`)
}

const cleanupBackups = () => {
  Message.info('清理过期备份功能开发中...')
}

const restoreFromBackup = () => {
  Message.info('恢复数据功能开发中...')
}

const downloadBackup = (record: any) => {
  Message.info(`下载备份: ${record.backupName}`)
}

const restoreBackup = (record: any) => {
  Message.info(`恢复备份: ${record.backupName}`)
}

const verifyBackup = (record: any) => {
  Message.info(`验证备份: ${record.backupName}`)
}

const deleteBackup = (record: any) => {
  Message.info(`删除备份: ${record.backupName}`)
}
</script>

<style scoped>
.system-backup-container {
  padding: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.running-dot {
  background-color: #1890ff;
  animation: pulse 1.5s infinite;
}

.stopped-dot {
  background-color: #d9d9d9;
}

.completed-dot {
  background-color: #52c41a;
}

.failed-dot {
  background-color: #ff4d4f;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
  }
}
</style> 