<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>
              <!-- <text class="small">.{{ y.goods_attr.price.split(".")[1] || "00" }}</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>
