<script setup lang="ts">
/**
 * 排水户检查报告表单页
 *
 * 提供检查报告填写表单，包含排水设施检查、预处理设备等各项目评分，
 * 支持图片上传。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

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

const checkId = (route.params.id || route.query.id) as string
const detailId = (route.params.detail || route.query.detail) as string

/** 表单数据 */
const formData = ref({
  pshName: '',
  checkDate: '',
  inspector: '',
  drainPipe: '',
  drainPipeScore: '',
  preTreatment: '',
  preTreatmentScore: '',
  oilSeparator: '',
  oilSeparatorScore: '',
  rainSewage: '',
  rainSewageScore: '',
  overall: '',
  overallScore: '',
  suggestion: '',
})

/** 排水户选项 */
const pshOptions = [
  { text: '华丰食品厂', value: '华丰食品厂' },
  { text: '阳光花园小区', value: '阳光花园小区' },
  { text: '万达商业广场', value: '万达商业广场' },
  { text: '东风化工厂', value: '东风化工厂' },
  { text: '翠湖小区', value: '翠湖小区' },
]

/** 评分选项 */
const scoreOptions = [
  { text: '5分 - 优秀', value: '5' },
  { text: '4分 - 良好', value: '4' },
  { text: '3分 - 一般', value: '3' },
  { text: '2分 - 较差', value: '2' },
  { text: '1分 - 很差', value: '1' },
]

/** 结果选项 */
const overallOptions = [
  { text: '合格', value: 'pass' },
  { text: '不合格', value: 'fail' },
]

/** 选择器状态 */
const showPshPicker = ref(false)
const showDrainPipeScore = ref(false)
const showPreTreatmentScore = ref(false)
const showOilSeparatorScore = ref(false)
const showRainSewageScore = ref(false)
const showOverallScore = ref(false)
const showOverall = ref(false)

/** 上传文件列表 */
const uploaderList = ref<{ url: string }[]>([])

/** 选择排水户 */
function onConfirmPsh({ selectedOptions }: any) {
  formData.value.pshName = selectedOptions[0]?.text || ''
  showPshPicker.value = false
}

/** 选择评分 */
function onConfirmScore(field: string, { selectedOptions }: any) {
  (formData.value as any)[field] = selectedOptions[0]?.text || ''
  const scoreFields: Record<string, string> = {
    drainPipeScore: 'showDrainPipeScore',
    preTreatmentScore: 'showPreTreatmentScore',
    oilSeparatorScore: 'showOilSeparatorScore',
    rainSewageScore: 'showRainSewageScore',
    overallScore: 'showOverallScore',
  }
  ;(ref as any)[scoreFields[field]].value = false
}

/** 确认综合评定 */
function onConfirmOverall({ selectedOptions }: any) {
  formData.value.overall = selectedOptions[0]?.text || ''
  showOverall.value = false
}

/** 上传图片后回调 */
function afterRead(file: any) {
  uploaderList.value.push({ url: file.content || '' })
}

/** 提交表单 */
function onSubmit() {
  if (!formData.value.pshName) {
    showToast('请选择排水户')
    return
  }
  if (!formData.value.checkDate) {
    showToast('请选择检查日期')
    return
  }
  showToast('检查报告提交成功')
  router.back()
}
</script>

