<script setup lang="ts">
/**
 * 巡检问题上报表单
 *
 * 用于上报巡检过程中发现的问题，
 * 包含设施选择、问题类型、描述和照片上传。
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant'

const router = useRouter()

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

/** 设施选项 */
const facilityOptions = [
  { text: '供水管网', value: 'pipe' },
  { text: '阀门井', value: 'valve' },
  { text: '消防栓', value: 'hydrant' },
  { text: '水表', value: 'meter' },
  { text: '泵站', value: 'pump' },
]

/** 问题类型选项 */
const problemTypeOptions = [
  { text: '管道渗漏', value: 'leak' },
  { text: '阀门故障', value: 'valveFault' },
  { text: '水表异常', value: 'meterFault' },
  { text: '设施损坏', value: 'damage' },
  { text: '其他问题', value: 'other' },
]

/** 提交上报 */
function onSubmit() {
  if (!facility.value) {
    showSuccessToast('请选择设施')
    return
  }
  if (!problemType.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="facility"
          name="facility"
          label="设施"
          placeholder="请选择设施类型"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择设施' }]"
        />
        <van-field
          v-model="problemType"
          name="problemType"
          label="问题类型"
          placeholder="请选择问题类型"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择问题类型' }]"
        />
        <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>
