<script setup lang="ts">
/**
 * 设备报修上报表单
 *
 * 用于上报设备故障报修，
 * 包含设备选择、故障类型、描述和紧急程度。
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant'

const router = useRouter()

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

/** 设备选项 */
const equipmentOptions = [
  { text: '水泵', value: 'pump' },
  { text: '阀门', value: 'valve' },
  { text: '电机', value: 'motor' },
  { text: '仪表', value: 'meter' },
  { text: '管道', value: 'pipe' },
]

/** 故障类型 */
const faultTypeOptions = [
  { text: '无法启动', value: 'noStart' },
  { text: '异常噪音', value: 'noise' },
  { text: '漏水', value: 'leak' },
  { text: '运行不稳定', value: 'unstable' },
  { text: '其他故障', value: 'other' },
]

/** 紧急程度 */
const urgencyColumns = [
  { text: '紧急', value: 'urgent' },
  { text: '一般', value: 'normal' },
  { text: '低', value: 'low' },
]

/** 提交上报 */
function onSubmit() {
  if (!equipment.value) {
    showSuccessToast('请选择设备')
    return
  }
  if (!faultType.value) {
    showSuccessToast('请选择故障类型')
    return
  }
  if (!description.value) {
    showSuccessToast('请填写描述')
    return
  }
  if (!urgency.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="equipment"
          name="equipment"
          label="设备"
          placeholder="请选择设备"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择设备' }]"
        />
        <van-field
          v-model="faultType"
          name="faultType"
          label="故障类型"
          placeholder="请选择故障类型"
          is-link
          readonly
          :rules="[{ required: true, message: '请选择故障类型' }]"
        />
        <van-field
          v-model="urgency"
          name="urgency"
          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>
