<template>
  <view class="container">
    <Header title="售后详情"></Header>

    <view class="content">
      <view class="box box1" v-if="afterSaleDetail">
        <view class="money">
          <view class="money_l">退款金额</view>
          <view class="money_r">￥{{ afterSaleDetail.refundPrice }}</view>
        </view>
        <view class="intro">申请通过后退回至原账户</view>
      </view>
      <view class="box">
        <view class="steps">
          <view class="step" v-for="(item, index) in handleLog" :key="index">
            <wd-icon name="check-circle-filled" size="12px" class="tag" v-if="index == 0"></wd-icon>
            <view class="head">{{ item.title }}</view>
            <view class="time" v-if="item.content">{{ item.content }}</view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
      </view>
      <view class="box" v-if="orderItems">
        <view class="goods">
          <view class="g1">退款信息</view>
          <view class="g2" v-for="(item, index) in orderItems" :key="index">
            <img :src="fileDomain + item.pic" mode="aspectFill" />
            <view class="g2_item">
              <view class="g2_info">
                <view class="g2_name">{{ item.prodName }}</view>
                <view class="g2_price">￥{{ item.actualTotal }}</view>
              </view>
              <view class="g2_number">X {{ item.prodCount }}</view>
            </view>
          </view>
          <view class="g3">
            <view class="g3_item">
              <view class="g3_title">申请时间:</view>
              <view class="g3_intro">{{ afterSaleDetail.applyTime }}</view>
            </view>
            <view class="g3_item">
              <view class="g3_title">退款原因:</view>
              <view class="g3_intro">{{ afterSaleDetail.refundMemo }}</view>
            </view>
            <view class="g3_item">
              <view class="g3_title">订单号:</view>
              <view class="g3_intro">{{ afterSaleDetail.orderNumber.split('-')[1] }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { afterSale } from '@/api/order';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const orderNumber = ref('');
const afterSaleDetail = ref();
const handleLog = ref();
const orderItems = ref();
const getAterSaleDetail = async (id) => {
  const res = await afterSale({ orderNumber: id });
  handleLog.value = res.data[0].handleLog;
  afterSaleDetail.value = res.data[0];
  orderItems.value = res.data[0].orderItems;
};
onLoad((options) => {
  orderNumber.value = options.orderNumber;
  getAterSaleDetail(orderNumber.value);
});
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;

  .content {
    padding-top: 88rpx;
    .box1 {
      display: flex;
      flex-direction: column;
      .intro {
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        letter-spacing: 0em;
        font-variation-settings: 'opsz' auto;
        font-feature-settings: 'kern' on;
        color: #bcbcbc;
      }
      .money {
        display: flex;
        line-height: 14px;
        letter-spacing: 0em;
        font-variation-settings: 'opsz' auto;
        font-feature-settings: 'kern' on;
        color: #3d3d3d;
        font-family: Source Han Sans;
        font-size: 14px;
        margin-bottom: 10rpx;
        .money_l {
          font-weight: normal;
          flex: 1;
        }
        .money_r {
          font-weight: bold;
          flex: 2;
          text-align: right;
          margin-top: -15rpx;
        }
      }
    }
    .box {
      width: 710rpx;
      margin: 10rpx auto 3rpx;
      border-radius: 8px;
      background-color: #fff;
      padding: 40rpx 40rpx;
      box-sizing: border-box;
      .steps {
        border-left: 2px solid #f3f3f3;
        .step {
          position: relative;
          padding-left: 25rpx;
          .tag {
            position: absolute;
            left: -6px;
            top: 0px;
            opacity: 1;
            color: #fa5151;
          }
          .head {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: bold;
            line-height: 14px;
            letter-spacing: 0em;
            font-variation-settings: 'opsz' auto;
            font-feature-settings: 'kern' on;
            color: #3d3d3d;
            margin-bottom: 10rpx;
          }
          .time {
            font-family: Source Han Sans;
            font-size: 11px;
            font-weight: normal;
            line-height: 14px;
            letter-spacing: 0em;
            font-variation-settings: 'opsz' auto;
            font-feature-settings: 'kern' on;
            color: #bcbcbc;
            margin-bottom: 10rpx;
          }
          .time:last-child {
            margin-bottom: 40rpx;
          }
        }
      }
    }
  }
}

.goods {
  .g1 {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0em;
    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    color: #3d3d3d;
    margin-bottom: 40rpx;
  }
  .g2 {
    display: flex;
    margin-bottom: 20rpx;
    img {
      width: 176rpx;
      height: 176rpx;
      border-radius: 8px;
      opacity: 1;
      margin-right: 20rpx;
    }
    .g2_item {
      flex: 1;
      font-family: Source Han Sans;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      font-size: 14px;
      line-height: 14px;
      letter-spacing: 0em;
      color: #3d3d3d;
      .g2_info {
        display: flex;
        margin-top: 20rpx;
        margin-bottom: 22rpx;
        justify-content: space-between;
        .g2_name {
          font-weight: bold;
        }
        .g2_price {
          font-weight: bold;
          text-align: right;
        }
      }
      .g2_number {
        font-weight: normal;
      }
    }
  }
  .g3 {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0em;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    .g3_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .g3_title {
        color: #767676;
        width: 120rpx;
      }
      .g3_intro {
        color: #3d3d3d;
        text-align: right;
        flex: 1;
      }
    }
  }
}
</style>
