<template>
	<u-popup mode="bottom" border-radius="20" :popup="false" v-model="show" :maskCloseAble="true" length="auto"
	 :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999" close-icon="cross" :closeable="true">
		<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" class="ordergoodlist2" style="margin-bottom: 20rpx;">
			<view class="title-box">
				<view class="title">商品清单</view>
				<view class="tips">共{{list.length}}件</view>
			</view>
			<view class="goodbox update-goodbox" v-for="(cx, i) in list" :key="i">
				<image :src="cx.CoverImagePath" style="width: 100px; height: 100px" />
				<view style="width: calc(100% - 110px);height: 100px;display: flex;flex-direction: column;margin-left: 10px;justify-content: space-between;">
					<Text class='topic_cont_text'>{{cx.GoodsName}}</Text>
					<view style='width: calc(100% - 110px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>
						<view v-for="(attr, index2) in cx.SpecificationList" :key="index2">
							<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>规格:{{attr}}</Text>
						</view>
					</view>
					<view style="width: 100%;display: flex;flex-direction: row;align-items:center;justify-content: space-between;">
						<view class="left" :style="{ color: mc }">
							<text class="small">￥</text>
							<text style='font-size: 40rpx;'>{{ cx.Final_Price.toString().split(".")[0] }}</text>
							<text class="small">.{{ cx.Final_Price.toString().split(".")[1] || "00" }}</text>
						</view>
						<Text style='color: #A0A09D;font-size: 24rpx;'>X{{cx.Number}}</Text>
					</view>
				</view>
			</view>
			</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default {
		props: ["list"],
		data() {
			return {
				show: true,
				mc: "",
			};
		},
		mounted() {
			this.mc = this.$uiConfig.mainColor;
			console.log(this.mc)
		},
		methods: {
			popupClose() {
				this.$emit("close");
			},
		},
	};
</script>

<style>
	.ordergoodlist2 {
		height: 75vh;
		padding-bottom: 50px;
		text-align: left !important;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow-y: auto;
		position: relative;
		padding: 69px 10px 0 10px;
	}

	.ordergoodlist2 .title-box {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		z-index: 2;
	}

	.ordergoodlist2 .title-box .title {
		font-size: 22px;
		color: #000;
		padding: 20px;
		background: #fff;
		flex: 1;
	}

	.ordergoodlist2 .title-box .tips {
		font-size: 13px;
		color: #777;
		flex: 1;
		text-align: right;
		padding-right: 12px;
	}

	.ordergoodlist2 .goodbox.update-goodbox {
		width: 100%;
		padding-bottom: 10px;
		border-bottom: 1px solid #f5f5f5;
		margin-bottom: 10px;
		display: flex;
	}

	.ordergoodlist2 .goodbox.update-goodbox:last-child {
		border: none;
	}

	.ordergoodlist2 .image {
		width: 160rpx;
		height: 160rpx;
	}

	.ordergoodlist2 .topic_cont_text {
		font-size: 26rpx;
		max-height: 80rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}
</style>
