<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// Form data
const projectForm = ref({
  projectSale: '',
  deployer: '',
  orderTime: '',
  serverPassword: '',
  projectOverview: '',
})

// Handlers
function handleDownload(_type: string) {
  ElMessage.info('下载功能开发中，敬请期待')
}

function handleAuthUpload(_file: any) {
  ElMessage.info('授权文件上传功能开发中，敬请期待')
  return false
}

function handleDeployUpload(_file: any) {
  ElMessage.info('部署视图上传功能开发中，敬请期待')
  return false
}

function handleCheckUpload(_file: any) {
  ElMessage.info('自检文档上传功能开发中，敬请期待')
  return false
}

function handleSaveProject() {
  ElMessage.info('项目信息保存功能开发中，敬请期待')
}
</script>

<template>
  <div class="page-authorization">
    <div class="section-head">
      <h1 class="section-title">🔑 服务授权</h1>
    </div>

    <div class="steps-container">
      <!-- Step 1: 申请服务授权 -->
      <el-card class="step-card">
        <div class="step-number">1</div>
        <div class="step-title">申请服务授权</div>
        <div class="step-actions">
          <el-button @click="handleDownload('activation')">📥 下载激活文件</el-button>
          <el-button type="primary">📤 上传授权文件</el-button>
        </div>
        <el-upload
          ref="authUploadRef"
          class="upload-area"
          drag
          :auto-upload="false"
          :show-file-list="false"
          accept=".lic,.key,.dat"
          :on-change="handleAuthUpload"
        >
          <div class="upload-icon">📁</div>
          <div class="upload-text">点击或拖拽上传授权文件</div>
          <div class="upload-hint">支持 .lic / .key / .dat 格式</div>
        </el-upload>
        <div class="step-desc">
          下载激活文件后发送给厂商获取授权，收到授权文件后上传即可完成授权申请。
        </div>
      </el-card>

      <!-- Step 2: 填写项目信息 -->
      <el-card class="step-card">
        <div class="step-number">2</div>
        <div class="step-title">填写项目信息</div>
        <el-form :model="projectForm" label-position="top">
          <el-form-item label="项目销售" required>
            <el-input v-model="projectForm.projectSale" placeholder="请输入项目的销售" />
          </el-form-item>
          <el-form-item label="部署人员" required>
            <el-input v-model="projectForm.deployer" placeholder="请输入项目部署或更新人员" />
          </el-form-item>
          <el-form-item label="下单时间" required>
            <el-date-picker
              v-model="projectForm.orderTime"
              type="datetime"
              placeholder="请选择下单时间"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="服务器密码" required>
            <el-input
              v-model="projectForm.serverPassword"
              type="password"
              placeholder="请输入服务器密码"
              show-password
            />
          </el-form-item>
          <el-form-item label="项目概述" required>
            <el-input
              v-model="projectForm.projectOverview"
              type="textarea"
              :rows="3"
              placeholder="请输入项目概述"
            />
          </el-form-item>
          <el-button type="primary" @click="handleSaveProject">💾 保存</el-button>
        </el-form>
      </el-card>

      <!-- Step 3: 部署视图 -->
      <el-card class="step-card">
        <div class="step-number">3</div>
        <div class="step-title">填写并提交部署视图</div>
        <div class="step-actions">
          <el-button @click="handleDownload('deploy-view')">📥 下载部署视图</el-button>
        </div>
        <el-upload
          class="upload-area"
          drag
          :auto-upload="false"
          :show-file-list="false"
          accept=".xlsx,.xls,.pdf"
          :on-change="handleDeployUpload"
        >
          <div class="upload-icon">📄</div>
          <div class="upload-text">点击上传已填写的部署视图</div>
          <div class="upload-hint">支持 .xlsx / .xls / .pdf 格式</div>
        </el-upload>
        <div class="step-desc">
          下载部署视图模板，填写后上传提交。
        </div>
      </el-card>

      <!-- Step 4: 自检文档 -->
      <el-card class="step-card">
        <div class="step-number">4</div>
        <div class="step-title">填写并提交自检文档</div>
        <div class="step-actions">
          <el-button @click="handleDownload('self-check')">📥 下载自检文档</el-button>
        </div>
        <el-upload
          class="upload-area"
          drag
          :auto-upload="false"
          :show-file-list="false"
          accept=".docx,.doc,.pdf"
          :on-change="handleCheckUpload"
        >
          <div class="upload-icon">📋</div>
          <div class="upload-text">点击上传已填写的自检文档</div>
          <div class="upload-hint">支持 .docx / .doc / .pdf 格式</div>
        </el-upload>
        <div class="step-desc">
          下载自检文档模板，填写后上传提交。
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-authorization {
  padding: 0 0 40px;
}

.section-head {
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: $gray-900;
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.step-card {
  position: relative;
  border-radius: 12px;

  :deep(.el-card__body) {
    padding: 24px;
  }
}

.step-number {
  position: absolute;
  top: -12px;
  left: 20px;
  background: $primary;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.step-title {
  font-size: 16px;
  font-weight: 700;
  color: $gray-900;
  margin-bottom: 16px;
  padding-top: 8px;
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.step-desc {
  font-size: 13px;
  color: $gray-500;
  line-height: 1.6;
  margin-top: 12px;
}

.upload-area {
  border: 2px dashed $gray-300;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;

  &:hover {
    border-color: $primary;
    background: #eff6ff;
  }

  :deep(.el-upload) {
    width: 100%;
  }

  :deep(.el-upload-dragger) {
    border: none;
    background: transparent;
    padding: 0;
  }
}

.upload-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
  color: $gray-600;
}

.upload-hint {
  font-size: 12px;
  color: $gray-400;
  margin-top: 4px;
}

@media screen and (max-width: 768px) {
  .steps-container {
    grid-template-columns: 1fr;
  }

  .step-card {
    :deep(.el-card__body) {
      padding: 20px 16px;
    }
  }
}
</style>