<template>
	<view class="popup-container" v-if="visible">
		<view class="popup-content">
			<scroll-view :scroll-top="scrollTop" direction="vertical" class="scroll-Y" scroll-with-animation="true"
				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" @scrollend="end"
				:show-scrollbar="showScrollbar">
				<view v-for="(item, index) in matBaseInfoList" :key="index" class="list-item"
					@click="onItemClick(item)">
					{{ item.matCode }} - {{ item.matName }}
				</view>
			</scroll-view>
		</view>
		<button class="button1" @click="handleClose">关&nbsp;&nbsp;&nbsp;&nbsp;闭</button>
	</view>
</template>

<script>
	import {
		getConfig
	} from '@/config.js';

	import {
		saveConfig
	} from '@/config.js';

	import {
		getServerIPAndPort
	} from '@/config.js';

	export default {
		data() {
			return {
				visible: false,
				matCodeCondition: '',
				userName: '',
				matBaseInfoList: [], // 用于存储物料数据的数组
				scrollTop: 0,
				showScrollbar: true
			};
		},
		methods: {
			show() {
				this.visible = true;
				this.matCodeCondition = getConfig('matCodeCondition', '');
				console.log('scroll - view height:', this.matCodeCondition);

				this.userName = getConfig('userName', '');
				var serverIPAndPort = getServerIPAndPort();

				//获取列表
				uni.request({
					url: 'http://' + serverIPAndPort + '/matBaseInfo/getMatBaseInfo', // 请求的接口地址
					method: 'POST', // 设置请求方式为 POST
					data: {
						"MatCode": this.matCodeCondition,
						"MatName": "",
						"MatSpec": "",
						"IsEnable": null,
						"PageNumber": 1,
						"PageSize": 20,
						"UserName": this.userName,
						"DeviceType": "PDA"
					},
					header: {
						'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
					},
					success: (res) => {
						// 请求成功的回调函数
						if (res.statusCode === 200) {
							//接口返回数据为200 表示获取成功！
							if (res.data.code == 200) {
								if (res.data.data.lists != null && res.data.data.lists.length > 0) {
									this.matBaseInfoList = res.data.data.lists;
									console.log('matBaseInfoList:', this.matBaseInfoList);
								} else {
									this.visible = false;
									this.matBaseInfoList = null;
									uni.showToast({
										title: '根据查询条件未查询到物料!',
										icon: 'none',
										duration: 2000
									});
								}
							} else {
								this.visible = false;
								this.matBaseInfoList = null;
								uni.showToast({
									title: '查询物料失败:' + res.data.message,
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							uni.showToast({
								title: '查询物料失败:服务器返回错误状态码' + res.statusCode,
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						uni.showToast({
							title: '请求失败:' + err.errMsg,
							icon: 'none',
							duration: 3000
						});
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});
			},
			handleClose() {
				this.visible = false;
				this.$emit('close');
			},
			onItemClick(item) {
				uni.showToast({
					title: '选择成功',
					icon: 'none',
					duration: 1200
				});
				this.visible = false;
				this.$emit('selected', item);
			},
			upper() {
				console.log('scrolltoupper');
			},
			lower() {
				console.log('scrolltolower');
			},
			scroll() {
				console.log('scroll');
			},
			end() {
				console.log('scrollend');
			}
		}
	};
</script>

<style scoped>
	.list-item {
		padding: 10px;
		border-bottom: 1px solid #ccc;
		font-size: 35rpx;
	}

	.popup-container {
		width: 100%;
		z-index: 2;
		overflow: auto;
	}

	.popup-content {
		border: black;
		border-radius: 10rpx;
		border: 1rpx solid black;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 650rpx;
		height: 600rpx;
		background-color: white;
		z-index: 2;
			overflow: auto;
	}

	.button1 {
		background-color: darkred;
		color: white;
		bottom: 0;
		top: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 80rpx;
		position: absolute;

	}
</style>