<template>
  <view class="page-container">
    <NavBar title="关键件查询" subTitle="请选择查询方式" />

    <view class="content-section">
      <view class="scan-section">
        <view class="scan-area" @click="startScan">
          <view class="scan-icon">
            <text class="icon-text">📷</text>
          </view>
          <text class="scan-title">自动扫描</text>
          <text class="scan-desc">点击启动扫描关键件编码</text>
        </view>
        
        <view v-if="isScanning" class="scanning-overlay">
          <view class="scanning-animation">
            <view class="scan-line"></view>
            <view class="scan-corners">
              <view class="corner corner-tl"></view>
              <view class="corner corner-tr"></view>
              <view class="corner corner-bl"></view>
              <view class="corner corner-br"></view>
            </view>
          </view>
          <text class="scanning-text">正在打开扫码...</text>
        </view>
      </view>

      <view class="divider">
        <view class="divider-line"></view>
        <text class="divider-text">或</text>
        <view class="divider-line"></view>
      </view>

      <view class="input-section">
        <view class="input-label">手动输入关键件ID</view>
        <view class="input-wrapper">
          <input 
            v-model="keypartCode" 
            class="code-input" 
            type="text" 
            placeholder="请输入关键件ID"
            placeholder-class="input-placeholder"
          />
        </view>
        <view class="confirm-btn" :class="{ active: keypartCode.length > 0 }" @click="confirmInput">
          <text class="btn-text">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import NavBar from '@/components/common/NavBar.vue'

const keypartCode = ref('');
const isScanning = ref(false);
const SCAN_TYPE = 'KEY_PART';
const MODULE_NAME = '关键件';

function parseScanResult(res) {
  const raw = String(res?.result || '').trim();
  if (!raw) return {};
  const splitIndex = raw.indexOf('-');
  if (splitIndex <= 0 || splitIndex >= raw.length - 1) return {};
  return {
    type: raw.slice(0, splitIndex),
    id: raw.slice(splitIndex + 1)
  };
}

function startScan() {
  if (isScanning.value) return;

  isScanning.value = true;

  const finish = () => {
    isScanning.value = false;
  }

  uni.scanCode({
    onlyFromCamera: true,
    scanType: ['qrCode', 'barCode'],
    success: (res) => {
      const { type, id } = parseScanResult(res);
      if (!type || !id) {
        uni.showToast({ title: '未获取到扫码结果', icon: 'none' })
        return
      }
      if (type !== SCAN_TYPE) {
        uni.showToast({ title: `二维码类型不匹配，请扫描${MODULE_NAME}二维码`, icon: 'none' })
        return
      }
      navigateToDetail(id)
    },
    fail: (err) => {
      const msg = String(err?.errMsg || '')
      if (msg.includes('cancel')) {
        uni.showToast({ title: '已取消扫码', icon: 'none' })
        return
      }
      if (msg.toLowerCase().includes('not support') || msg.toLowerCase().includes('not supported')) {
        uni.showToast({ title: '当前平台不支持扫码', icon: 'none' })
        return
      }
      uni.showToast({ title: '扫码失败', icon: 'none' })
    },
    complete: finish
  })
}

function confirmInput() {
  if (keypartCode.value.trim().length === 0) {
    uni.showToast({
      title: '请输入关键件ID',
      icon: 'none'
    });
    return;
  }
  
  navigateToDetail(keypartCode.value.trim(), 'input');
}

function navigateToDetail(id, type = 'scan') {
  let url
  if (type === 'scan') {
    url = `/pages_function/pages/keypart/detail?id=${encodeURIComponent(id)}&type=${type}`
  } else {
    url = `/pages_function/pages/keypart/detail?code=${id}&type=${type}`
  }
  uni.navigateTo({
    url: url
  });
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.content-section {
  padding: 40rpx 30rpx;
}

.scan-section {
  position: relative;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.scan-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &:active {
    opacity: 0.8;
  }
}

.scan-icon {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #1a3a5c 0%, #3d7ab5 100%);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  
  .icon-text {
    font-size: 72rpx;
  }
}

.scan-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a3a5c;
  margin-bottom: 12rpx;
}

.scan-desc {
  font-size: 26rpx;
  color: #999999;
}

.scanning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 58, 92, 0.95);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.scanning-animation {
  width: 300rpx;
  height: 300rpx;
  position: relative;
  margin-bottom: 40rpx;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 20rpx;
  right: 20rpx;
  height: 4rpx;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent);
  animation: scanMove 1.5s ease-in-out infinite;
}

@keyframes scanMove {
  0% {
    top: 20rpx;
  }
  50% {
    top: 260rpx;
  }
  100% {
    top: 20rpx;
  }
}

.scan-corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.corner {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-color: #ff8c00;
  border-style: solid;
  border-width: 0;
}

.corner-tl {
  top: 0;
  left: 0;
  border-top-width: 6rpx;
  border-left-width: 6rpx;
  border-top-left-radius: 12rpx;
}

.corner-tr {
  top: 0;
  right: 0;
  border-top-width: 6rpx;
  border-right-width: 6rpx;
  border-top-right-radius: 12rpx;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 6rpx;
  border-left-width: 6rpx;
  border-bottom-left-radius: 12rpx;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-bottom-width: 6rpx;
  border-right-width: 6rpx;
  border-bottom-right-radius: 12rpx;
}

.scanning-text {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 30rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .divider-line {
    flex: 1;
    height: 2rpx;
    background: #e8eaed;
  }
  
  .divider-text {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

.input-section {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.input-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a3a5c;
  margin-bottom: 24rpx;
}

.input-wrapper {
  margin-bottom: 30rpx;
}

.code-input {
  width: 100%;
  height: 96rpx;
  background: #f5f7fa;
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333333;
  border: 2rpx solid transparent;
  
  &:focus {
    border-color: #1a3a5c;
    background: #ffffff;
  }
}

.input-placeholder {
  color: #c0c4cc;
}

.confirm-btn {
  height: 96rpx;
  background: #c0c4cc;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  &.active {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
    
    &:active {
      opacity: 0.8;
      transform: scale(0.98);
    }
  }
  
  .btn-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
