<template>
  <GiPageLayout>
    <div class="version-upgrade-container">
      <!-- 当前系统版本信息 -->
      <a-card title="当前系统版本信息" class="mb-6">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="系统名称">风电智能管理系统</a-descriptions-item>
          <a-descriptions-item label="当前版本">v2.3.1</a-descriptions-item>
          <a-descriptions-item label="发布日期">2024-02-15</a-descriptions-item>
          <a-descriptions-item label="系统环境">生产环境</a-descriptions-item>
          <a-descriptions-item label="数据库版本">MySQL 8.0.35</a-descriptions-item>
          <a-descriptions-item label="运行时间">45天</a-descriptions-item>
          <a-descriptions-item label="许可证状态">
            <a-tag color="green">已激活</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="技术支持">
            <a-tag color="blue">有效至 2024-12-31</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 版本更新提醒 -->
      <a-card title="版本更新提醒" class="mb-6">
        <template #extra>
          <a-space>
            <a-button @click="checkForUpdates">
              <template #icon><icon-refresh /></template>
              检查更新
            </a-button>
            <a-button type="primary" @click="configureAlerts">
              <template #icon><icon-settings /></template>
              配置提醒
            </a-button>
          </a-space>
        </template>

        <div v-if="latestVersion">
          <a-alert
            type="info"
            :title="`发现新版本 ${latestVersion.version}`"
            :description="latestVersion.description"
            show-icon
            closable
            class="mb-4"
          >
            <template #action>
              <a-space>
                <a-button size="small" @click="viewChangelog">查看更新日志</a-button>
                <a-button size="small" type="primary" @click="startUpgrade">立即升级</a-button>
              </a-space>
            </template>
          </a-alert>
        </div>

        <div v-else>
          <a-empty description="当前已是最新版本" />
        </div>
      </a-card>

      <!-- 版本历史记录 -->
      <a-card title="版本历史记录" class="mb-6">
        <GiTable
          row-key="id"
          :data="versionHistory"
          :columns="versionColumns"
          :pagination="false"
        >
          <!-- 版本状态 -->
          <template #status="{ record }">
            <a-tag :color="getVersionStatusColor(record.status)">
              {{ getVersionStatusText(record.status) }}
            </a-tag>
          </template>

          <!-- 版本类型 -->
          <template #versionType="{ record }">
            <a-tag :color="getVersionTypeColor(record.versionType)">
              {{ record.versionType }}
            </a-tag>
          </template>

          <!-- 操作 -->
          <template #action="{ record }">
            <a-space>
              <a-link @click="viewVersionDetail(record)">详情</a-link>
              <a-link @click="downloadVersion(record)">下载</a-link>
              <a-link
                v-if="record.status === 'installed' && record.id !== currentVersionId"
                @click="rollbackVersion(record)"
              >
                回滚
              </a-link>
            </a-space>
          </template>
        </GiTable>
      </a-card>

      <!-- 升级配置 -->
      <a-card title="升级配置">
        <a-form :model="upgradeConfig" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="自动检查更新">
                <a-switch v-model="upgradeConfig.autoCheck" />
                <div class="text-gray-500 text-sm mt-1">启用后系统将定期自动检查版本更新</div>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="检查频率">
                <a-select v-model="upgradeConfig.checkFrequency" :disabled="!upgradeConfig.autoCheck">
                  <a-option value="daily">每日</a-option>
                  <a-option value="weekly">每周</a-option>
                  <a-option value="monthly">每月</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="升级提醒方式">
                <a-checkbox-group v-model="upgradeConfig.notificationMethods">
                  <a-checkbox value="email">邮件通知</a-checkbox>
                  <a-checkbox value="sms">短信通知</a-checkbox>
                  <a-checkbox value="system">系统通知</a-checkbox>
                </a-checkbox-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="维护窗口">
                <a-time-range-picker
                  v-model="upgradeConfig.maintenanceWindow"
                  format="HH:mm"
                />
                <div class="text-gray-500 text-sm mt-1">系统升级的推荐时间窗口</div>
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item>
            <a-space>
              <a-button type="primary" @click="saveUpgradeConfig">保存配置</a-button>
              <a-button @click="resetUpgradeConfig">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </GiPageLayout>
