<script setup lang="ts">
/**
 * 巡检问题上报表单
 *
 * 用于上报巡检过程中发现的问题，
 * 包含设施选择、问题类型、描述和照片上传。
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

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

/** 设施选择 */
const showFacilityPicker = ref(false)
const facilityOptions = [
  { text: '供水管网', value: 'pipe' },
  { text: '阀门井', value: 'valve' },
  { text: '消防栓', value: 'hydrant' },
  { text: '水表', value: 'meter' },
  { text: '泵站', value: 'pump' },
]
function onFacilityConfirm({ selectedOptions }: any) {
  facility.value = selectedOptions[0]?.text || ''
  showFacilityPicker.value = false
}

/** 问题类型选择 */
const showProblemTypePicker = ref(false)
const problemTypeOptions = [
  { text: '管道渗漏', value: 'leak' },
  { text: '阀门故障', value: 'valveFault' },
  { text: '水表异常', value: 'meterFault' },
  { text: '设施损坏', value: 'damage' },
  { text: '其他问题', value: 'other' },
]
function onProblemTypeConfirm({ selectedOptions }: any) {
  problemType.value = selectedOptions[0]?.text || ''
  showProblemTypePicker.value = false
}

/** 提交上报 */
function onSubmit() {
  if (!facility.value) {
    showToast('请选择设施')
    return
  }
  if (!problemType.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="search" color="#4ECDC4" size="18" />
          <span>问题信息</span>
        </div>
        <van-field
          v-model="facility"
          name="facility"
          label="设施类型"
          placeholder="请选择设施类型"
          is-link
          readonly
          left-icon="wap-home-o"
          :rules="[{ required: true, message: '请选择设施' }]"
          @click="showFacilityPicker = true"
        />
        <van-field
          v-model="problemType"
          name="problemType"
          label="问题类型"
          placeholder="请选择问题类型"
          is-link
          readonly
          left-icon="warning-o"
          :rules="[{ required: true, message: '请选择问题类型' }]"
          @click="showProblemTypePicker = 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="#4ECDC4" 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="showFacilityPicker" position="bottom" round :safe-area-inset-bottom="true">
      <div class="popup-title-bar">选择设施类型</div>
      <van-picker
        :columns="facilityOptions"
        @confirm="onFacilityConfirm"
        @cancel="showFacilityPicker = false"
      />
    </van-popup>

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