<template>
  <div class="upload-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">KYC认证</div>
      <div class="nav-right"></div>
    </div>

    <div class="content">
      <h2 class="page-title">上传证件照</h2>
      <p class="sub-title">确保验证件照清晰可见</p>

      <!-- ==================== 核心上传区域 ==================== -->

      <!-- 1. 身份证人像面 -->
      <div class="upload-card">
        <div class="card-tips">确保证件照清晰可见</div>
        <div class="card-title">身份证人像面</div>

        <!-- 如果已上传，显示预览图 (示例逻辑) -->
        <div v-if="images.idFront" class="preview-box">
          <img :src="images.idFront" alt="Front Preview" />
          <div class="re-upload-btn" @click="openSheet('idFront')">重新上传</div>
        </div>

        <!-- 未上传，显示上传按钮 -->
        <button v-else class="upload-btn" @click="openSheet('idFront')">
          上传
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-upload"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
        </button>
      </div>

      <!-- 2. 身份证国徽面 -->
      <div class="upload-card">
        <div class="card-tips">确保证件照清晰可见</div>
        <div class="card-title">身份证国徽面</div>

        <div v-if="images.idBack" class="preview-box">
          <img :src="images.idBack" alt="Back Preview" />
          <div class="re-upload-btn" @click="openSheet('idBack')">重新上传</div>
        </div>

        <button v-else class="upload-btn" @click="openSheet('idBack')">
          上传
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-upload"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
        </button>
      </div>

      <!-- 3. 护照或驾驶执照 -->
      <div class="section-header">
        <h3>上传护照或驾驶执照</h3>
        <p>确保证件照清晰可见</p>
      </div>
      <div class="upload-card">
        <div class="card-tips">确保证件照清晰可见</div>
        <div class="card-title">护照或驾驶执照</div>

        <div v-if="images.passport" class="preview-box">
          <img :src="images.passport" alt="Passport Preview" />
          <div class="re-upload-btn" @click="openSheet('passport')">重新上传</div>
        </div>

        <button v-else class="upload-btn" @click="openSheet('passport')">
          上传
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-upload"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
        </button>
      </div>

      <!-- 底部说明 -->
      <div class="bottom-desc">
        <p>支持小于8M的JPG、JPGE或PNG格式的图片</p>
        <p>上传您身份证件的完整照片，请确保上传图片中的所有细节都清晰可见</p>
        <p>请确保证件为原件并在有效期内</p>
        <p>请将证件置于纯色背景下</p>
      </div>

      <button class="submit-btn" @click="handleSubmit">提交</button>
    </div>

    <!-- ==================== 隐藏的 Input (核心逻辑) ==================== -->
    <!-- 1. 调起摄像头 (capture="environment" 强制后置摄像头) -->
    <input
      type="file"
      ref="cameraInputRef"
      accept="image/*"
      capture="environment"
      style="display: none"
      @change="handleFileChange"
    />

    <!-- 2. 调起相册 (仅 accept="image/*") -->
    <input
      type="file"
      ref="galleryInputRef"
      accept="image/*"
      style="display: none"
      @change="handleFileChange"
    />


    <!-- ==================== 底部弹窗 (ActionSheet) ==================== -->
    <transition name="fade">
      <div class="mask" v-if="showActionSheet" @click="closeSheet"></div>
    </transition>

    <transition name="slide-up">
      <div class="action-sheet" v-if="showActionSheet">
        <div class="sheet-handle"></div>
        <div class="sheet-title">上传</div>

        <div class="sheet-menu">
          <!-- 点击触发拍照 -->
          <div class="menu-item active" @click="triggerUpload('camera')">
            <span class="menu-text">拍照上传</span>
            <div class="check-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
          </div>

          <!-- 点击触发相册 -->
          <div class="menu-item" @click="triggerUpload('gallery')">
            <span class="menu-text">相册选择</span>
             <!-- 图3显示这里是灰色的，没有选中勾 -->
          </div>
        </div>

        <div class="safe-area-bottom"></div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// --- 状态管理 ---
const showActionSheet = ref(false);
const currentDocType = ref(''); // 记录当前正在上传哪一个 (idFront, idBack, passport)

// 存储上传后的图片预览地址 (实际开发中可能是 Base64 或 后端返回的 URL)
const images = reactive({
  idFront: '',
  idBack: '',
  passport: ''
});

// --- 引用 DOM ---
const cameraInputRef = ref(null);
const galleryInputRef = ref(null);

// --- 弹窗逻辑 ---
const openSheet = (type) => {
  currentDocType.value = type; // 标记当前是哪个位置在上传
  showActionSheet.value = true;
};

const closeSheet = () => {
  showActionSheet.value = false;
};

