wecom_it_smart_desk/frontend-terminal/src/views/RepairView.vue

<!--
  =============================================================================
  企微IT智能服务台 — 终端设备报修页面
  =============================================================================
  说明：小鱼终端大屏设备报修页面
    - 设备类型选择（投影仪/视频会议设备/空调/桌椅/网络/其他）
    - 故障描述文本输入（支持快捷选项）
    - 匿名报修（未登录时也可提交）
    - 提交后创建 IT 工单 + 通知管理员
    - 成功/失败反馈，自动返回状态页
    - 1920×1080 横屏深色主题适配
  =============================================================================
-->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTerminalStore } from '@/stores/terminal'
import { submitRepair } from '@/api/meetingroom'
import { useTerminal } from '@/composables/useTerminal'
import type { DeviceTypeOption } from '@/types/meetingroom'

// ==========================================================================
// 路由 & Store & 终端
// ==========================================================================

const route = useRoute()
const router = useRouter()
const store = useTerminalStore()
const { close: closePage } = useTerminal()

// ==========================================================================
// 设备类型选项
// ==========================================================================

/** 设备类型列表（与后端 repair_service.py 的 DEVICE_TYPE_LABELS 对应） */
const deviceTypeOptions: DeviceTypeOption[] = [
  { value: 'projector', label: '投影仪', icon: '📽️' },
  { value: 'video_conf', label: '视频会议设备', icon: '📹' },
  { value: 'aircon', label: '空调', icon: '❄️' },
  { value: 'desk_chair', label: '桌椅', icon: '🪑' },
  { value: 'network', label: '网络', icon: '🌐' },
  { value: 'other', label: '其他设备', icon: '🔧' },
]

// ==========================================================================
// 表单状态
// ==========================================================================

/** 选中的设备类型 */
const selectedDeviceType = ref<string>('')
/** 故障描述 */
const faultDescription = ref('')
/** 提交中 */
const submitting = ref(false)
/** 提交结果 */
const submitResult = ref<{ success: boolean; repairId?: number; message: string } | null>(null)

/** 快捷故障描述选项 */
const quickFaultOptions = [
  '无法开机',
  '画面模糊',
  '声音异常',
  '连接失败',
  '设备老化',
  '其他问题',
]

// ==========================================================================
// 计算属性
// ==========================================================================

/** 终端SN */
const terminalSn = computed(() => route.params.sn as string || store.terminalSn)

/** 会议室信息 */
const meetingroomId = computed(() => store.meetingroomInfo?.meetingroom_id ?? null)
const meetingroomName = computed(() => store.meetingroomName)

/** 是否可提交 */
const canSubmit = computed(() => {
  return selectedDeviceType.value !== '' && faultDescription.value.trim().length > 0 && !submitting.value
})

/** 选中设备类型的显示信息 */
const selectedDeviceInfo = computed(() => {
  return deviceTypeOptions.find(d => d.value === selectedDeviceType.value)
})

// ==========================================================================
// 方法
// ==========================================================================

/** 选择设备类型 */
function selectDeviceType(value: string) {
  selectedDeviceType.value = value
}

/** 快速填充故障描述 */
function quickFillFault(text: string) {
  // 如果已有内容，追加而不是覆盖
  if (faultDescription.value && !faultDescription.value.includes(text)) {
    faultDescription.value = `${faultDescription.value}；${text}`
  } else {
    faultDescription.value = text
  }
}

/** 提交报修 */
async function handleSubmit() {
  if (!canSubmit.value) return
  if (!meetingroomId.value) {
    submitResult.value = { success: false, message: '会议室信息缺失，无法提交报修' }
    return
  }

  submitting.value = true
  submitResult.value = null

  try {
    const result = await submitRepair({
      terminal_sn: terminalSn.value,
      meetingroom_id: meetingroomId.value,
      meetingroom_name: meetingroomName.value,
      device_type: selectedDeviceType.value,
      fault_description: faultDescription.value.trim(),
      // 如果已登录，附带用户信息；未登录则匿名提交
      reporter_name: store.isLoggedIn ? store.loginUser?.name : undefined,
      reporter_userid: store.isLoggedIn ? store.loginUser?.userid : undefined,
    })

    submitResult.value = {
      success: true,
      repairId: result.repair_id,
      message: '报修已提交，IT人员将尽快处理',
    }

    // 3秒后自动返回状态页
    setTimeout(() => {
      goBack()
    }, 3000)
  } catch (e: any) {
    submitResult.value = {
      success: false,
      message: e.message || '提交失败，请稍后重试或联系IT管理员',
    }
  } finally {
    submitting.value = false
  }
}

/** 返回状态页 */
function goBack() {
  const sn = route.params.sn as string
  router.replace(`/${sn}`)
}

/** 关闭页面（小鱼终端返回主页） */
function handleClose() {
  closePage()
}

// ==========================================================================
// 生命周期
// ==========================================================================

onMounted(() => {
  // 如果终端绑定信息未加载，尝试加载
  if (!store.meetingroomInfo && terminalSn.value) {
    store.loadBinding(terminalSn.value)
  }
})
</script>

