<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="afterSale"
    >
      <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.CoverImagePath" mode="aspectFill" class="image" />
        <view class="goodinfo">
          <view class="name">{{ y.GoodsName }}</view>
          <view class="attr">
            <text>已选择 </text>
            <text
              v-for="(x, xi) in y.SpecificationList"
              :key="xi"
              style="margin:0 5px;"
            >
              {{ x }}
            </text>
          </view>
          <view class="price">
            <view class="left" :style="{ color: mc }">
              <text class="small">￥</text>
              <text>{{ y.Final_Price }}</text>
              
            </view>
            <view class="right">x{{ y.Number }}</view>
          </view>
          <view style="display: flex; flex-direction: row-reverse;margin-top:10px;">
            <u-button
              shape="circle"
              size="medium"
              :custom-style="customStyle"
              @click="goService(y.DetailId)"
              v-if="y.IsApplyForAfterSale==2"
              >申请售后</u-button
            >
            <text v-if="y.IsApplyForAfterSale!=2" style="font-size:28rpx;color:gray;">
              已申请售后
            </text>
          </view>
        </view>
      </view>
    </scroll-view>
  </u-popup>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      show: true,
      mc: "",
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
    };
  },
  mounted() {
    this.mc = this.$uiConfig.mainColor;
  },
  methods: {
    popupClose() {
      this.$emit("close");
    },
    goService(id){
      uni.navigateTo({
           url: '/pages/order/after-sale/index?id='+id
      });
    }
  },
};
</script>

<style>
.afterSale {
  height: 50vh;
  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;
}
.afterSale .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;
}
.afterSale .title-box .title {
  font-size: 22px;
  color: #000;
  padding: 20px;
  background: #fff;
  flex: 1;
}
.afterSale .title-box .tips {
  font-size: 13px;
  color: #777;
  flex: 1;
  text-align: right;
  padding-right: 12px;
}
.afterSale .goodbox.update-goodbox {
  width: calc(100% - 20px);
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 10px;
}
.afterSale .goodbox.update-goodbox:last-child {
  border: none;
}
.afterSale .goodbox {
  margin-bottom: 20px;
  display: flex;
}
.afterSale .goodbox .image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 5px;
  margin-right: 10px;
}
.afterSale .goodbox .goodinfo {
  width: 1px;
  flex: 1;
}
.afterSale .goodbox .goodinfo .name {
  height: 16px;
  font-size: 14px;
  color: #232323;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.afterSale .goodbox .goodinfo .attr {
  height: 14px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.afterSale .goodbox .goodinfo .price {
  display: flex;
  align-items: center;
}
.afterSale .goodbox .goodinfo .price .left {
  font-size: 20px;
  font-family: "oswald";
  width: 1px;
  flex: 1;
}
.afterSale .goodbox .goodinfo .price .left .small {
  font-size: 13px;
}
.afterSale .goodbox .goodinfo .price .right {
  color: #444;
  font-size: 13px;
}
</style>
