<template>
	<view class="popup-container" v-if="visible">
		<view class="popup-content">
			<scroll-view class="scroll-view" scroll-y="true">
<!-- 				<uni-list-item v-for="(item, index) in matBaseInfoList" :key="index" :title="item.matCode"
					:note="item.matName" :rightText="item.matSpec" @click="onItemClick(item)"></uni-list-item>
					 -->
					<view v-for="(item, index) in matBaseInfoList" :key="index" class="list-item" @click="onItemClick(item)">
					          {{ item.matCode }} - {{ item.matName }} - {{ item.matSpec }}
					        </view>
			</scroll-view>

			<button @click="handleClose">关闭</button>
		</view>
	</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: [], // 用于存储物料数据的数组
			};
		},
		methods: {
			show() {
				this.visible = true;
				this.matCodeCondition = getConfig('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;
								} else {
									this.visible = false;
									uni.showToast({
										title: '根据查询条件未查询到物料!',
										icon: 'none',
										duration: 1500
									});
								}

							} else {
								this.visible = false;
								uni.showToast({
									title: '查询物料失败:' + res.data.message,
									icon: 'none',
									duration: 1500
								});
							}

						} else {
							uni.showToast({
								title: '查询物料失败:服务器返回错误状态码' + res.statusCode,
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						uni.showToast({
							title: '查询物料失败:请求失败' + err,
							icon: 'none',
							duration: 1500
						});
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});

			},
			handleClose() {
				this.visible = false;
				this.$emit('close');
			},
			onItemClick(item) {
				this.visible = false;
				this.$emit('selected',item);
			}
		}
	};
</script>

<style scoped>
	.list-item {
	  padding: 10px;
	  border-bottom: 1px solid #ccc;
	}
	
	.popup-container {
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.popup-content {
		border-radius: 10rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 使用transform来居中 */
		width: 650rpx;
		max-height: 750rpx;
		background-color: rgba(0, 0, 0, 1);
		background-color: white;
		z-index: 2;
	}

	.scroll-view {
		max-width: 700rpx;
		/* 设置滚动区域的高度 */
	}
</style>