<template>
  <div class="check-in-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
      <h1 class="nav-title">定位打卡</h1>
      <div class="nav-placeholder"></div>
    </div>

    <div class="page-content">
      <!-- 位置信息卡片 -->
      <div class="location-card">
        <div class="location-content">
          <div class="location-icon" :class="{ verified: isLocationVerified }">
            <van-icon name="location-o" />
          </div>
          <div class="location-text">
            <div class="location-label">当前位置</div>
            <div class="location-value">{{ location }}</div>
            <div v-if="isLocationVerified" class="location-tip">
              <van-icon name="checked" />
              <span>位置验证通过</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 拍照区域 -->
      <!-- <div class="photo-card">
        <div class="photo-content">
          <div v-if="photo" class="photo-preview">
            <van-image :src="photo" fit="cover" class="preview-image">
              <template v-slot:loading>
                <van-loading type="spinner" size="24" />
              </template>
            </van-image>
            <van-icon name="cross" class="photo-delete" @click="deletePhoto" />
          </div>
          <div v-else class="photo-placeholder" @click="takePhoto">
            <van-icon name="photograph" class="photo-icon" />
            <span>点击拍照</span>
          </div>
        </div>
      </div> -->

      <!-- 打卡说明 -->
      <div class="tips-card">
        <div class="tips-title">打卡说明</div>
        <ul class="tips-list">
          <li>请确保在指定地点范围内打卡</li>
          <li>打卡成功后任务状态将更新为"执行中"</li>
        </ul>
      </div>
    </div>
    <!-- :disabled="!isLocationVerified || isSubmitting" -->
    <!-- 底部提交按钮 -->
    <div class="submit-bar">
      <van-button
        block
        round
        type="primary"
        
        :loading="isSubmitting"
        class="submit-btn"
        @click="handleSubmit"
      >
        提交打卡
      </van-button>
    </div>

    <!-- 隐藏的文件输入 -->
    <input
      ref="fileInputRef"
      type="file"
      accept="image/*"
      capture="environment"
      class="hidden-input"
      @change="handleFileChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { clockIn } from "@/api/traffic";
import { hintToast } from "@/utils/tools";

const router = useRouter();
const route = useRoute();

// 打卡数据
const photo = ref("");
const location = ref("正在获取位置...");
const locationCoords = ref("");
const isLocationVerified = ref(false);
const fileInputRef = ref(null);
const isSubmitting = ref(false);

// 获取URL参数
const taskId = route.query.id;

// 返回上一页
function goBack() {
  router.back();
}

// 获取实际位置
function initLocation() {
  try {
    const loc = JSON.parse(bridge.getLocation());
    const addr = loc.address || loc.addr || "";
    location.value = addr || "未知位置";
    locationCoords.value = `${loc.app_x},${loc.app_y}`;
    isLocationVerified.value = !!(loc.app_x && loc.app_y);
  } catch (e) {
    location.value = "获取位置失败";
    isLocationVerified.value = false;
  }
}

// 点击拍照
function takePhoto() {
  fileInputRef.value?.click();
}

// 处理文件选择
function handleFileChange(event) {
  const file = event.target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      photo.value = reader.result;
    };
    reader.readAsDataURL(file);
  }
  event.target.value = "";
}

// 删除照片
function deletePhoto() {
  photo.value = "";
}

// 提交打卡
function handleSubmit() {
  // if (!isLocationVerified.value) {
  //   hintToast("正在获取位置信息，请稍候");
  //   return;
  // }
  // if (isSubmitting.value) return;
  // isSubmitting.value = true;
  clockIn({
    taskId,
    address: '测试',
    // address: location.value,
    clickLatLong: "1,1",
    // clickLatLong: locationCoords.value,
  }).then(() => {
    hintToast("打卡成功");
    setTimeout(() => {
      router.back();
    }, 1000);
  }).catch((e) => {
    hintToast(e.message || "打卡失败");
  }).finally(() => {
    isSubmitting.value = false;
  });
}

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

<style lang="scss" scoped>
.check-in-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 80px;
}

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 16px;

  .nav-back {
    font-size: 20px;
    color: #333;
  }

  .nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .nav-placeholder {
    width: 20px;
  }
}

.page-content {
  padding: 16px;
}

.location-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.location-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.location-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  .van-icon-location-o {
    font-size: 20px;
    color: #999;
  }

  &.verified {
    background: #ecfdf5;

    .van-icon-location-o {
      color: #10b981;
    }
  }
}

.location-text {
  flex: 1;

  .location-label {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .location-value {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .location-tip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #10b981;
  }
}

.photo-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.photo-content {
  .photo-preview {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;

    .preview-image {
      width: 100%;
      height: 100%;
    }

    .photo-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 20px;
      color: white;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      padding: 4px;
    }
  }

  .photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;
    border: 2px dashed #e5e5e5;
    border-radius: 12px;
    color: #999;
    cursor: pointer;
    transition: border-color 0.2s;

    &:active {
      border-color: #2563eb;
    }

    .photo-icon {
      font-size: 48px;
      margin-bottom: 8px;
    }

    span {
      font-size: 14px;
    }
  }
}

.tips-card {
  background: #eff6ff;
  border-radius: 16px;
  padding: 16px;
}

.tips-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  margin-bottom: 12px;
}

.tips-list {
  margin: 0;
  padding-left: 16px;

  li {
    font-size: 13px;
    color: #1e40af;
    margin-bottom: 8px;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e5e5;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.submit-btn {
  height: 44px;
  font-size: 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;

  &:disabled {
    background: #e5e5e5;
    color: #999;
  }
}

.hidden-input {
  display: none;
}
</style>
