<template>
  <div class="content">
    <!-- 滚动列表 -->
    <scroll-view scroll-y @scrolltolower="onScrollTolower">
      <div class="list" v-for="(item, index) in tableList" @click="handleDetails(item)">
        <div style="margin-right: 8px">{{ index + 1 }}.</div>
        <div class="item">
          <div>类型名称: {{ item.maTypeNames }}</div>
          <div>已出库数量: {{ item.outNum || 0 }}</div>
          <div v-if="item.isConfirm == 2">确认人: {{ item.confirmPerson }}</div>
          <div v-if="item.isConfirm == 2">确认时间: {{ item.confirmTime }}</div>
          <div style="line-height: 1.8; display: flex; align-items: center">
            <span style="margin-right: 5px">确认状态:</span>
            <uni-tag
              :text="item.isConfirm == 2 ? '已确认' : '待确认'"
              :inverted="true"
              :type="item.isConfirm == 2 ? 'success' : 'error'"
            />
          </div>
          <div v-if="item.isConfirm == 2">确认备注: {{ item.remark }}</div>
        </div>
      </div>

      <div style="display: flex; justify-content: center; align-items: center; height: 50px">
        {{ '没有更多数据了~' }}
      </div>
    </scroll-view>
  </div>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getInfoByIdApi } from '@/services/materialsStation'

const itemId = ref(null)
const publishTask = ref(null)
const tableList = ref([])

onShow(() => {
  if (itemId.value) getList()
})

onLoad((opt) => {
  console.log('🚀 ~ onLoad ~ opt:', opt)
  itemId.value = opt.id
  publishTask.value = opt.publishTask
  console.log('🚀 ~ itemId.value:', itemId.value)
  // getList()
})

const onScrollTolower = () => {
  // if (finish.value) return
  // getList()
}

const getList = async () => {
  try {
    const res = await getInfoByIdApi({ id: itemId.value, publishTask: publishTask.value })
    tableList.value = res.data
  } catch (error) {
    console.log('🚀 ~ getList ~ error:', error)
  }
}
const handleDetails = (item) => {
  console.log('🚀 ~ handleDetails ~ item:', item)
  const params = {
    id: itemId.value,
    leaseSignId: item.leaseSignId,
    publishTask: item.publishTask,
    isConfirm: item.isConfirm
  }
  uni.navigateTo({
    url: `/pages/materialsStation/materialClerkConfirms/confirmDetails?params=${JSON.stringify(params)}`,
  })
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  height: calc(100vh - 147px);
  .query {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f0a037;
  }

  .list {
    min-height: 120px;
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 6px;
    padding: 8px;
    display: flex;
  }
}
</style>
