<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="ordergoodlist">
			<view class="title-box">
				<view class="title">商品清单</view>
				<view class="tips">共{{list.length}}件</view>
			</view>
			<view class="goodbox update-goodbox" v-for="(y, i) in list" :key="i">
				<image :src="y.cover_pic" mode="aspectFill" class="image" />
				<view class="goodinfo">
					<view class="name">
						<view v-if="y.marketingLogo.iswords && y.marketingLogo.iswords==1&& y.marketingLogo.words!=''" class="Logo"
						 :style="{color: y.marketingLogo.wordsColor,
						background:y.marketingLogo.wordsBack ,}">
							{{y.marketingLogo.words}}
						</view>
						<image v-if="y.marketingLogo.iswords&&y.marketingLogo.iswords==2&& y.marketingLogo.ico!=''" mode="heightFix" :src="y.marketingLogo.ico"
						 style=" height: 12px;margin-right: 5px" />
						{{ y.name }}
					</view>
					<view style="margin-bottom: 5px;height: 20px;" v-if="y.freeShippingDescription!=null&&y.freeShippingDescription!=''">
						<view style="font-size: 12px;color: #909399;padding: 3px 5px;background: #f4f4f5;display: inline-block;" class="freeShippingstyle"
						 v-if="y.freeShipping_Use==false&&y.freeShippingDescription!=null&&y.freeShippingDescription!=''">
							{{y.freeShippingDescription!=null ?y.freeShippingDescription:''}}
						</view>
						<view style="font-size: 12px;color: #FF4048;padding: 3px 5px;background: #fdf6ec;display: inline-block;" class="freeShippingstyle"
						 v-if="y.freeShipping_Use==true&&y.freeShippingDescription!=null&&y.freeShippingDescription!=''">
							{{y.freeShippingDescription!=null ?y.freeShippingDescription:''}}
						</view>
					</view>
					<view class="attr">已选择
						<span v-for="(item,index) in y.attr_list" :key="index">{{ item.attr_group_name}}:{{ item.attr_name}}</span>
					</view>
					<view class="price">
						<view class="left" :style="{ color: mc }">
							<text class="small">￥</text>
							<text>{{ y.goods_attr.price}}</text>
						</view>
						<view class="right">x{{ y.num }}</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;
		},
		methods: {
			popupClose() {
				this.$emit("close");
			},
		},
	};
</script>

<style>
	.ordergoodlist {
		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;
	}

	.ordergoodlist .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;
	}

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

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

	.ordergoodlist .goodbox.update-goodbox {
		width: calc(100% - 20px);
		padding-bottom: 10px;
		border-bottom: 1px solid #f5f5f5;
		margin-bottom: 10px;
	}

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

	.ordergoodlist .freeShippingstyle {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.ordergoodlist .Logo {
		padding: 1px 5px;
		display: inline-block;
		font-size: 22rpx;
		margin-right: 5rpx;
		border-radius: 4px;
	}
</style>
