<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">{{ y.name }}</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;
}
</style>