<template>
  <div class="check-form-page">
    <van-nav-bar title="检查报告" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <van-form @submit="onSubmit" class="form-wrapper">
      <van-cell-group title="基本信息" class="form-group">
        <!-- 排水户选择 -->
        <van-field
          v-model="formData.pshName"
          is-link
          readonly
          name="pshName"
          label="排水户"
          placeholder="请选择排水户"
          :rules="[{ required: true, message: '请选择排水户' }]"
          @click="showPshPicker = true"
        />
        <van-popup v-model:show="showPshPicker" round position="bottom">
          <van-picker
            :columns="pshOptions"
            @confirm="onConfirmPsh"
            @cancel="showPshPicker = false"
          />
        </van-popup>

        <!-- 检查日期 -->
        <van-field
          v-model="formData.checkDate"
          name="checkDate"
          label="检查日期"
          placeholder="请选择日期"
          :rules="[{ required: true, message: '请选择检查日期' }]"
        />

        <!-- 检查人 -->
        <van-field
          v-model="formData.inspector"
          name="inspector"
          label="检查人"
          placeholder="请输入检查人姓名"
        />
      </van-cell-group>

      <van-cell-group title="检查项目" class="form-group">
        <!-- 排水管道 -->
        <van-field
          v-model="formData.drainPipe"
          name="drainPipe"
          label="排水管道"
          type="textarea"
          rows="2"
          autosize
          placeholder="描述排水管道状况"
        />
        <van-field
          v-model="formData.drainPipeScore"
          is-link
          readonly
          name="drainPipeScore"
          label="评分"
          placeholder="请选择评分"
          @click="showDrainPipeScore = true"
        />
        <van-popup v-model:show="showDrainPipeScore" round position="bottom">
          <van-picker
            :columns="scoreOptions"
            @confirm="(v: any) => onConfirmScore('drainPipeScore', v)"
            @cancel="showDrainPipeScore = false"
          />
        </van-popup>

        <!-- 预处理设备 -->
        <van-field
          v-model="formData.preTreatment"
          name="preTreatment"
          label="预处理设备"
          type="textarea"
          rows="2"
          autosize
          placeholder="描述预处理设备状况"
        />
        <van-field
          v-model="formData.preTreatmentScore"
          is-link
          readonly
          name="preTreatmentScore"
          label="评分"
          placeholder="请选择评分"
          @click="showPreTreatmentScore = true"
        />
        <van-popup v-model:show="showPreTreatmentScore" round position="bottom">
          <van-picker
            :columns="scoreOptions"
            @confirm="(v: any) => onConfirmScore('preTreatmentScore', v)"
            @cancel="showPreTreatmentScore = false"
          />
        </van-popup>

        <!-- 油脂分离器 -->
        <van-field
          v-model="formData.oilSeparator"
          name="oilSeparator"
          label="油脂分离器"
          type="textarea"
          rows="2"
          autosize
          placeholder="描述油脂分离器状况"
        />
        <van-field
          v-model="formData.oilSeparatorScore"
          is-link
          readonly
          name="oilSeparatorScore"
          label="评分"
          placeholder="请选择评分"
          @click="showOilSeparatorScore = true"
        />
        <van-popup v-model:show="showOilSeparatorScore" round position="bottom">
          <van-picker
            :columns="scoreOptions"
            @confirm="(v: any) => onConfirmScore('oilSeparatorScore', v)"
            @cancel="showOilSeparatorScore = false"
          />
        </van-popup>

        <!-- 雨污分流 -->
        <van-field
          v-model="formData.rainSewage"
          name="rainSewage"
          label="雨污分流"
          type="textarea"
          rows="2"
          autosize
          placeholder="描述雨污分流状况"
        />
        <van-field
          v-model="formData.rainSewageScore"
          is-link
          readonly
          name="rainSewageScore"
          label="评分"
          placeholder="请选择评分"
          @click="showRainSewageScore = true"
        />
        <van-popup v-model:show="showRainSewageScore" round position="bottom">
          <van-picker
            :columns="scoreOptions"
            @confirm="(v: any) => onConfirmScore('rainSewageScore', v)"
            @cancel="showRainSewageScore = false"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group title="综合评定" class="form-group">
        <van-field
          v-model="formData.overall"
          is-link
          readonly
          name="overall"
          label="综合评定"
          placeholder="请选择评定结果"
          @click="showOverall = true"
        />
        <van-popup v-model:show="showOverall" round position="bottom">
          <van-picker
            :columns="overallOptions"
            @confirm="onConfirmOverall"
            @cancel="showOverall = false"
          />
        </van-popup>

        <van-field
          v-model="formData.overallScore"
          is-link
          readonly
          name="overallScore"
          label="综合评分"
          placeholder="请选择综合评分"
          @click="showOverallScore = true"
        />
        <van-popup v-model:show="showOverallScore" round position="bottom">
          <van-picker
            :columns="scoreOptions"
            @confirm="(v: any) => onConfirmScore('overallScore', v)"
            @cancel="showOverallScore = false"
          />
        </van-popup>

        <van-field
          v-model="formData.suggestion"
          name="suggestion"
          label="整改建议"
          type="textarea"
          rows="3"
          autosize
          placeholder="请输入整改建议"
          maxlength="500"
          show-word-limit
        />
      </van-cell-group>

      <van-cell-group title="现场照片" class="form-group">
        <van-uploader
          v-model="uploaderList"
          :after-read="afterRead"
          multiple
          :max-count="6"
        />
      </van-cell-group>

      <!-- 提交按钮 -->
      <div class="submit-area">
        <van-button round block type="primary" native-type="submit">
          提交检查报告
        </van-button>
      </div>
    </van-form>
  </div>
</template>

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

  :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;
  }
}

.form-wrapper {
  margin-top: 0;
}

.form-group {
  margin-top: 8px;

  :deep(.van-uploader) {
    padding: 8px 0;
  }
}

.submit-area {
  padding: 24px 16px;
}
</style>
