<template>
  <div class="about-page">
    <a-card title="关于软件">
      <div class="about-content">
        <!-- 软件信息 -->
        <div class="software-info">
          <div class="logo-section">
            <a-icon type="gateway" :style="{ fontSize: '64px', color: '#1890ff' }" />
            <h2 class="software-name">配线架配置系统</h2>
            <p class="software-version">版本：v1.0.0</p>
          </div>
          
          <div class="description-section">
            <h3>系统简介</h3>
            <p class="description">
              配线架配置系统是一款专为网络设备管理设计的综合配置工具，提供串口配置、MQTT通信配置和实时状态监控等功能。
              系统支持24口网络配线架的连接状态实时监控，并提供数据转发配置，实现不同协议间的数据转换。
            </p>
          </div>
        </div>
        
        <!-- 功能特性 -->
        <div class="features-section">
          <h3>功能特性</h3>
          <a-row :gutter="[24, 16]">
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="sync" :style="{ fontSize: '32px', color: '#52c41a', marginBottom: '16px' }" />
                <h4>串口配置</h4>
                <p>支持多种串口参数配置，包括端口选择、波特率设置等</p>
              </a-card>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="wifi" :style="{ fontSize: '32px', color: '#1890ff', marginBottom: '16px' }" />
                <h4>MQTT通信</h4>
                <p>提供MQTT客户端配置，支持订阅发布消息</p>
              </a-card>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="area-chart" :style="{ fontSize: '32px', color: '#fa8c16', marginBottom: '16px' }" />
                <h4>实时监控</h4>
                <p>实时显示24口配线架连接状态，支持详细信息查看</p>
              </a-card>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="swap-right" :style="{ fontSize: '32px', color: '#722ed1', marginBottom: '16px' }" />
                <h4>数据转发</h4>
                <p>支持串口数据与MQTT消息之间的相互转发</p>
              </a-card>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="database" :style="{ fontSize: '32px', color: '#eb2f96', marginBottom: '16px' }" />
                <h4>数据存储</h4>
                <p>记录通信数据，支持历史数据查看和分析</p>
              </a-card>
            </a-col>
            <a-col :xs="24" :sm="12" :md="8">
              <a-card hoverable :body-style="{ padding: '20px' }">
                <a-icon type="mobile" :style="{ fontSize: '32px', color: '#f5222d', marginBottom: '16px' }" />
                <h4>响应式设计</h4>
                <p>适配不同屏幕尺寸，支持移动端访问</p>
              </a-card>
            </a-col>
          </a-row>
        </div>
        
        <!-- 技术栈 -->
        <div class="tech-stack-section">
          <h3>技术栈</h3>
          <div class="tech-stack">
            <a-tag color="blue">Vue 3</a-tag>
            <a-tag color="green">Ant Design Vue</a-tag>
            <a-tag color="orange">Pinia</a-tag>
            <a-tag color="purple">Vue Router</a-tag>
            <a-tag color="red">G2</a-tag>
            <a-tag color="cyan">Socket.io</a-tag>
            <a-tag color="lime">Axios</a-tag>
            <a-tag color="magenta">Python</a-tag>
            <a-tag color="volcano">Flask</a-tag>
            <a-tag color="geekblue">Docker</a-tag>
          </div>
        </div>
        
        <!-- 许可证信息 -->
        <div class="license-section">
          <h3>许可证信息</h3>
          <p class="license-info">
            © {{ new Date().getFullYear() }} 配线架配置系统 | 版权所有
          </p>
          <p class="license-info">
            本软件仅供内部使用，未经授权不得用于商业用途。
          </p>
        </div>
        
        <!-- 联系信息 -->
        <div class="contact-section">
          <h3>联系我们</h3>
          <a-descriptions column="1">
            <a-descriptions-item label="开发团队">网络设备管理小组</a-descriptions-item>
            <a-descriptions-item label="技术支持">support@network-devices.example.com</a-descriptions-item>
            <a-descriptions-item label="更新日期">2024年</a-descriptions-item>
          </a-descriptions>
        </div>

        <!-- 系统操作 -->
        <div class="system-operations">
          <h3>系统操作</h3>
          <a-space>
            <a-button type="primary" danger :loading="isRebooting" @click="rebootDTU">
              <template #icon><PoweroffOutlined /></template>
              重启DTU
            </a-button>
          </a-space>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { ReloadOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
import apiService from '../api/apiService'

const isRebooting = ref(false)

const rebootDTU = async () => {
  Modal.confirm({
    title: '确认重启DTU',
    content: '确定要发送重启命令到DTU吗？这将中断当前的通信。',
    okText: '确认重启',
    cancelText: '取消',
    onOk: async () => {
      try {
        isRebooting.value = true
        const res = await apiService.dtu.sendControl({
          command: 'REBOOT',
          params: {}
        })
        if (res.data.success) {
          message.success('重启命令已发送')
        } else {
          message.error(res.data.message || '重启失败')
        }
      } catch (error) {
        message.error('重启失败: ' + (error.response?.data?.message || error.message))
      } finally {
        isRebooting.value = false
      }
    }
  })
}


</script>

<style scoped>
.about-page {
  width: 100%;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 软件信息部分 */
.software-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.software-name {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #1890ff;
}

.software-version {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.description-section {
  max-width: 800px;
}

.description-section h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.description {
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

/* 功能特性部分 */
.features-section h3 {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* 技术栈部分 */
.tech-stack-section h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 许可证和联系信息部分 */
.license-section, .contact-section, .system-operations {
  border-top: 1px solid #f0f0f0;
  padding-top: 24px;
}

.system-operations h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.license-section h3, .contact-section h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.license-info {
  line-height: 1.6;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-content {
    gap: 24px;
  }
  
  .software-name {
    font-size: 24px;
  }
  
  .description {
    font-size: 14px;
  }
}
</style>