<template>
  <u-popup :show="showPop" :round="20" @close="showPop = false" closeable>
    <view class="son-wrap">
      <view class="detail-title"> 费用明细 </view>
      <view style="flex: 1; overflow-y: scroll">
        <view v-for="(item, index) of productList" :key="index" class="list-wrap">
          <view class="list">
            <view> {{ item.merchantName }}({{ item.name }}) </view>

            <view>
              ¥{{ item.sellingPrice }}x{{ item.buyNum }}份
              <!-- <small v-if="item.deposit">
                押金：¥{{ item.deposit }}
                <span v-if="item.depositType == 2">x{{ item.buyNum }}</span>
              </small> -->
            </view>
          </view>
          <view class="list" v-if="item.chooseCouponObj && item.chooseCouponObj.savedMoney > 0">
            <view> 券 </view>

            <view>
							-¥
							<text style="font-size:36rpx;">
							{{ parseFloat(item.chooseCouponObj.savedMoney.toFixed(2))}}
							</text>
						</view>
          </view>
        </view>
        <view class="detail-bottom">
          <text> 合计 </text>

          <text> ¥{{ sellTotal }} </text>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: ['productList', 'sellTotal'],
  data() {
    return {
      showPop: false, //控制弹窗显示隐藏
    }
  },
  methods: {
    //---展示该组件
    showDetail() {
      this.showPop = true
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.son-wrap {
  position: relative;
  height: 65vh;
  display: flex;
  flex-direction: column;
}
.detail-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx 24rpx;
  border-radius: 20rpx 20rpx 0 0;
}
.list-wrap {
  border-bottom: 1px solid #f0f0f0;
  padding: 0 30rpx;
}
.list{
  height:120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list view:last-child {
  text-align: right;
	flex-shrink: 0;
	margin-left:20rpx;
}
.detail-bottom {
  display: flex;
  justify-content: space-between;
  color: $red;
  font-weight: bold;
  align-items: center;
  padding:40rpx 30rpx;
	font-size: 32rpx;
}
</style>