<template>
  <navbar-back title="试剂瓶回收"></navbar-back>
  <view class="p8">
    <u-sticky>
      <view class="x-bc bg-w" v-if="listData.length > 0">
        <checkbox-switch v-model="allChecked">全选</checkbox-switch>
        <view class="pl16">
          <up-button size="small" style="width: 60px" type="primary" text="回收" @click="handleSubmit"></up-button>
        </view>
      </view>
    </u-sticky>
    <scroll-view style="height: 90vh" scroll-y scroll-with-animation @scrolltolower="handleScrolltolower">
      <u-checkbox-group placement="column" v-model="detailIds">
        <view class="x-f border-b" v-for="(item, index) in listData">
          <u-checkbox :name="item.id"></u-checkbox>
          <view class="data-item">
            <view
              >试剂瓶名称：<text>{{ item.materialName }}</text></view
            >
            <view
              >类型：<text>{{ item.materialType }}</text></view
            >
            <view
              >数量：<text>{{ item.quantity }}</text></view
            >
            <view
              >清洗人：<text>{{ item.operator }}</text></view
            >
            <view
              >清洗日期：<text>{{ nx.$dayjs(item.operatorDate).format('YYYY-MM-DD') }}</text></view
            >
          </view>
        </view>
      </u-checkbox-group>
      <up-loadmore v-if="listData.length > 0" :status="loadStatus" />
      <up-empty v-else mode="data" text="暂无数据" marginTop="50"> </up-empty>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useListData } from '@/nx/hooks/usePageListData'
import { onShow } from '@dcloudio/uni-app'
import nx from '@/nx'

const allChecked = ref(false)
const detailIds = ref([])
watch(allChecked, value => {
  if (value) {
    detailIds.value = listData.value.map(item => item.id)
  } else {
    detailIds.value = []
  }
})
const searchParams = computed(() => {
  return {
    treatmentStatus: '0',
	businessType:'清洗回收',
    pageSize: 999
  }
})
const { listData, scrollToLower, loadStatus, getInitData } = useListData({
  searchParams,
  api: nx.$api.material.getMaterialUseEndReuseDetailPage
})

onShow(() => {
  getInitData()
})
function handleScrolltolower() {
  scrollToLower()
}
function handleSubmit() {
  if (detailIds.value.length === 0) {
    return uni.showToast({
      title: '请选择要回收的试剂瓶',
      icon: 'none'
    })
  }
  nx.$api.material.reuse(detailIds.value).then(res => {
    uni.showToast({
      title: '回收成功',
      icon: 'none'
    })
    getInitData()
  })
}
</script>

<style lang="scss" scoped>
.data-item {
  padding: 8px;
  color: #909399;
  text {
    color: #000;
  }
}
</style>
