<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.goods_info.pic_url" 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.goods_info.name}}</Text>
				<view style='width: calc(100% - 110px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>
					<view v-for="(attr, index2) in cx.goods_info.attr_list" :key="index2" >
						<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>规格:{{attr.attr_name}}</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.unit_price.split(".")[0] }}</text>
					  <text class="small"
					    >.{{ cx.unit_price.split(".")[1] || "00" }}</text
					  >
					</view>
					<Text style='color: #A0A09D;font-size: 24rpx;'>X{{cx.num}}</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>
