<template>
  <view>
    <view v-if="showAction && checkInfo.id" class="x-bc mt8">
      <up-button size="small" style="width: 60px" text="取消" @click="handleCancel"></up-button>
      <up-button size="small" style="width: 60px" type="primary" text="添加" @click="handleAdd"></up-button>
    </view>
    <up-input
      style="padding-top: 20px"
      border="bottom"
      v-model="materialCode"
      placeholder="请扫描需要使用的物料编号"
      prefixIcon="scan"
      fontSize="16"
      prefixIconStyle="font-size: 30px;"
      @confirm="getMaterialInfo"
    >
    </up-input>
    <view class="pl8 pr8" v-if="checkInfo.id">
      <view class="mt4">
        <view
          >危化品名称：<text class="black">{{ checkInfo.name }}</text></view
        >
      </view>
      <view class="mt4">
        <view
          >规格型号：<text class="black">{{ checkInfo.modelNo }}</text></view
        >
      </view>
      <view class="mt4">
        <view
          >计量单位：<text class="black">{{ checkInfo.unit }}</text></view
        >
      </view>
      <view class="mt4">
        <view
          >总量：<text class="black">{{ checkInfo.remainingVolume }}</text></view
        >
      </view>
      <view class="x-f mt8">
        <text>使用量：</text>
        <up-input placeholder="请输入使用量" type="digit" v-model="operationQuantity"></up-input>
      </view>
	  <up-text v-if="operationQuantity>=Number(checkInfo.remainingVolume)" type="error"   text="使用量大于等于剩余量，请确认试剂已用完"></up-text>
      <view class="x-f mt8">
        <text class="pr16">用途：</text>
        <up-input placeholder="请输入用途" v-model="reason"></up-input>
      </view>
      <view class="x-f mt8">
        <text class="pr16">备注：</text>
        <up-input placeholder="请输入备注" v-model="remark"></up-input>
      </view>
    </view>
  </view>
</template>

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

let emits = defineEmits(['close', 'confirm'])
let props = defineProps({
  showAction: {
    type: Boolean,
    default: false
  },
  configInfo: {
	  type: Object,
	  default:()=>({})
  }
})

const { scanQRInfo } = toRefs(nx.$store('biz'))
const materialCode = ref('')
watch(scanQRInfo, newVal => {
  debouncedHandleScan(newVal)
})
const debouncedHandleScan = debounce(val => {
  if (!val) return
  scanQRInfo.value = ''
  if (nx.$router.getCurrentPage().route !== 'pages/material/useRecord/index') return
  try {
   const {code} = JSON.parse(val)
    materialCode.value = code
    getMaterialInfo()
  } catch (error) {
    uni.showToast({
      title: '请扫描正确的物料编码',
      icon: 'none'
    })
  }
}, 300)
onShow(() => {
  scanQRInfo.value = ''
})

let checkInfo = ref({})
async function getMaterialInfo() {
  if (materialCode.value === '') return
  let params = {
    code: materialCode.value,
    hazardous: 1,
    usageStatus: 1,
    useEndFlag: 0,
	businessType:'use_record'
  }
  const data = await nx.$api.material.queryMaterialInfo(params)
  if (!data) return uni.showToast({ title: '未查询到可以使用的危化品信息', icon: 'none' })
  checkInfo.value = data
  if(props.showAction) reason.value = '配置'+ props.configInfo.reason
}
const operationQuantity = ref('')
const reason = ref('')
const remark = ref('')

function handleCancel() {
  emits('close')
}
async function handleAdd() {
  if (!operationQuantity.value) return uni.showToast({ title: '请填写使用数量', icon: 'none' })
  const data = {
    infomationId: checkInfo.value.id,
    operationQuantity: operationQuantity.value,
    reason: reason.value,
    remark: remark.value,
    name: checkInfo.value.name,
    modelNo: checkInfo.value.modelNo
  }
  emits('confirm', data)
  handleCancel()
}
function handleReset() {
  materialCode.value = ''
  checkInfo.value = {}
  operationQuantity.value = ''
  reason.value = ''
  remark.value = ''
}
const formData = computed(() => ({
  infomationId: checkInfo.value.id,
  operationQuantity: operationQuantity.value,
  reason: reason.value,
  remark: remark.value
}))
defineExpose({
  formData,
  operationQuantity,
  handleReset
})
</script>

<style lang="scss" scoped></style>
