<template>
  <navbar-back title="样品调拨"></navbar-back>
  <view class="pl8 pr8">
    <view class="border-b p6 x-f"
      ><view class="pr16">申请人：</view><text>{{ applyData.applyUser }}</text></view
    >
    <view class="border-b p6"
      ><text>申请时间：</text><text>{{ nx.$dayjs(applyData.applyTime).format('YYYY-MM-DD HH:mm:ss') }}</text></view
    >
    <view class="border-b p6"
      ><text>申请事由：</text><text>{{ applyData.applyContent }}</text></view
    >
    <up-input
      v-if="showAction"
      style="padding-top: 20px"
      border="bottom"
      v-model="sampleCode"
      placeholder="请扫描样品编号来确认样品"
      prefixIcon="scan"
      fontSize="16"
      prefixIconStyle="font-size: 30px;"
      @confirm="debouncedHandleScan(sampleCode)"
    >
    </up-input>

    <uni-section type="line" title="申请调拨样品明细" titleFontSize="15px">
      <scroll-view style="height: 49vh" scroll-y scroll-with-animation>
        <up-checkbox-group v-model="checkedSampleCodes" placement="column">
          <uni-card margin="5px" v-for="item in sampleList" class="sample-item">
            <view
              >样品名称：<text class="black">{{ item.sampleName }}</text></view
            >
            <view class="mt4"
              >归库编码：<text class="black">{{ item.sampleReturnCode }}</text></view
            >
            <view class="mt4"
              >样品库名称：<text class="black">{{ item.warehouseName }}</text></view
            >
            <view class="mt4"
              >库位码：<text class="black">{{ item.warehouseLocationCode }}</text></view
            >
            <up-checkbox v-if="showAction" class="item-checkbox" :name="item.sampleReturnCode"> </up-checkbox>
          </uni-card>
        </up-checkbox-group>
      </scroll-view>
      <up-button
        v-if="showAction"
        type="primary"
        :loading="btnLoading"
        :disabled="checkedSampleCodes.length !== sampleList.length"
        style="width: 50%"
        text="提交"
        @click="handleSubmit"
      ></up-button>
    </uni-section>
  </view>
</template>

<script setup>
import { computed, ref, toRefs, watch } from 'vue'
import nx from '@/nx'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { debounce } from 'lodash'

let btnLoading = ref(false)
let sampleCode = ref('')
let applyData = ref({})
let sampleList = ref([])

const showAction = computed(() => {
  return applyData.value.finishStatus === 'pending'
})
async function getDetailList() {
  const { list } = await nx.$api.sampleWarehouse.querySampleDispatchApplyDetail({
    parentId: applyData.value.id,
    pageSize: 999
  })
  sampleList.value = list
}
let checkedSampleCodes = ref([])

const { flagInfo, scanQRInfo } = toRefs(nx.$store('biz'))
onLoad(async options => {
  applyData.value = flagInfo.value
  getDetailList()
})
watch(scanQRInfo, newVal => {
  debouncedHandleScan(newVal)
})
const debouncedHandleScan = debounce(val => {
  if (!val) return
  scanQRInfo.value = ''
  if (nx.$router.getCurrentPage().route !== 'pages/sampleWarehouse/sampleDispatchExternal/detail') return
  try {
    sampleCode.value = val
    if (
      sampleCode.value === sampleList.value.find(item => item.sampleReturnCode === sampleCode.value)?.sampleReturnCode
    ) {
      if (!checkedSampleCodes.value.includes(sampleCode.value)) {
        checkedSampleCodes.value.push(sampleCode.value)
      } else {
        uni.showToast({
          title: '请勿重复扫描',
          icon: 'none'
        })
      }
    } else {
      uni.showToast({
        title: '该样品不在申请范围内',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '请扫描正确的样品编码',
      icon: 'none'
    })
  }
}, 300)
onShow(() => {
  scanQRInfo.value = ''
})

async function handleSubmit() {
  btnLoading.value = true
  await nx.$api.sampleWarehouse.execSampleDispatch({ id: applyData.value.id }).finally(() => {
    btnLoading.value = false
  })
  uni.showToast({
    title: '调拨成功',
    icon: 'none'
  })
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.sample-item {
  position: relative;
  pointer-events: none;
  .item-checkbox {
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
</style>
