<template>
  <navbar-back title="试剂瓶清洗"></navbar-back>
  <view class="pl8 pr8 pt16">
    <view>
      <text class="pl6">试剂瓶类型：</text>
      <uni-data-select v-model="materialType" :localdata="range" placeholder="请选择类型"></uni-data-select>
    </view>
    <view class="pt16">
      <text class="pl6">试剂瓶名称：</text>
      <up-input v-model="materialName" placeholder="请输入试剂瓶名称" />
    </view>
    <view class="pt16">
      <text class="pl6">数量：</text>
      <up-input v-model="quantity" placeholder="请输入数量" />
    </view>
    <view class="pt16">
      <text class="pl6">备注：</text>
      <up-input v-model="remark" placeholder="请输入备注" />
    </view>
    <up-button
      class="mt20"
      type="primary"
      :loading="btnLoading"
      style="width: 50%"
      text="提交"
      @click="handleSubmit"
    ></up-button>
  </view>
</template>

<script setup>
import { computed, ref, toRefs, watch, onMounted } from 'vue'
import nx from '@/nx'

const btnLoading = ref(false)
const range = ref([])
const materialType = ref('')
const materialName = ref('')
const quantity = ref('')
const remark = ref('清洗至pH检测为7')

async function handleSubmit() {
  if (!materialType.value) {
    return uni.showToast({
      title: '请选择类型',
      icon: 'none'
    })
  }
  if (!materialName.value) {
    return uni.showToast({
      title: '请输入试剂瓶名称',
      icon: 'none'
    })
  }
  if (!quantity.value) {
    return uni.showToast({
      title: '请输入数量',
      icon: 'none'
    })
  }
  btnLoading.value = true
  let params = {
    businessType: '清洗回收',
    remark: remark.value,
    detailList: [
      {
        materialName: materialName.value,
        materialType: materialType.value,
        quantity: quantity.value
      }
    ]
  }
  await nx.$api.material.addUseOver(params).finally(() => {
    btnLoading.value = false
  })
  uni.showToast({
    title: '提交成功',
    icon: 'none'
  })
  handleReset()
}
function handleReset() {
  remark.value = ''
  materialName.value = ''
  materialType.value = ''
  quantity.value = ''
}
onMounted(async () => {
  const data = await nx.$api.sys.getDataListByCategoryKey('试剂瓶类型')
  range.value = data.map(item => ({ text: item.name, value: item.name }))
})
</script>

<style lang="scss" scoped>
.sample-item {
  position: relative;
  pointer-events: none;
}
:deep(.uni-select__input-placeholder) {
  font-size: 16px;
}
</style>