<template>
  <div class="w-full h-screen flex items-center justify-center bg-bg-primary p-4 md:p-8">
    <div class="bg-bg-card rounded-2xl border border-border-subtle shadow-2xl w-full max-w-[900px] max-h-[92vh] overflow-y-auto animate-slide-up">
      <!-- ================================================================ -->
      <!-- 标题栏 -->
      <!-- ================================================================ -->
      <div class="flex items-center justify-between p-6 border-b border-border-subtle">
        <div>
          <h2 class="text-2xl font-bold text-text-primary">🔧 设备报修</h2>
          <p class="text-sm text-text-secondary mt-1">
            {{ meetingroomName }}
            <span v-if="store.location"> · {{ store.location }}</span>
          </p>
        </div>
        <div class="flex items-center gap-3">
          <button
            class="px-4 py-2 rounded-lg text-base text-text-secondary border border-border-subtle hover:text-text-primary transition-colors"
            @click="handleClose"
          >
            关闭
          </button>
          <button
            class="text-text-secondary hover:text-text-primary text-2xl"
            @click="goBack"
          >
            ✕
          </button>
        </div>
      </div>

      <!-- ================================================================ -->
      <!-- 提交成功状态 -->
      <!-- ================================================================ -->
      <div v-if="submitResult?.success" class="p-12 text-center">
        <div class="text-6xl mb-4">✅</div>
        <h3 class="text-3xl font-bold text-status-free mb-3">报修已提交</h3>
        <p class="text-lg text-text-secondary mb-2">
          {{ submitResult.message }}
        </p>
        <p v-if="submitResult.repairId" class="text-base text-text-muted">
          报修编号: #{{ submitResult.repairId }}
        </p>
        <p class="text-sm text-text-muted mt-4">
          3 秒后自动返回...
        </p>
      </div>

      <!-- ================================================================ -->
      <!-- 报修表单 -->
      <!-- ================================================================ -->
      <div v-else class="p-6 space-y-6">
        <!-- 报修人信息 -->
        <div class="flex items-center gap-4">
          <span class="text-lg text-text-secondary min-w-[100px]">报修人</span>
          <div class="px-4 py-2 bg-bg-input rounded-lg text-lg text-text-primary">
            <span v-if="store.isLoggedIn">
              {{ store.loginUser?.name || store.loginUser?.userid }}
            </span>
            <span v-else class="text-text-muted">匿名报修（终端提交）</span>
          </div>
        </div>

        <!-- 设备类型选择 -->
        <div>
          <div class="flex items-center gap-4 mb-3">
            <span class="text-lg text-text-secondary min-w-[100px]">设备类型</span>
            <span class="text-sm text-text-muted">请选择故障设备</span>
          </div>
          <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 ml-0 md:ml-[116px]">
            <button
              v-for="opt in deviceTypeOptions"
              :key="opt.value"
              class="flex items-center gap-3 px-5 py-4 rounded-xl border-2 transition-all"
              :class="selectedDeviceType === opt.value
                ? 'border-status-free bg-status-free/10 text-text-primary'
                : 'border-border-subtle bg-bg-input text-text-secondary hover:text-text-primary hover:border-border-subtle'"
              @click="selectDeviceType(opt.value)"
            >
              <span class="text-3xl">{{ opt.icon }}</span>
              <span class="text-lg font-medium">{{ opt.label }}</span>
            </button>
          </div>
        </div>

        <!-- 故障描述 -->
        <div>
          <div class="flex items-center gap-4 mb-3">
            <span class="text-lg text-text-secondary min-w-[100px]">故障描述</span>
            <span class="text-sm text-text-muted">请描述故障现象</span>
          </div>
          <div class="ml-0 md:ml-[116px]">
            <textarea
              v-model="faultDescription"
              placeholder="请输入故障描述，例如：投影仪无法开机，指示灯不亮..."
              rows="4"
              maxlength="500"
              class="w-full px-4 py-3 bg-bg-input rounded-xl text-lg text-text-primary border border-border-subtle focus:border-status-free focus:outline-none resize-none"
            />
            <div class="flex items-center justify-between mt-2">
              <!-- 快捷选项 -->
              <div class="flex gap-2 flex-wrap">
                <button
                  v-for="quick in quickFaultOptions"
                  :key="quick"
                  class="px-3 py-1 text-sm bg-bg-input text-text-secondary rounded border border-border-subtle hover:text-text-primary hover:border-status-free transition-colors"
                  @click="quickFillFault(quick)"
                >
                  {{ quick }}
                </button>
              </div>
              <!-- 字数统计 -->
              <span class="text-sm text-text-muted">
                {{ faultDescription.length }} / 500
              </span>
            </div>
          </div>
        </div>

        <!-- 选中设备预览 -->
        <div
          v-if="selectedDeviceInfo"
          class="flex items-center gap-3 p-4 bg-bg-input rounded-xl"
        >
          <span class="text-3xl">{{ selectedDeviceInfo.icon }}</span>
          <div>
            <div class="text-lg text-text-primary font-medium">
              {{ selectedDeviceInfo.label }}
            </div>
            <div class="text-sm text-text-secondary">
              将创建IT工单并通知管理员
            </div>
          </div>
        </div>

        <!-- 提交失败提示 -->
        <div
          v-if="submitResult && !submitResult.success"
          class="p-4 bg-status-busy/10 border border-status-busy/30 rounded-xl text-status-busy text-lg"
        >
          ⚠ {{ submitResult.message }}
        </div>
      </div>

      <!-- ================================================================ -->
      <!-- 底部操作栏 -->
      <!-- ================================================================ -->
      <div
        v-if="!submitResult?.success"
        class="flex items-center justify-end gap-4 p-6 border-t border-border-subtle"
      >
        <button
          class="px-8 py-3 rounded-xl text-button font-medium bg-bg-input text-text-secondary border border-border-subtle hover:text-text-primary transition-colors"
          @click="goBack"
        >
          取消
        </button>
        <button
          class="px-10 py-3 rounded-xl text-button font-bold transition-all"
          :class="[
            canSubmit
              ? 'bg-status-free text-white hover:scale-105'
              : 'bg-text-muted text-text-secondary cursor-not-allowed',
          ]"
          :disabled="!canSubmit"
          @click="handleSubmit"
        >
          {{ submitting ? '提交中...' : '提交报修' }}
        </button>
      </div>
    </div>
  </div>
</template>