<template>
  <view class="container">
    <view class="list">
		<view class="item" v-for="(item, index) in list" :key="index" >
			<view class="dec">
			  <view>日计划编码：</view><view>{{ item.planDayCode }}</view>
			</view>
			<view class="dec">
			  <view>工序编码：</view><view>{{ item.processCode }}</view>
			</view>
			<view class="dec">
			  <view>物料号：</view><view>{{ item.repMaterialCode }}</view>
			</view>
			<view class="dec">
			  <view>数量：</view><view>{{ item.totalMaterialCounts }}</view>
			</view>
		</view> 
		<view style="height: 94rpx;padding-top: 30rpx;">
				<u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
	
	<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
  </view>
</template>

<script setup lang="ts">
import {
  onLoad,
  onShow,
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  getCurrentInstance
} from 'vue'
import * as orderDayPlanListApi from '@/api/mes/orderDay/index.ts'

const {proxy} = getCurrentInstance()
const loading = ref(false)
const status = ref('loadmore') //是否显示没有更多了
const type = ref()
const list = ref([])

const params = ref({
  pageNo: 1,
  pageSize: 10,
  planMaserCode: ''
})

function getBomInspectList() {
	console.log(status.value)
	if (status.value == 'nomore') return
	status.value = 'loading'
	proxy.$modal.loading('加载中')
	orderDayPlanListApi.getBomInfoList(params.value).then((res) => {
		proxy.$modal.closeLoading()
		console.log(params.value.pageNo)
		console.log(res.data.list.length)
		if (res.data.list.length > 0) {
			list.value = list.value.concat(res.data.list)
			params.value.pageNo++
			status.value = 'loadmore'
		} else {
		  status.value = 'nomore'
		}
	  }).catch(() => {
		  proxy.$modal.closeLoading()
	})
}

//滑动到底部展示
onReachBottom(() => {
  status.value = 'loadmore'	
  getBomInspectList()
})



onLoad((option) => {
  if (option.planMaserCode) {
    params.value.planMaserCode = option.planMaserCode
  }
})
onShow(() => {
  getBomInspectList()
})

</script>

<style lang="scss" scoped>
	.container{
		background: #f5f5f5;
		min-height: 100vh;
	}
	.list {
		background: #f5f5f5;
		margin-top: 20rpx;
		.item {
			padding: 30rpx 30rpx 0px 30rpx;
			margin-top: 20rpx;
			background: white;
			position: relative;
			.title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				.title-txt {
					color: #409eff;
					font-weight: bold;
					font-size: 36rpx;
					width: 0px;
					flex: 1;
					word-wrap: break-word;
				}
				.time {
					color: #919191;
				}
			}
			.dec {
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				view {
					&:nth-child(1){
						width: 200rpx;;
					}
					&:nth-child(2){
					color: #999999;
						flex: 1;
						width: 0px;
						word-wrap: break-word;
					}
				}
			}
			.last {
				padding-bottom: 30rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #E4E4E4;
				padding: 20rpx 0px;
				height: 90rpx;
			}
		}
	}
</style>