<script setup lang="ts">
/**
 * 项目问题上报表单
 *
 * 用于上报项目相关问题，
 * 支持可选的 detail 路由参数预填充项目信息。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast } from 'vant'

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

/** 路由参数 — 预填充的项目信息 */
const detailParam = (route.params.detail as string) || ''

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

/** 问题类型选项 */
const issueTypeOptions = [
  { text: '进度延迟', value: 'delay' },
  { text: '质量问题', value: 'quality' },
  { text: '安全隐患', value: 'safety' },
  { text: '材料问题', value: 'material' },
  { text: '其他', value: 'other' },
]

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