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

const router = useRouter()

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

/** 位置选择 */
const showLocationPicker = ref(false)
const locationOptions = [
  { text: '当前定位', value: 'gps' },
  { text: '路口A - 中山路', value: 'loc_a' },
  { text: '路口B - 解放路', value: 'loc_b' },
  { text: '路段C - 建设路', value: 'loc_c' },
]
function onLocationConfirm({ selectedOptions }: any) {
  location.value = selectedOptions[0]?.text || ''
  showLocationPicker.value = false
}

/** 水位选择 */
const showWaterLevelPicker = ref(false)
const waterLevelColumns = Array.from({ length: 31 }, (_, i) => ({
  text: `${i * 5} cm`,
  value: i * 5,
}))
function onWaterLevelConfirm({ selectedOptions }: any) {
  waterLevel.value = selectedOptions[0]?.text || ''
  showWaterLevelPicker.value = false
}

/** 时间选择 */
const showTimePicker = ref(false)
const currentDate = ref(['2024', '01', '01', '12', '00'])
function onTimeConfirm({ selectedValues }: any) {
  const [y, m, d, h, min] = selectedValues
  reportTime.value = `${y}-${String(Number(m) + 1).padStart(2, '0')}-${String(d).padStart(2, '0')} ${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`
  showTimePicker.value = false
}

/** 提交上报 */
function onSubmit() {
  if (!location.value) {
    showToast('请选择位置')
    return
  }
  if (!description.value) {
    showToast('请填写描述')
    return
  }
  showToast('上报成功')
  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">
      <!-- 基本信息卡片 -->
      <div class="form-card">
        <div class="card-title">
          <van-icon name="location-o" color="#1E74FF" size="18" />
          <span>基本信息</span>
        </div>
        <van-field
          v-model="location"
          name="location"
          label="上报位置"
          placeholder="点击选择位置"
          is-link
          readonly
          left-icon="location-o"
          :rules="[{ required: true, message: '请选择位置' }]"
          @click="showLocationPicker = true"
        />
        <van-field
          v-model="waterLevel"
          name="waterLevel"
          label="水位高度"
          placeholder="点击选择水位高度"
          is-link
          readonly
          left-icon="ascending"
          @click="showWaterLevelPicker = true"
        />
        <van-field
          v-model="reportTime"
          name="reportTime"
          label="上报时间"
          placeholder="点击选择上报时间"
          is-link
          readonly
          left-icon="clock-o"
          @click="showTimePicker = true"
        />
        <van-field
          v-model="description"
          name="description"
          label="积水描述"
          placeholder="请描述积水情况、影响范围等"
          type="textarea"
          rows="3"
          autosize
          left-icon="comment-o"
          :rules="[{ required: true, message: '请填写描述' }]"
        />
      </div>

      <!-- 照片上传卡片 -->
      <div class="form-card">
        <div class="card-title">
          <van-icon name="photograph" color="#1E74FF" size="18" />
          <span>现场照片</span>
        </div>
        <div class="upload-wrap">
          <van-uploader
            v-model="photos"
            :max-count="6"
            :max-size="10 * 1024 * 1024"
            accept="image/*"
            multiple
            :preview-full-image="true"
          />
        </div>
      </div>

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

    <!-- 位置选择弹窗 -->
    <van-popup v-model:show="showLocationPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择位置</div>
      <van-picker
        :columns="locationOptions"
        @confirm="onLocationConfirm"
        @cancel="showLocationPicker = false"
      />
    </van-popup>

    <!-- 水位选择弹窗 -->
    <van-popup v-model:show="showWaterLevelPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择水位</div>
      <van-picker
        :columns="waterLevelColumns"
        @confirm="onWaterLevelConfirm"
        @cancel="showWaterLevelPicker = false"
      />
    </van-popup>

    <!-- 时间选择弹窗 -->
    <van-popup v-model:show="showTimePicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择时间</div>
      <van-date-picker
        v-model="currentDate"
        type="datetime"
        title=""
        @confirm="onTimeConfirm"
        @cancel="showTimePicker = false"
      />
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.report-form-page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 30px;

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

.form-card {
  margin: 12px 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;

  :deep(.van-cell-group) {
    margin: 0;
    --van-cell-group-inset-padding: 0;
  }

  :deep(.van-cell) {
    padding: 14px 16px;
        &::after {
      left: 16px;
      right: 16px;
    }
  }

  :deep(.van-field__left-icon) {
    margin-right: 8px;
    color: #C8C9CC;
  }

  :deep(.van-field__label) {
    color: #646566;
    font-weight: 500;
    width: 5.2em;
  }
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
  font-size: 15px;
  font-weight: 600;
  color: #323233;
}

.upload-wrap {
  padding: 4px 16px 16px;

  :deep(.van-uploader__upload) {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #F7F8FA;
  }

  :deep(.van-uploader__preview) {
    width: 80px;
    height: 80px;
    border-radius: 8px;
  }

  :deep(.van-uploader__preview-image) {
    border-radius: 8px;
  }
}

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

.submit-btn {
  height: 46px;
  background: #1E74FF;
  border: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 23px;
  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);

  :deep(.van-button__text) {
    color: #fff;
  }
}

// --------------- Picker Popup --------------
.popup-title-bar {
  padding: 14px 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #323233;
  background: #fff;
  border-bottom: 1px solid #EBEDF0;
}
</style>
