<template>
  <view class="applyrefund" v-if="!loading">
    <view class="head">
      <view class="goods">
        <image :src="good.CoverImagePath" mode="aspectFill" class="image" />
        <view class="good-info">
          <view class="name-box">
            <view class="name">{{ good.GoodsName }}</view>
          </view>
          <view class="price">
            <text>单价：</text>
            <text style="color: #222; margin-right: 30rpx;">{{
              good.Final_Price
            }}</text>
            <text>购买数量：</text>
            <text style="color: #222;">{{ good.Number }}</text>
          </view>
        </view>
      </view>
      
    </view>
    <view class="apply">
      <view class="item" @click="refundsHandler(1)">
        <image
          src="@/static/images/icon/tui.png"
          mode="aspectFill"
          class="image"
        />
        <view class="name">退货</view>
        <view class="tips">退回收到的商品</view>
        <view class="arrow">
          <u-icon name="arrow" size="32" color="#333"></u-icon>
        </view>
      </view>
      <view class="item" @click="refundsHandler(2)">
        <image
          src="@/static/images/icon/huan.png"
          mode="aspectFill"
          class="image"
        />
        <view class="name">换货</view>
        <view class="tips">更换收到的商品</view>
        <view class="arrow">
          <u-icon name="arrow" size="32" color="#333"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      chosenId: 0,
      good: {},
      loading: false,
    };
  },
  onLoad(option) {
    console.log("jump in");
    uni.showNavigationBarLoading();
    this.id = option.id || 98180;
    console.log(this.id)
    this.chosenId = option.chosenId;
    uni.setNavigationBarTitle({
      title: "选择售后类型",
    });
    this.init();
  },
  methods: {
    init() {
      let h = this.apiheader();
      this.request2(
        {
        	url: '/api/AppletOrder/GetAppletMyOrderAfterSaleInfo',
        	data: {
				OrderDetailId: this.id
			}
        },
        (res) => {
          this.good = res.data;
          this.loading = false;
          uni.hideNavigationBarLoading();
        }
      );
    },
    refundsHandler(type) {
      uni.navigateTo({
        url: "/pages/order/after-sale/refunds?id=" + this.id +'&type=' +type,
      });
    },
  },
};
</script>

<style>
.applyrefund {
  height: 100vh;
  background: #f5f5f5;
}
.applyrefund .goods {
  display: flex;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.applyrefund .goods .image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin-right: 40rpx;
}
.applyrefund .goods .good-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.applyrefund .goods .good-info .name-box {
  flex: 1;
  height: 1rpx;
  color: gray;
  font-size: 26rpx;
}
.applyrefund .goods .good-info .name-box .name {
  height: 70rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}
.applyrefund .goods .good-info .price {
  height: 32rpx;
  color: gray;
  font-size: 26rpx;
}

.applyrefund .apply {
  margin: 0 20rpx;
  padding: 0 30rpx;
  background: #fff;
  border-radius: 20rpx;
}
.applyrefund .apply .item {
  padding: 40rpx 0;
  border-bottom: 2rpx solid #eee;
  display: flex;
  align-items: center;
}
.applyrefund .apply .item .image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 30rpx;
}
.applyrefund .apply .item .name {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  flex: 1;
  width: 1rpx;
}
.applyrefund .apply .item .tips {
  font-size: 26rpx;
  flex: 1;
  width: 1rpx;
  color: gray;
  text-align: right;
}
.applyrefund .apply .item .arrow {
  width: 32rpx;
  height: 32rpx;
  margin-left: 24rpx;
}
</style>
