<script setup lang="ts">
/**
 * 问题工单管理页
 *
 * 支持工单表单编辑和流程分派。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, picker popups.
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

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

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

/** 表单数据 */
const formData = ref({
  title: '',
  facility: '',
  severity: 'medium',
  address: '',
  description: '',
  assignee: '',
})

/** 设施选项 */
const facilityColumns = [
  { text: '供水管网', value: '供水管网' },
  { text: '阀门井', value: '阀门井' },
  { text: '水表', value: '水表' },
  { text: '消防栓', value: '消防栓' },
  { text: '泵站', value: '泵站' },
]

/** 严重程度选项 */
const severityColumns = [
  { text: '低', value: 'low' },
  { text: '中', value: 'medium' },
  { text: '高', value: 'high' },
  { text: '紧急', value: 'critical' },
]

/** 可选责任人 */
const assigneeColumns = [
  { text: '李工', value: '李工' },
  { text: '王工', value: '王工' },
  { text: '赵工', value: '赵工' },
  { text: '孙工', value: '孙工' },
]

// Picker states
const showFacilityPicker = ref(false)
const showSeverityPicker = ref(false)
const showAssigneePicker = ref(false)

/** Confirm facility picker */
function onConfirmFacility({ selectedOptions }: any) {
  formData.value.facility = selectedOptions[0]?.text || ''
  showFacilityPicker.value = false
}

/** Confirm severity picker */
function onConfirmSeverity({ selectedOptions }: any) {
  formData.value.severity = selectedOptions[0]?.value || 'medium'
  showSeverityPicker.value = false
}

/** Confirm assignee picker */
function onConfirmAssignee({ selectedOptions }: any) {
  formData.value.assignee = selectedOptions[0]?.text || ''
  showAssigneePicker.value = false
}

/** Get severity text for display */
function severityText(): string {
  return severityColumns.find(o => o.value === formData.value.severity)?.text || '请选择'
}

/** Get severity tag type */
function severityTagType(): 'success' | 'warning' | 'danger' {
  const map: Record<string, 'success' | 'warning' | 'danger'> = {
    low: 'success',
    medium: 'warning',
    high: 'danger',
    critical: 'danger',
  }
  return map[formData.value.severity] || 'warning'
}

/** 提交表单 */
function onSubmit() {
  if (!formData.value.title.trim()) {
    showToast('请输入工单标题')
    return
  }
  if (!formData.value.facility) {
    showToast('请选择设施类型')
    return
  }
  if (!formData.value.address.trim()) {
    showToast('请输入问题地址')
    return
  }
  showToast('工单提交成功')
  router.back()
}
</script>

<template>
  <div class="management-page">
    <!-- NavBar — brand blue bg, white text -->
    <van-nav-bar
      title="工单管理"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <van-form @submit="onSubmit">
      <!-- 工单信息 Card -->
      <div class="form-card">
        <div class="card-header">
          <span class="card-header__accent"></span>
          <h5 class="card-header__title">工单信息</h5>
        </div>
        <div class="card-body">
          <!-- 工单标题 -->
          <van-field
            v-model="formData.title"
            name="title"
            label="工单标题"
            placeholder="请输入工单标题"
            :rules="[{ required: true, message: '请输入工单标题' }]"
          />

          <!-- 设施类型 -->
          <van-field
            v-model="formData.facility"
            is-link
            readonly
            name="facility"
            label="设施类型"
            placeholder="请选择设施类型"
            :rules="[{ required: true, message: '请选择设施类型' }]"
            @click="showFacilityPicker = true"
          />

          <!-- 严重程度 -->
          <van-field
            :model-value="severityText()"
            is-link
            readonly
            name="severity"
            label="严重程度"
            @click="showSeverityPicker = true"
          >
            <template #extra>
              <van-tag :type="severityTagType()" size="medium" plain>{{ severityText() }}</van-tag>
            </template>
          </van-field>

          <!-- 问题地址 -->
          <van-field
            v-model="formData.address"
            name="address"
            label="问题地址"
            placeholder="请输入问题地址"
            :rules="[{ required: true, message: '请输入问题地址' }]"
          />

          <!-- 问题描述 -->
          <van-field
            v-model="formData.description"
            name="description"
            label="问题描述"
            type="textarea"
            rows="3"
            autosize
            placeholder="请输入问题描述（选填）"
            maxlength="500"
            show-word-limit
          />
        </div>
      </div>

      <!-- 流程分派 Card -->
      <div class="form-card">
        <div class="card-header">
          <span class="card-header__accent"></span>
          <h5 class="card-header__title">流程分派</h5>
        </div>
        <div class="card-body">
          <!-- 责任人 -->
          <van-field
            v-model="formData.assignee"
            is-link
            readonly
            name="assignee"
            label="责任人"
            placeholder="请选择责任人"
            @click="showAssigneePicker = true"
          />
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-area">
        <van-button round block type="primary" native-type="submit" size="large">
          提交工单
        </van-button>
      </div>
    </van-form>

    <!-- Facility Picker Popup -->
    <van-popup v-model:show="showFacilityPicker" round position="bottom">
      <van-picker
        :columns="facilityColumns"
        title="选择设施类型"
        show-toolbar
        @confirm="onConfirmFacility"
        @cancel="showFacilityPicker = false"
      />
    </van-popup>

    <!-- Severity Picker Popup -->
    <van-popup v-model:show="showSeverityPicker" round position="bottom">
      <van-picker
        :columns="severityColumns"
        title="选择严重程度"
        show-toolbar
        @confirm="onConfirmSeverity"
        @cancel="showSeverityPicker = false"
      />
    </van-popup>

    <!-- Assignee Picker Popup -->
    <van-popup v-model:show="showAssigneePicker" round position="bottom">
      <van-picker
        :columns="assigneeColumns"
        title="选择责任人"
        show-toolbar
        @confirm="onConfirmAssignee"
        @cancel="showAssigneePicker = false"
      />
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.management-page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;

  // NavBar — brand blue
  :deep(.van-nav-bar) {
    background: #1E74FF;
  }
  :deep(.van-nav-bar__title) {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  :deep(.van-nav-bar__text),
  :deep(.van-nav-bar__arrow) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
}

// Form Card — white card with subtle shadow
.form-card {
  background: #fff;
  border-radius: 10px;
  margin: 10px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 6px;

  &__accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
    flex-shrink: 0;
  }

  &__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
}

.card-body {
  :deep(.van-cell) {
    padding-left: 16px;
    padding-right: 16px;
  }

  :deep(.van-cell::after) {
    left: 16px;
    right: 16px;
  }
}

// Submit area
.submit-area {
  padding: 24px 16px;
}

// Picker toolbar style
:deep(.van-picker__toolbar) {
  .van-picker__confirm {
    color: #1E74FF;
  }
}
</style>