// --- 核心上传触发逻辑 ---
const triggerUpload = (source) => {
  // 1. 关闭弹窗
  closeSheet();

  // 2. 根据用户选择，点击对应的隐藏 Input
  if (source === 'camera') {
    // 触发拍照 Input
    cameraInputRef.value?.click();
  } else {
    // 触发相册 Input
    galleryInputRef.value?.click();
  }
};

// --- 文件选择回调 ---
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 1. 这里可以加一些校验，比如大小限制 8M
  if (file.size > 8 * 1024 * 1024) {
    alert('图片大小不能超过 8MB');
    return;
  }

  // 2. 创建本地预览 URL (纯前端预览，无需上传服务器即可看到)
  const previewUrl = URL.createObjectURL(file);

  // 3. 更新对应的图片状态
  if (currentDocType.value === 'idFront') {
    images.idFront = previewUrl;
  } else if (currentDocType.value === 'idBack') {
    images.idBack = previewUrl;
  } else if (currentDocType.value === 'passport') {
    images.passport = previewUrl;
  }

  // 4. (可选) 这里可以立即调用 API 上传文件给后端
  // uploadToServer(file);

  // 5. 清空 input 值，防止用户重复选择同一张图片时不触发 change 事件
  event.target.value = '';
};

const handleSubmit = () => {
  // 简单的校验
  if (!images.idFront || !images.idBack) {
    alert('请先完善身份证照片信息');
    return;
  }
  console.log('提交的数据:', images);
  alert('提交成功！');
};
</script>

<style scoped>
/* 基础样式复用 */
.upload-page { min-height: 100vh; background: #fff; padding-bottom: 40px; }
.nav-bar { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; position: sticky; top: 0; background: #fff; z-index: 10; }
.nav-title { font-size: 18px; font-weight: 500; }
.nav-left, .nav-right { width: 40px; }
.content { padding: 10px 20px; }
.page-title { font-size: 18px; font-weight: 500; margin-bottom: 4px; color: #333; }
.sub-title { font-size: 12px; color: #999; margin-bottom: 20px; }

/* 上传卡片 */
.upload-card {
  background: #F7F8FA; border-radius: 8px; padding: 20px 0;
  text-align: center; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.card-tips { font-size: 12px; color: #999; margin-bottom: 8px; }
.card-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px; }
.upload-btn {
  background: #E02F44; color: #fff; border: none; padding: 8px 30px;
  border-radius: 20px; font-size: 14px; display: inline-flex; align-items: center;
}
.icon-upload { margin-left: 4px; margin-bottom: -2px; }

/* 预览图样式 */
.preview-box {
  width: 100%; display: flex; flex-direction: column; align-items: center;
}
.preview-box img {
  max-width: 80%; max-height: 150px; border-radius: 4px; margin-bottom: 10px;
  object-fit: contain;
}
.re-upload-btn {
  font-size: 12px; color: #E02F44; cursor: pointer; text-decoration: underline;
}

/* 底部区域 */
.section-header { margin-top: 30px; margin-bottom: 15px; }
.section-header h3 { font-size: 16px; font-weight: 600; }
.section-header p { font-size: 12px; color: #999; }
.bottom-desc p { font-size: 12px; color: #999; line-height: 1.6; }
.submit-btn {
  width: 100%; height: 50px; background: #E02F44; color: #fff;
  border: none; border-radius: 25px; font-size: 16px; margin-top: 20px;
}

/* 弹窗样式 */
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);
  z-index: 99; }
.action-sheet { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff;
  border-radius: 16px 16px 0 0; z-index: 100; padding-bottom: 20px; }
.sheet-handle { width: 36px; height: 4px; background: #E0E0E0; border-radius: 2px; margin: 10px auto; }
.sheet-title { font-size: 18px; font-weight: 600; padding: 10px 20px 20px; }
.menu-item { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; font-size: 16px; color: #333; cursor: pointer; }
.menu-item.active .check-icon { width: 22px; height: 22px; background: #E02F44; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.safe-area-bottom { height: env(safe-area-inset-bottom); }

/* 动画 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s; }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
</style>
```

### 关键技术点解析

1.  **H5 调起摄像头的标准写法**：
    ```html
    <input type="file" accept="image/*" capture="environment">
    ```
    * `accept="image/*"`：限制只能选择图片。
    * `capture="environment"`：这是关键，它告诉移动端浏览器**直接调用后置摄像头**，
不要再弹出一个选择框问用户“相机还是相册”。(注意：部分安卓浏览器可能仍然会询问，但大部分会直接进相机)。

2.  **H5 调起相册的标准写法**：
    ```html
    <input type="file" accept="image/*">