<template>
  <view>
    <Loading
    	:type="3"
    	:loadStatus="loadStatus"
    	:showText="errorText"
    />
    <zj-page-layout
      v-if="detail"
      :hasFooter="false"
    	:isScroll="true"
    	:refresherTriggered="refresherTriggered"
    	@refresherrefresh="refresherrefresh">
      <view class="all-container">
        <view class="address-container card">
          <view class="left">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="hasdata">
              <view class="name">{{ detail.userName }}<text>{{ detail.userMobile }}</text></view>
              <view class="address ellipsis-2">
                {{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{ detail.receAddress }}
              </view>
            </view>
          </view>
        </view>

        <view class="card goods-container">
          <view class="title">商品信息</view>
          <view class="item">
            <image :src="detail.goodsUrl" mode="aspectFill"></image>
            <view class="right">
              <view class="name ellipsis-2">{{ detail.esGoodsName }}</view>
              <view class="des">{{ detail.goodsNote }}</view>
              <view class="bottom">
                <view class="price">{{detail.goodsPrice | priceFilter2}}</view>
                <view class="num">x{{detail.num}}</view>
              </view>
            </view>
          </view>
          <view class="total">订单总金额<text>{{detail.totalAmount | priceFilter2}}</text></view>
        </view>

        <view class="info-container card">
          <view class="title">订单信息</view>
          <view class="row">
            <view class="label">订单编号</view>
            <view class="value">{{detail.esOrderId}}</view>
          </view>
          <view class="row">
            <view class="label">创建时间</view>
            <view class="value">{{detail.createTime}}</view>
          </view>
          <view class="row" v-if="detail.payType == 'WECHAT'">
            <view class="label">付款时间</view>
            <view class="value">{{detail.payTime}}</view>
          </view>
          <view class="row">
            <view class="label">支付方式</view>
            <view class="value">{{{WECHAT: '在线支付', CASH: '到店支付'}[detail.payType]}}</view>
          </view>
          <view class="row" v-if="detail.payType == 'WECHAT'">
            <view class="label">支付单号</view>
            <view class="value">{{detail.transactionId}}</view>
          </view>
          <view class="row" v-if="detail.sendTime">
            <view class="label">发货时间</view>
            <view class="value">{{detail.sendTime}}</view>
          </view>
          <view class="row" v-if="detail.overTime">
            <view class="label">收货时间</view>
            <view class="value">{{detail.overTime}}</view>
          </view>
        </view>

        <view class="info-container card" v-if="detail.esOrderRefunds">
          <view class="title">售后信息</view>
          <view class="row">
            <view class="label">退货类型</view>
            <view class="value">{{{REFUND: '仅退款', GOODS: '仅退货', GOODS_REFUND: '退货退款', FAIL: '驳回'}[detail.esOrderRefunds.refundType]}}</view>
          </view>
          <view class="row">
            <view class="label">退货原因</view>
            <view class="value">{{detail.esOrderRefunds.refundNote}}</view>
          </view>
          <view class="row">
            <view class="label">退货凭证</view>
            <view class="images">
              <image :src="it.fileUrl" mode="aspectFill" @tap="prevImg(it.fileUrl)" v-for="(it, idx) in detail.esOrderRefunds.esOrderRefundFileList"></image>
            </view>
          </view>
        </view>

        <view class="info-container card" v-for="(item, index) in detail.esOrderRefundList" :key="index">
          <view class="title">售后记录{{index+1}}</view>
          <view class="row">
            <view class="label">退货时间</view>
            <view class="value">{{item.createTime}}</view>
          </view>
          <view class="row">
            <view class="label">处理结果</view>
            <view class="value">{{{REFUND: '仅退款', GOODS: '仅退货', GOODS_REFUND: '退货退款', FAIL: '驳回'}[item.refundType]}}</view>
          </view>
          <view class="row">
            <view class="label">退货数量</view>
            <view class="value">{{item.refundNum}}</view>
          </view>
          <view class="row">
            <view class="label">退货金额</view>
            <view class="value">{{item.refundPrice | priceFilter}}</view>
          </view>
          <view class="row">
            <view class="label">退货备注</view>
            <view class="value">{{item.refundRemark}}</view>
          </view>
        </view>

      </view>

    </zj-page-layout>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: null,
        detail: null,
        loadStatus: 0,
        errorText: '',
        refresherTriggered: false,
      }
    },

    async onLoad({id}) {
      this.id = id;
      this.getDetail();
    },

    methods: {
      getDetail() {
        return new Promise((resolve, reject) => {
          this.$api.post('/es/orderPay/detail', {
            esOrderId: this.id
          }).then(res => {
            this.detail = res.data;
            this.loadStatus = 0;
          }).catch(res => {
            this.errorText = res.message;
            this.loadStatus = 2;
          }).finally(res => {
            this.refresherTriggered = false;
            resolve(1);
          })
        })
      },

      refresherrefresh() {
        this.refresherTriggered = true;
        this.getDetail();
      },

      // 预览图片
      prevImg(url) {
      	uni.previewImage({
      		current: url,
      		urls: this.detail.esOrderRefunds.esOrderRefundFileList.map(o => o.fileUrl)
      	})
      },
    }
  }
</script>

<style lang="scss" scoped>
.all-container {
  padding: 0 20rpx 20rpx;
}

.card {
  @include zj-card;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.address-container {
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;

  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }

  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;

    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }

    .nodata {
      font-size: 28rpx;
      color: #999999;
    }

    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;

        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }

      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.goods-container {
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .item {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #eaeaea;
    image {
      width: 140rpx;
      height: 140rpx;
      display: block;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .right {
      flex: 1;
      .name {
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
      }
      .des {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }
      .bottom {
        display: flex;
        align-items: center;
        margin-top: 12rpx;
        .price {
          font-size: 28rpx;
          color: $minor-color;
          font-weight: 600;
        }
        .num {
          font-size: 28rpx;
          margin-left: 12rpx;
        }
      }
    }
  }
  .total {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 28rpx;
    text {
      font-size: 32rpx;
      color: $minor-color;
      font-weight: 500;
      margin-left: 8rpx;
    }
  }
}

.info-container {
  padding-bottom: 30rpx;
  .title {
    font-size: 32rpx;
    margin-top: 20rpx;
    font-weight: 500;
  }
  .row {
    display: flex;
    margin-top: 20rpx;
    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .value {
      font-size: 28rpx;
    }
    .images {
      display: flex;
      flex-wrap: wrap;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: block;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

</style>
