<template>
	<view>
		<el-popup ref="popup" direction="bottom" @close="onClose">
			<view class="title">商品参数</view>
			<view style="width: 100%; height: 70rpx;"></view>
			<scroll-view :style="{ 'max-height' : (windowHeight / 2) + 'px' }" scroll-y>
				<view class="wrapper">
					<view class="attr-list">
						<view class="attr-box" v-for="(item,index) in list" :key="index">
							<text>{{ item.name }}</text>
							<text>{{ item.value }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</el-popup>
	</view>
</template>

<script setup>
	import { nextTick, onMounted, ref, watch } from "vue";
	import { inArray } from "@/el-ui/libs/check.js";
	
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue"]);
	
	const { windowHeight } = uni.getSystemInfoSync();
	
	const popup = ref();
	onMounted(()=>{
		nextTick(()=>{
			props.modelValue && popup.value?.open();
		})
	})
	
	const onClose = ()=>{
		emits("update:modelValue",false);
	}
	
	watch(()=>props.modelValue,(value)=>{
		if(value){
			nextTick(()=>{
				popup.value?.open();
			})
		}else{
			nextTick(()=>{
				popup.value?.close();
			})
		}
	});
	
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 36rpx;
		position: absolute;
		left: 0;
		top: 32rpx;
	}
	.wrapper {
		padding: 0rpx;
		.attr-list {
			.attr-box {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				flex-direction: row;
				text {
					font-size: 28rpx;
					&:nth-child(1){
						width: 150rpx;
						overflow: hidden;
						white-space: nowrap; 
						overflow: hidden; 
						text-overflow: ellipsis;
					}
					&:nth-child(2){
						overflow: hidden;
						white-space: nowrap; 
						overflow: hidden; 
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>