<template>
  <div class="app-download-page">
    <el-card class="download-card">
<!--      <div class="app-header">
        <div class="app-logo-placeholder">
          <i class="el-icon-mobile"></i>
        </div>
        <h1>{{ downloadInfo.appName }}</h1>
        <p class="app-description">{{ downloadInfo.appDescription }}</p>
      </div>-->

      <div class="download-section">
        <h2>立即下载</h2>
        <div class="download-buttons">
          <el-button type="primary" class="download-btn android-btn" @click="downloadAndroid" :loading="loading.android">
            <i class="el-icon-mobile"></i>
            Android下载
          </el-button>
          <el-button type="success" class="download-btn ios-btn" @click="downloadIOS" :loading="loading.ios">
            <i class="el-icon-apple"></i>
            iOS下载
          </el-button>
        </div>
        <div
          style="
            margin-top: 15px;
            padding: 12px;
            background-color: #fffbe6;
            border: 1px solid #ffe58f;
            border-radius: 4px;
            text-align: center;
            font-size: 13px;
            line-height: 1.5;
            color: #8c8c8c;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
          "
        >
          <p>我已知晓内测应用的来源，并同意自行承担下载此APP所带来的一切风险</p>
          <p>应用仅供内部测试，请谨慎辨别下载</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { downloadAppIosUrl, getMaxNewAppVersion } from '@/api/system/business/versionManagement';
// 下载信息
import request from '@/utils/request';
const downloadInfo = ref({
  androidUrl: '',
  iosUrl: '',
  appName: '超级应用',
  appDescription: '一款功能强大、界面美观的移动应用程序，为您提供便捷的服务体验'
});

// 加载状态
const loading = ref({
  android: false,
  ios: false
});

// 获取下载信息
const fetchDownloadInfo = async () => {
  try {
    // 获取版本信息
    const versionResponse = await getMaxNewAppVersion();
    downloadInfo.value = {
      ...downloadInfo.value,
      ...versionResponse.data
    };
  } catch (error) {
    console.error('获取下载信息失败:', error);
    // 使用默认值
  }
};

// Android下载
const downloadAndroid = () => {
  if (downloadInfo.value.androidUrl) {
    loading.value.android = true;
    window.open(downloadInfo.value.androidUrl, '_blank');
    setTimeout(() => {
      loading.value.android = false;
    }, 1000);
  }
};

// iOS下载
const downloadIOS = () => {
  if (downloadInfo.value.iosUrl) {
    loading.value.ios = true;
    window.open(downloadInfo.value.iosUrl, '_blank');
    setTimeout(() => {
      loading.value.ios = false;
    }, 1000);
  }
};

onMounted(() => {
  fetchDownloadInfo();
});
</script>

<style scoped>
.app-download-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.download-card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-header {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.app-logo-placeholder {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.app-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.app-description {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.download-section {
  padding: 30px 0;
  text-align: center;
}

.download-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #333;
}

.download-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.download-btn {
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 50px;
}

.android-btn {
  background-color: #3ddc84;
  border-color: #3ddc84;
}

.android-btn:hover {
  background-color: #2fc973;
  border-color: #2fc973;
}

.ios-btn {
  background-color: #000;
  border-color: #000;
}

.ios-btn:hover {
  background-color: #333;
  border-color: #333;
}

@media (max-width: 768px) {
  .app-download-page {
    padding: 10px;
  }

  .download-buttons {
    flex-direction: column;
    align-items: center;
  }

  .download-btn {
    width: 80%;
  }
}
</style>
