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

const router = useRouter()

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

/** 设备选择 */
const showEquipmentPicker = ref(false)
const equipmentOptions = [
  { text: '水泵', value: 'pump' },
  { text: '阀门', value: 'valve' },
  { text: '电机', value: 'motor' },
  { text: '仪表', value: 'meter' },
  { text: '管道', value: 'pipe' },
]
function onEquipmentConfirm({ selectedOptions }: any) {
  equipment.value = selectedOptions[0]?.text || ''
  showEquipmentPicker.value = false
}

/** 故障类型选择 */
const showFaultPicker = ref(false)
const faultTypeOptions = [
  { text: '无法启动', value: 'noStart' },
  { text: '异常噪音', value: 'noise' },
  { text: '漏水', value: 'leak' },
  { text: '运行不稳定', value: 'unstable' },
  { text: '其他故障', value: 'other' },
]
function onFaultConfirm({ selectedOptions }: any) {
  faultType.value = selectedOptions[0]?.text || ''
  showFaultPicker.value = false
}

/** 紧急程度选择 */
const showUrgencyPicker = ref(false)
const urgencyOptions = [
  { text: '紧急（立即处理）', value: 'urgent' },
  { text: '一般（24小时内）', value: 'normal' },
  { text: '低（计划处理）', value: 'low' },
]
function onUrgencyConfirm({ selectedOptions }: any) {
  urgency.value = selectedOptions[0]?.text || ''
  showUrgencyPicker.value = false
}

/** 提交上报 */
function onSubmit() {
  if (!equipment.value) {
    showToast('请选择设备')
    return
  }
  if (!faultType.value) {
    showToast('请选择故障类型')
    return
  }
  if (!urgency.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="setting-o" color="#FF976A" size="18" />
          <span>设备信息</span>
        </div>
        <van-field
          v-model="equipment"
          name="equipment"
          label="报修设备"
          placeholder="请选择设备"
          is-link
          readonly
          left-icon="award-o"
          :rules="[{ required: true, message: '请选择设备' }]"
          @click="showEquipmentPicker = true"
        />
        <van-field
          v-model="faultType"
          name="faultType"
          label="故障类型"
          placeholder="请选择故障类型"
          is-link
          readonly
          left-icon="warning-o"
          :rules="[{ required: true, message: '请选择故障类型' }]"
          @click="showFaultPicker = true"
        />
        <van-field
          v-model="urgency"
          name="urgency"
          label="紧急程度"
          placeholder="请选择紧急程度"
          is-link
          readonly
          left-icon="fire-o"
          :rules="[{ required: true, message: '请选择紧急程度' }]"
          @click="showUrgencyPicker = 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="#FF976A" 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="showEquipmentPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择设备</div>
      <van-picker
        :columns="equipmentOptions"
        @confirm="onEquipmentConfirm"
        @cancel="showEquipmentPicker = false"
      />
    </van-popup>

    <!-- 故障类型选择弹窗 -->
    <van-popup v-model:show="showFaultPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择故障类型</div>
      <van-picker
        :columns="faultTypeOptions"
        @confirm="onFaultConfirm"
        @cancel="showFaultPicker = false"
      />
    </van-popup>

    <!-- 紧急程度选择弹窗 -->
    <van-popup v-model:show="showUrgencyPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择紧急程度</div>
      <van-picker
        :columns="urgencyOptions"
        @confirm="onUrgencyConfirm"
        @cancel="showUrgencyPicker = 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>
