<template>
  <GiPageLayout :margin="true">
    <template #header>
      <h2>新增考勤记录</h2>
    </template>
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      layout="vertical"
      @submit="onSubmit"
    >
      <a-form-item label="打卡照片" name="recordImage">
        <a-input v-model="form.recordImage" placeholder="请输入打卡照片URL" />
        <!-- 你可以替换为图片上传组件 -->
      </a-form-item>
      <a-form-item label="打卡地点（经纬度）" name="recordPosition">
        <a-input v-model="form.recordPosition" placeholder="请输入经纬度" />
      </a-form-item>
      <a-form-item label="打卡地点（中文描述）" name="recordPositionLabel">
        <a-input v-model="form.recordPositionLabel" placeholder="请输入地点描述" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" :loading="loading">提交</a-button>
      </a-form-item>
    </a-form>
    <a-alert v-if="resultMsg" :type="resultType" :show-icon="true" style="margin-top: 16px;">
      {{ resultMsg }}
    </a-alert>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { addAttendanceRecord } from '@/apis/attendance-record/index'
import type { AttendanceRecordReq } from '@/apis/attendance-record/type'

const formRef = ref()
const form = ref<AttendanceRecordReq>({
  recordImage: '',
  recordPosition: '',
  recordPositionLabel: '',
})

const rules = {
  // 可根据需要添加校验
}

const loading = ref(false)
const resultMsg = ref('')
const resultType = ref<'success' | 'error'>('success')

const onSubmit = async () => {
  loading.value = true
  resultMsg.value = ''
  try {
    const res = await addAttendanceRecord(form.value)
    if (res.success) {
      resultMsg.value = '考勤记录提交成功'
      resultType.value = 'success'
      form.value = { recordImage: '', recordPosition: '', recordPositionLabel: '' }
    } else {
      resultMsg.value = res.msg || '提交失败'
      resultType.value = 'error'
    }
  } catch (e: any) {
    resultMsg.value = e?.message || '提交异常'
    resultType.value = 'error'
  } finally {
    loading.value = false
  }
}
</script>
