<template>
  <scroll-view scroll-y class="page">
    <view v-for="item in detailList" :key="item.id" class="card">
      <view class="head">📦 {{ item.goodsName }}</view>
      <view class="body">
        <view class="row">库存数量：<text class="value">{{ item.quantity }}</text></view>
        <view class="row">当前状态：<text class="status">{{ item.checkResult || '未盘点' }}</text></view>
      </view>

      <view class="actions" v-if="item.checkResult === '未盘点'">
        <button size="mini" class="check" @tap="openCheckModal(item)">去盘点</button>
      </view>
    </view>

    <view v-if="detailList.length===0 && !loading" class="empty">暂无更多数据</view>

    <!-- 盘点弹窗 -->
    <view v-if="showModal" class="modal-mask">
      <view class="modal">
        <view class="modal-title">盘点物资：{{ currentItem?.goodsName }}</view>
        <view class="modal-field">
          <text class="label">盘点数量：</text>
          <input type="number" v-model="checkForm.quantity" placeholder="请输入盘点数量" class="modal-input" />
        </view>
        <view class="modal-field">
          <text class="label">盘点结果：</text>
          <picker :range="statusOptions" :value="statusIndex" @change="onStatusChange">
            <view class="picker">{{ statusOptions[statusIndex] }}</view>
          </picker>
        </view>
        <view class="modal-actions">
          <button class="cancel" @tap="closeModal">取消</button>
          <button class="confirm" @tap="submitCheck">确认</button>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// @ts-ignore JS模块无类型声明
import { getConsumpationInventoryDetailIng, addComInventory } from '@/pages/api/fixedAssets.js'

type Item = Record<string, any>

const planId = ref<string | number>('')
const detailList = ref<Item[]>([])
const loading = ref(false)

const showModal = ref(false)
const currentItem = ref<Item | null>(null)
const statusOptions = ['盘亏', '账实相符', '盘盈']
const statusIndex = ref(1)
const checkForm = ref<{ quantity: string; status: number }>({ quantity: '', status: 1 })

async function loadList(id: string | number) {
  loading.value = true
  try {
    const res = await getConsumpationInventoryDetailIng(id)
    const list: any[] = (res?.data?.list) || (res?.data?.records) || (Array.isArray(res?.data) ? res.data : []) || []
    detailList.value = list
  } catch (e) {
    console.error(e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function openCheckModal(item: Item) {
  currentItem.value = item
  showModal.value = true
  checkForm.value = { quantity: '', status: 1 }
  statusIndex.value = 1
}

function onStatusChange(e: any) {
  statusIndex.value = e.detail.value
  checkForm.value.status = parseInt(e.detail.value)
}

function closeModal() { showModal.value = false }

async function submitCheck() {
  if (!checkForm.value.quantity) {
    uni.showToast({ title: '请输入盘点数量', icon: 'none' })
    return
  }
  try {
    await addComInventory({
      checkPlanId: planId.value,
      checkResult: checkForm.value.status,
      inventoryId: currentItem.value?.id,
      quantity: checkForm.value.quantity
    })
    uni.showToast({ title: '盘点成功', icon: 'none' })
    showModal.value = false
    await loadList(planId.value)
  } catch (e) {
    uni.showToast({ title: '盘点失败', icon: 'none' })
  }
}

onLoad((query) => {
  const id = query?.planId
  if (!id) {
    uni.showToast({ title: '缺少计划ID', icon: 'none' })
    return
  }
  planId.value = id
  loadList(id)
})
</script>

<style scoped>
.page { min-height: 100vh; padding: 24rpx; background: #f5f7fb; box-sizing: border-box;}
.card { background: #fff; border-radius: 16rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06); }
.head { font-size: 30rpx; color: #222; font-weight: 600; margin-bottom: 10rpx; }
.row { margin: 6rpx 0; color: #444; }
.value { color: #333; }
.status { color: #757575; }
.actions { margin-top: 8rpx; display: flex; justify-content: flex-end; }
button.check { background: #4b7aff; color: #fff; border-radius: 8rpx; padding: 6rpx 16rpx; }
.empty { color: #9a9aa0; text-align: center; padding: 24rpx 0; }

/* modal */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.modal { width: 86%; background: #fff; border-radius: 16rpx; padding: 24rpx; }
.modal-title { font-size: 30rpx; color: #222; font-weight: 600; margin-bottom: 16rpx; }
.modal-field { display: flex; align-items: center; margin-bottom: 12rpx; }
.label { color: #666; min-width: 160rpx; }
.modal-input { flex: 1; border: 2rpx solid #e0e0e0; border-radius: 8rpx; padding: 8rpx 12rpx; }
.picker { border: 2rpx solid #e0e0e0; border-radius: 8rpx; padding: 10rpx 12rpx; color: #333; }
.modal-actions { margin-top: 16rpx; display: flex; justify-content: flex-end; gap: 16rpx; }
button.cancel { background: #eceff1; color: #333; border-radius: 8rpx; padding: 8rpx 16rpx; }
button.confirm { background: #4b7aff; color: #fff; border-radius: 8rpx; padding: 8rpx 16rpx; }
</style>
