<template>
  <!-- 钥匙使用申请组件模板 -->
  <div class="p-4">
    <h2 class="text-xl font-bold text-blue-400 mb-4">钥匙使用申请</h2>
    
    <!-- 钥匙信息展示区域 -->
    <el-form :model="formData" label-width="120px" class="mb-6">
      <el-form-item label="槽位信息">
        <el-input v-model="formData.keySlot" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="钥匙名称">
        <el-input v-model="formData.keyName" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="当前状态">
        <el-input v-model="formData.keyStatus" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="申请人">
        <el-input v-model="formData.applicant" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="申请事由" required>
        <el-input
          v-model="formData.reason"
          type="textarea"
          :rows="4"
          placeholder="请详细填写钥匙使用申请的具体事由..."
        ></el-input>
      </el-form-item>
    </el-form>
    
    <!-- 操作按钮区域 -->
    <div class="flex justify-end gap-4">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交申请</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 钥匙使用申请组件
 * 用于用户提交钥匙使用申请，显示钥匙信息并收集申请事由
 */
import { ref, onMounted, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

// 路由相关
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 计算当前登录用户名称
const currentUserName = computed(() => {
  if (userStore.userInfo && userStore.userInfo.name) {
    return userStore.userInfo.name
  }
  return '管理员' // 默认用户名
})

// 表单数据
const formData = reactive({
  keySlot: '',        // 槽位信息
  keyName: '',        // 钥匙名称
  keyStatus: '',      // 当前状态
  applicant: '',      // 申请人，将从用户状态中获取
  reason: ''          // 申请事由
})

/**
 * 组件挂载时初始化数据
 * 从路由参数中获取钥匙信息（如果有）
 */
onMounted(() => {
  // 设置当前登录用户为申请人
  formData.applicant = currentUserName.value
  console.log('当前登录用户:', formData.applicant)
  
  // 从路由查询参数中获取钥匙信息
  console.log('路由查询参数:', route.query)
  const keyDataParam = route.query.keyData as string
  console.log('从路由查询参数获取的钥匙数据:', keyDataParam)
  if (keyDataParam) {
    try {
      const keyData = JSON.parse(keyDataParam)
      
      // 直接使用提取好的钥匙信息
      formData.keySlot = keyData.keySlot || ''
      formData.keyName = keyData.keyName || ''
      formData.keyStatus = keyData.keyStatus || ''
      
      // 如果直接获取失败，仍然保留从keyDatas中提取的逻辑作为后备
      if (!formData.keyName || !formData.keyStatus) {
        if (keyData.keyDatas && Array.isArray(keyData.keyDatas)) {
          // 提取钥匙名称
          if (!formData.keyName) {
            const nameData = keyData.keyDatas.find((item: any) => item.infotype === '钥匙名称：')
            if (nameData && nameData.status && nameData.status.length > 0) {
              formData.keyName = nameData.status[0].value
            }
          }
          
          // 提取钥匙状态
          if (!formData.keyStatus) {
            const statusData = keyData.keyDatas.find((item: any) => item.infotype === '钥匙状态：')
            if (statusData && statusData.status && statusData.status.length > 0) {
              formData.keyStatus = statusData.status[0].value
            }
          }
        }
      }
      
      console.log('表单数据初始化完成:', formData)
    } catch (error) {
      console.error('解析钥匙数据失败:', error)
      ElMessage.error('获取钥匙信息失败，请重试')
    }
  }
})

/**
 * 提交申请处理函数
 * 验证表单并提交数据
 */
const handleSubmit = () => {
  // 验证申请事由是否填写
  if (!formData.reason.trim()) {
    ElMessage.warning('请填写申请事由')
    return
  }
  
  // 模拟提交申请
  console.log('提交申请数据:', formData)
  
  // 显示成功提示
  ElMessage.success('钥匙使用申请已提交成功')
  
  // 跳转回钥匙管理页面
  router.push('/Key/KeyManager')
}

/**
 * 取消申请处理函数
 */
const handleCancel = () => {
  // 返回上一页或跳转回钥匙管理页面
  const fromParam = route.params.from as string
  if (fromParam === 'keyManager') {
    router.push('/Key/KeyManager')
  } else {
    router.back()
  }
}
</script>

<style scoped>
/**
 * 钥匙使用申请组件样式
 * 保持与系统整体风格一致，使用空军蓝配色和透明背景
 */
/* 设置页面背景为透明 */
.p-4 {
  background-color: transparent !important;
}

/* 表单样式 */
:deep(.el-form) {
  background: rgba(12, 43, 77, 0.7) !important;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #68c9ff;
  backdrop-filter: blur(5px);
}

/* 表单标签样式 */
:deep(.el-form-item__label) {
  color: #68c9ff !important;
  font-weight: 500;
}

/* 输入框样式 */
:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #68c9ff !important;
}

:deep(.el-input__inner) {
  color: #b6dfff !important;
  background: transparent !important;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #88b6d9 !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* 标题样式 */
.text-xl {
  font-size: 20px;
}

.font-bold {
  font-weight: 600;
}

.text-blue-400 {
  color: #68c9ff;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

/* 按钮组样式 */
.flex {
  display: flex;
}

.justify-end {
  justify-content: flex-end;
}

.gap-4 {
  gap: 16px;
}
</style>