<script setup lang="ts">
/**
 * 积淹点上报表单
 *
 * 用于上报积水、淹没点位信息，
 * 包含位置选择、水位、描述和照片上传。
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant'

const router = useRouter()

/** 表单数据 */
const location = ref('')
const waterLevel = ref('')
const description = ref('')
const photos = ref<Array<{ url: string }>>([])

/** 提交上报 */
function onSubmit() {
  if (!location.value) {
    showSuccessToast('请选择位置')
    return
  }
  if (!description.value) {
    showSuccessToast('请填写描述')
    return
  }
  showSuccessToast('上报成功')
  router.back()
}
</script>

<template>
  <div class="report-form-page">
    <van-nav-bar
      title="积淹点上报"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="location"
          name="location"
          label="位置"
          placeholder="点击选择位置"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择位置' }]"
        />
        <van-field
          v-model="waterLevel"
          name="waterLevel"
          label="水位(cm)"
          placeholder="请输入水位高度"
          type="number"
        />
        <van-field
          v-model="description"
          name="description"
          label="描述"
          placeholder="请描述积水情况"
          type="textarea"
          rows="3"
          autosize
          :rules="[{ required: true, message: '请填写描述' }]"
        />
      </van-cell-group>

      <div class="upload-section">
        <div class="section-title">现场照片</div>
        <van-uploader
          v-model="photos"
          :max-count="6"
          :max-size="10 * 1024 * 1024"
          accept="image/*"
          multiple
          :preview-full-image="true"
        />
      </div>

      <div class="submit-wrap">
        <van-button
          type="primary"
          block
          round
          native-type="submit"
          class="submit-btn"
        >
          提交上报
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.report-form-page {
  min-height: 100vh;
  background: var(--color-bg-page);

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.upload-section {
  margin: 12px 16px;
  padding: 12px;
  background: var(--color-bg-card);
  border-radius: 8px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.submit-wrap {
  padding: 24px 16px;
}

.submit-btn {
  height: 44px;
}
</style>
