<template>
  <view class="refund-details">
    <u-navbar
      v-if="details.refundStatus === 0"
      :is-back="false"
      back-text=""
      title="申请退款"
      :background="{ backgroundColor: '#008CFF' }"
      title-color="#fff"
      back-icon-color="#fff"
    ></u-navbar>
    <u-navbar v-else back-text="" title="申请退款" :background="{ backgroundColor: '#008CFF' }" title-color="#fff" back-icon-color="#fff"></u-navbar>
    <view class="refund-details-list">
      <view class="refund-details-list-item">
        <view class="rdli-label">申请时间：</view>
        <view class="rdli-content">{{ details.applyTime }}</view>
      </view>
      <view class="refund-details-list-item">
        <view class="rdli-label">消费金额：</view>
        <view class="rdli-content"
          ><text class="rdli-font">{{ details.refundAmount }}</text
          >元</view
        >
      </view>
      <view class="refund-details-list-item">
        <view class="rdli-label">退款原因：</view>
        <view class="rdli-content">{{ details.refundReason }}</view>
      </view>
      <view class="refund-details-list-item" v-if="details.images && details.images.length > 0">
        <view class="rdli-label">图片：</view>
        <view class="rdli-content">
          <u-lazy-load class="image" v-for="(item, index) in details.images" :key="index" :image="item" img-mode="aspectFill"></u-lazy-load>
        </view>
      </view>
    </view>
    <view class="apply-button" v-if="details.refundStatus === 0">
      <u-button type="primary" disabled>申请中</u-button>
    </view>
    <view class="apply-button" v-if="details.refundStatus === 0">
      <u-button type="primary" @click="jumpPage('pages/center/order/order')">返回列表页</u-button>
    </view>
    <view class="refund-details-status" v-if="details.refundStatus === 2">
      <view class="refund-details-status-item">
        <view>处理时间：</view>
        <view>{{ details.auditTime }}</view>
      </view>
      <view class="refund-details-status-item">
        <view>处理结果：</view>
        <view v-if="details.refundStatus === 1">已通过</view>
        <view v-if="details.refundStatus === 2">已驳回</view>
      </view>
      <view class="refund-details-status-item">
        <view>备注：</view>
        <view>{{ details.refuseReason }}</view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: {}
    };
  },
  onLoad(page) {
    this.getOrderRefundDetails(page.orderId);
  },
  methods: {
    getOrderRefundDetails(orderId) {
      this.$u.api
        .getOrderRefundDetails({
          orderId: orderId
        })
        .then((res) => {
          if (res.code === 200) {
            this.details = res.data;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: '操作失败',
            type: 'error'
          });
        });
    },
    jumpPage(url) {
      this.$u.route({
        url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './applyRefundDetails.scss';
</style>