<script setup lang="ts">
/**
 * 项目问题上报表单
 *
 * 用于上报项目相关问题，
 * 支持可选的 detail 路由参数预填充项目信息。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } 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 showProjectPicker = ref(false)
const projectOptions = [
  { text: '供水管网改造项目', value: 'proj_1' },
  { text: '污水处理项目', value: 'proj_2' },
  { text: '雨水排放项目', value: 'proj_3' },
  { text: '河湖治理工程', value: 'proj_4' },
  { text: '智慧水务平台', value: 'proj_5' },
]
function onProjectConfirm({ selectedOptions }: any) {
  project.value = selectedOptions[0]?.text || ''
  showProjectPicker.value = false
}

/** 问题类型选择 */
const showIssueTypePicker = ref(false)
const issueTypeOptions = [
  { text: '进度延迟', value: 'delay' },
  { text: '质量问题', value: 'quality' },
  { text: '安全隐患', value: 'safety' },
  { text: '材料问题', value: 'material' },
  { text: '其他', value: 'other' },
]
function onIssueTypeConfirm({ selectedOptions }: any) {
  issueType.value = selectedOptions[0]?.text || ''
  showIssueTypePicker.value = false
}

/** 提交上报 */
function onSubmit() {
  if (!project.value) {
    showToast('请选择项目')
    return
  }
  if (!issueType.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="bulb-o" color="#F39C12" size="18" />
          <span>项目信息</span>
        </div>
        <van-field
          v-model="project"
          name="project"
          label="所属项目"
          placeholder="请选择项目"
          is-link
          readonly
          left-icon="orders-o"
          :rules="[{ required: true, message: '请选择项目' }]"
          @click="showProjectPicker = true"
        />
        <van-field
          v-model="issueType"
          name="issueType"
          label="问题类型"
          placeholder="请选择问题类型"
          is-link
          readonly
          left-icon="warning-o"
          :rules="[{ required: true, message: '请选择问题类型' }]"
          @click="showIssueTypePicker = 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="#F39C12" 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="showProjectPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择项目</div>
      <van-picker
        :columns="projectOptions"
        @confirm="onProjectConfirm"
        @cancel="showProjectPicker = false"
      />
    </van-popup>

    <!-- 问题类型选择弹窗 -->
    <van-popup v-model:show="showIssueTypePicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择问题类型</div>
      <van-picker
        :columns="issueTypeOptions"
        @confirm="onIssueTypeConfirm"
        @cancel="showIssueTypePicker = 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>