</template>

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

// 当前版本ID
const currentVersionId = ref(3)

// 最新版本信息
const latestVersion = ref({
  version: 'v2.4.0',
  description: '新增项目管理模块，优化系统性能，修复已知bug',
  releaseDate: '2024-03-20',
  size: '156.8 MB',
})

// 版本历史记录
const versionHistory = ref([
  {
    id: 1,
    version: 'v2.1.0',
    versionType: '功能版本',
    releaseDate: '2023-12-15',
    installDate: '2023-12-20',
    status: 'archived',
    description: '初始版本发布，包含基础功能模块',
    size: '128.5 MB',
  },
  {
    id: 2,
    version: 'v2.2.0',
    versionType: '功能版本',
    releaseDate: '2024-01-15',
    installDate: '2024-01-20',
    status: 'archived',
    description: '新增用户管理和权限控制功能',
    size: '142.3 MB',
  },
  {
    id: 3,
    version: 'v2.3.1',
    versionType: '补丁版本',
    releaseDate: '2024-02-15',
    installDate: '2024-02-20',
    status: 'current',
    description: '修复安全漏洞，优化界面交互',
    size: '145.7 MB',
  },
  {
    id: 4,
    version: 'v2.4.0',
    versionType: '功能版本',
    releaseDate: '2024-03-20',
    installDate: '',
    status: 'available',
    description: '新增项目管理模块，优化系统性能',
    size: '156.8 MB',
  },
])

// 版本表格列配置
const versionColumns: TableColumnData[] = [
  { title: '版本号', dataIndex: 'version', width: 120 },
  { title: '版本类型', dataIndex: 'versionType', slotName: 'versionType', width: 120 },
  { title: '发布日期', dataIndex: 'releaseDate', width: 120 },
  { title: '安装日期', dataIndex: 'installDate', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '文件大小', dataIndex: 'size', width: 100 },
  { title: '描述', dataIndex: 'description', width: 300, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 200 },
]

// 升级配置
const upgradeConfig = reactive({
  autoCheck: true,
  checkFrequency: 'weekly',
  notificationMethods: ['email', 'system'],
  maintenanceWindow: ['02:00', '06:00'],
})

// 获取版本状态颜色
const getVersionStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    current: 'green',
    available: 'blue',
    archived: 'gray',
    deprecated: 'red',
  }
  return colorMap[status] || 'gray'
}

// 获取版本状态文本
const getVersionStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    current: '当前版本',
    available: '可升级',
    archived: '已归档',
    deprecated: '已弃用',
  }
  return textMap[status] || status
}

// 获取版本类型颜色
const getVersionTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    主要版本: 'red',
    功能版本: 'blue',
    补丁版本: 'green',
    热修复: 'orange',
  }
  return colorMap[type] || 'gray'
}

// 操作方法
const checkForUpdates = () => {
  Message.info('正在检查更新...')
  setTimeout(() => {
    Message.success('检查完成，发现新版本')
  }, 2000)
}

const configureAlerts = () => {
  Message.info('配置提醒功能开发中...')
}

const viewChangelog = () => {
  Message.info('查看更新日志功能开发中...')
}

const startUpgrade = () => {
  Message.info('立即升级功能开发中...')
}

const viewVersionDetail = (version: any) => {
  Message.info(`查看版本详情: ${version.version}`)
}

const downloadVersion = (version: any) => {
  Message.info(`下载版本: ${version.version}`)
}

const rollbackVersion = (version: any) => {
  Message.info(`回滚到版本: ${version.version}`)
}

const saveUpgradeConfig = () => {
  Message.success('升级配置已保存')
}

const resetUpgradeConfig = () => {
  Object.assign(upgradeConfig, {
    autoCheck: true,
    checkFrequency: 'weekly',
    notificationMethods: ['email', 'system'],
    maintenanceWindow: ['02:00', '06:00'],
  })
  Message.success('升级配置已重置')
}
</script>

<style scoped>
.version-upgrade-container {
  padding: 16px;
}

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

.mb-4 {
  margin-bottom: 16px;
}

.text-gray-500 {
  color: #6b7280;
}

.text-sm {
  font-size: 14px;
}

.mt-1 {
  margin-top: 4px;
}
</style>
