<template>
  <div class="footer-container">
    <div class="footer-content">
      <div class="footer-section">
        <div class="footer-logo">
          <span class="company-name">商户线上经营平台</span>
        </div>
        <p class="footer-description">为商户提供全方位的线上经营解决方案，助力商业成功</p>
      </div>

      <div class="footer-section">
        <h4 class="footer-title">产品服务</h4>
        <ul class="footer-links">
          <li><router-link to="/merchant/order/OrderManager">订单管理</router-link></li>
          <li><router-link to="/merchant/products/list">商品管理</router-link></li>
          <li><router-link to="/merchant/stores/store-info">门店管理</router-link></li>
        </ul>
      </div>

      <div class="footer-section">
        <h4 class="footer-title">联系我们</h4>
        <ul class="footer-contact">
          <li>
            <el-icon><Phone /></el-icon>
            <span>400-123-4567</span>
          </li>
          <li>
            <el-icon><Message /></el-icon>
            <span>service@platform.com</span>
          </li>
          <li>
            <el-icon><Location /></el-icon>
            <span>北京市朝阳区xxx大厦</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="footer-bottom-content">
        <div class="copyright">
          <span>&copy; 2025 商户线上经营平台. 保留所有权利</span>
        </div>
        <div class="footer-meta">
          <span class="divider">|</span>
          <span>当前用户: {{ currentUser || '未登录' }}</span>
          <span class="divider">|</span>
          <span>最后更新: {{ currentTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Phone, Message, Location } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 定义账户信息接口
interface UserInfo {
  accountId: number
  accountName?: string
  accountType?: string
  accountPhone?: string
}

// 定义响应接口
interface AccountResponse {
  code: number
  message: string
  data: UserInfo
}

// StorageManager 类型定义
interface StorageManager {
  getUserInfo: () => UserInfo | null
}

// 假设 StorageManager 已在全局定义，这里提供本地实现
const StorageManager: StorageManager = {
  getUserInfo: (): UserInfo | null => {
    const userInfoStr = localStorage.getItem('userInfo')
    if (userInfoStr) {
      try {
        return JSON.parse(userInfoStr)
      } catch (error) {
        console.error('解析用户信息失败:', error)
        return null
      }
    }
    return null
  }
}

// 获取账户ID
const getAccountId = (): number | null => {
  const userInfo = StorageManager.getUserInfo()
  return userInfo ? userInfo.accountId : null
}

// 响应式数据
const currentUser = ref<string>('加载中...')
const currentTime = ref<string>('')
let timeInterval: number | undefined

// axios 配置
const apiClient = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 获取用户信息
const fetchUserInfo = async () => {
  const accountId = getAccountId()
  
  if (!accountId) {
    currentUser.value = '未登录'
    return
  }

  try {
    // 根据API文档，使用分店管理接口获取账户信息
    // 注意：根据实体类设计，Account表包含账户信息
    const response = await apiClient.get<AccountResponse>(`/branch/branch/by-boss/${accountId}`)
    
    if (response.data.code === 200) {
      // 首先尝试从本地存储获取用户名
      const localUserInfo = StorageManager.getUserInfo()
      if (localUserInfo && localUserInfo.accountName) {
        currentUser.value = localUserInfo.accountName
      } else {
        // 如果本地没有，尝试从响应中获取
        // 注意：这个API可能返回的是分店列表，需要特殊处理
        currentUser.value = `用户ID: ${accountId}`
      }
    } else {
      // 如果分店接口失败，尝试直接显示账户ID
      currentUser.value = `用户ID: ${accountId}`
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    
    // 尝试从本地存储获取用户信息
    const localUserInfo = StorageManager.getUserInfo()
    if (localUserInfo && localUserInfo.accountName) {
      currentUser.value = localUserInfo.accountName
    } else if (localUserInfo) {
      currentUser.value = `用户ID: ${accountId}`
    } else {
      currentUser.value = '获取失败'
    }
  }
}

// 组件挂载时执行
onMounted(async () => {
  // 更新时间
  updateTime()
  // 每分钟更新一次时间
  timeInterval = window.setInterval(updateTime, 60000)
  
  // 获取用户信息
  await fetchUserInfo()
})

// 组件卸载时清理
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.footer-container {
  background-color: #f8f9fa;
  border-top: 1px solid #e6e6e6;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

/* Logo 区域 */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.company-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  letter-spacing: 1px;
}

.footer-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* 标题样式 */
.footer-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 16px 0;
}

/* 链接列表和联系方式列表基础样式 */
.footer-links,
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 链接列表 */
.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #606266;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #409eff;
}

/* 联系方式 */
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #606266;
  font-size: 14px;
}

.footer-contact .el-icon {
  color: #909399;
  font-size: 16px;
}

/* 底部区域 */
.footer-bottom {
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  padding: 16px 0;
}

.footer-bottom-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  color: #909399;
  font-size: 14px;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 12px;
}

.divider {
  color: #d3d4d6;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 15px;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 0 15px;
  }

  .footer-meta {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .company-name {
    font-size: 14px;
  }
}
</style>
