<script setup lang="ts">
import { computed, ref } from 'vue'
import { KbxBarcodeCapture, KbxProblemFeedback, KbxWmsActionButton, KbxWmsMobilePage, playKbxWmsFeedback, useKbxNetworkState } from '@kbx/ui'
import { countingScreen } from './counting.definition'
import { createWmsExecutionNotConnectedProblem, wmsFrontendScenarioMode } from '../shared/wmsFrontendCapability'
const props=defineProps<{taskId:string}>()
const {online}=useKbxNetworkState()
const stage=ref<'location'|'item'|'counted'>('location')
const location=ref('')
const item=ref('')
const counted=ref(0)
const bookQty=3
const expectedLocation='C-01-01'
const expectedBarcode='8801234567003'
const message=ref('실사 위치를 스캔하세요.')
const problem=createWmsExecutionNotConnectedProblem('재고 실사')
const difference=computed(()=>counted.value-bookQty)
function scan(value:string){
  if(!wmsFrontendScenarioMode)return
  if(stage.value==='location'){
    if(value!==expectedLocation){message.value=`다른 위치입니다. 실사 위치 ${expectedLocation}로 이동하세요.`;playKbxWmsFeedback('error');return}
    location.value=value;stage.value='item';message.value='실사 상품을 스캔하세요.';playKbxWmsFeedback('success');return
  }
  if(stage.value==='item'){
    if(value!==expectedBarcode){message.value=`다른 상품입니다. 필요한 바코드는 ${expectedBarcode}입니다.`;playKbxWmsFeedback('error');return}
    counted.value+=1;item.value=value;message.value=`실사 ${counted.value}개를 확인했습니다. 계속 스캔하거나 수량을 확정하세요.`;playKbxWmsFeedback('success')
  }
}
function finish(){stage.value='counted';message.value=difference.value===0?'장부수량과 일치합니다.':'차이가 있습니다. 운영에서는 관리자 확인 대상으로 Server에 등록해야 합니다.';playKbxWmsFeedback(difference.value===0?'success':'warning')}
function reset(){stage.value='location';location.value='';item.value='';counted.value=0;message.value='실사 위치를 스캔하세요.'}
</script>
<template><KbxWmsMobilePage :screen="countingScreen" :progress="stage==='counted'?'실사완료':'실사중'" :task-context="`Task ${props.taskId}`" :online="online" :actions-visible="wmsFrontendScenarioMode"><template #notice><KbxProblemFeedback v-if="!wmsFrontendScenarioMode" :problem="problem" :dismissible="false" /></template><template v-if="wmsFrontendScenarioMode"><p class="msg" role="status" aria-live="polite">{{message}}</p><div v-if="location" class="box"><small>LOCATION</small><strong>{{location}}</strong></div><div v-if="item" class="box"><small>상품</small><strong>기능성 양말</strong><span>{{item}}</span><p>실사 {{counted}} · 장부 {{bookQty}} · 차이 {{difference>0?'+':''}}{{difference}}</p></div><KbxBarcodeCapture v-if="stage!=='counted'" :enabled="online" :label="stage==='location'?'LOCATION SCAN':'ITEM SCAN'" @scan="event=>scan(event.normalizedValue)" /></template><template #actions><template v-if="wmsFrontendScenarioMode"><KbxWmsActionButton v-if="stage==='item'" label="수량 확정" :disabled="!online" @click="finish"/><KbxWmsActionButton v-else-if="stage==='counted'" label="다음 위치" @click="reset"/></template></template></KbxWmsMobilePage></template>
<style scoped>.msg{font-weight:650}.box{display:flex;flex-direction:column;gap:var(--kbx-space-1);padding:var(--kbx-space-4);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-lg);margin-bottom:var(--kbx-space-3)}.box small,.box span{color:var(--kbx-color-text-muted)}.box strong{font-size:var(--kbx-font-2xl)}.box p{font-size:var(--kbx-font-lg);font-weight:650}</style>
