<template>
  <view
    class="components-refund-progress"
    :class="{show: showRefundProgress}"
  >
    <view
      v-if="showRefundProgress"
      class="refund-progress-pop-mask"
      @tap="showRefundProgress=false"
    />
    <view
      class="close"
      @tap="showRefundProgress=false"
    >
      <image src="@/static/images/close.png" />
    </view>
    <view class="refund-progress-pop-neirou">
      <view class="progress-con">
        <view
          v-if="closingSts"
          class="item"
        >
          <text class="flag end" />
          <view class="big">
            交易结束
          </view>
          <view class="text">
            {{ closingSts }}
          </view>
          <view
            v-if="refundDetail.platformMessage"
            class="text form-item"
          >
            <text class="label">
              平台留言：
            </text>
            <text class="content">
              {{ refundDetail.platformMessage }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 用户撤销申请 -->
        <view
          v-if="refundDetail.applyInterventionTime&&platInterSts===-1"
          class="item"
        >
          <text class="flag">
            买
          </text>
          <view class="big">
            用户撤销申请
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 平台介入中 -->
        <view
          v-for="(intervenItem,intervenInx) in refundInterList"
          :key="intervenInx"
          class="item"
        >
          <text class="flag">
            <!-- 0.普通用户 1.商家端 2.平台端 3.供应商端 -->
            {{ ['买','商','平','供'][intervenItem.sysType] }}
          </text>
          <view class="big">
            平台介入中
          </view>
          <view class="text">
            补充凭证
          </view>
          <view
            v-if="intervenItem.voucherDesc"
            class="text form-item"
          >
            <text class="label">
              凭证说明：
            </text>
            <text class="content">
              {{ intervenItem.voucherDesc }}
            </text>
          </view>
          <view
            v-if="intervenItem.imgList.length"
            class="img-box"
          >
            <view
              v-for="(interImg, interInx) in intervenItem.imgList"
              :key="interInx"
              class="img"
              @tap="onPreviewImage(interInx, intervenItem.imgList)"
            >
              <img-show :src="interImg" />
            </view>
          </view>
          <view class="time">
            {{ intervenItem.createTime }}
          </view>
        </view>
        <!-- 用户申请平台介入 -->
        <view
          v-if="refundDetail.applyInterventionTime"
          class="item"
        >
          <text class="flag">
            买
          </text>
          <view class="big">
            申请平台介入
          </view>
          <view
            v-if="refundDetail.applyInterventionReason"
            class="text form-item"
          >
            <text class="label">
              申请理由：
            </text>
            <text class="content">
              {{ refundDetail.applyInterventionReason }}
            </text>
          </view>
          <view
            v-if="applyInterventionImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, applyInterInx) in applyInterventionImgs"
              :key="applyInterInx"
              class="img"
              @tap="onPreviewImage(applyInterInx, applyInterventionImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.applyInterventionTime }}
          </view>
        </view>
        <!-- 退款关闭 -->
        <view
          v-if="refundDetail.returnMoneySts===returnMoneyStsConstant.FAIL"
          class="item"
        >
          <view class="big">
            退款关闭
          </view>
          <view class="text">
            {{ ['','您已撤销申请，感谢支持', '商家拒绝申请','您未及时处理，退款已关闭'][refundDetail.closeType] }}
          </view>
          <view
            v-if="refundDetail.rejectMessage"
            class="text form-item"
          >
            <text class="label">
              拒绝理由：
            </text>
            <text class="content">
              {{ refundDetail.rejectMessage }}
            </text>
          </view>
          <view
            v-if="rejectImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, rejectInx) in rejectImgs"
              :key="rejectInx"
              class="img"
              @tap="onPreviewImage(rejectInx,rejectImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.closeTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.returnMoneySts>=returnMoneyStsConstant.SUCCESS"
          class="item"
        >
          <text class="flag end" />
          <view class="big">
            退款成功
          </view>
          <view class="text">
            商家已退款，请您注意查收
          </view>
          <view class="time">
            {{ refundDetail.refundTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.returnMoneySts>=returnMoneyStsConstant.RECEIVE && refundDetail.receiveTime"
          class="item"
        >
          <view class="big">
            商家收货
          </view>
          <view class="text">
            商家已收到退货商品，等待处理
          </view>
          <view class="time">
            {{ refundDetail.receiveTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && (refundDetail.returnMoneySts>=returnMoneyStsConstant.CONSIGNMENT || refundDetail.deliveryTime)"
          class="item"
        >
          <view class="big">
            买家退货
          </view>
          <view class="text">
            买家已寄回商品，等待商家收货
          </view>
          <view
            v-if="deliveryImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, deliveryImgIndex) in deliveryImgs"
              :key="deliveryImgIndex"
              class="img"
              @tap="onPreviewImage(deliveryImgIndex, deliveryImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.deliveryTime }}
          </view>
        </view>
        <view
          v-if="(refundDetail.returnMoneySts>=returnMoneyStsConstant.PROCESSING ||
            (refundDetail.returnMoneySts===returnMoneyStsConstant.FAIL && refundDetail.orderRefundAddr && refundDetail.orderRefundAddr.consigneeAddr)) ||
            (refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS &&
              refundDetail.handelTime &&
              refundDetail.returnMoneySts!==returnMoneyStsConstant.FAIL)"
          class="item"
        >
          <view class="big">
            商家同意
          </view>
          <view class="text">
            商家同意申请，{{ refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS? '请您寄回商品':'请等待退款' }}
          </view>
          <view class="time">
            {{ refundDetail.handelTime }}
          </view>
        </view>
        <view class="item">
          <view class="big">
            等待处理
          </view>
          <view class="text">
            您已提交申请，等待商家处理
          </view>
          <view class="time">
            {{ refundDetail.createTime }}
          </view>
        </view>
        <view class="item">
          <view class="big">
            提交仅退款/退款退货申请
          </view>
          <view
            v-if="refundDetail.buyerReasonValue"
            class="text form-item"
          >
            <text class="label">
              退款原因：
            </text>
            <text class="content">
              {{ refundDetail.buyerReasonValue }}
            </text>
          </view>
          <view
            v-if="refundDetail.buyerReasonValue"
            class="text form-item"
          >
            <text class="label">
              退款说明：
            </text>
            <text class="content">
              {{ refundDetail.buyerDesc }}
            </text>
          </view>
          <view
            v-if="applyRefundImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, imgIndex) in applyRefundImgs"
              :key="imgIndex"
              class="img"
              @tap="onPreviewImage(imgIndex,applyRefundImgs)"
            >
              <img-show :src="img" />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.createTime }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ReturnMoneySts, RefundApplyType, PlatInterveneSts } from '@/utils/constant'
import { computed } from 'vue'
const returnMoneyStsConstant = ReturnMoneySts
const applyTypeConstant = RefundApplyType
const platInterStsConstant = PlatInterveneSts
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  refundDetail: {
    type: Object,
    default: () => ({})
  }
})

onUnmounted(() => {
  if (isShowPreview) {
    uni.closePreviewImage({
      success: () => {
        isShowPreview = false
      }
    })
  }
})

const showRefundProgress = computed({
  get () {
    return props.modelValue
  },
  set () {
    emits('update:modelValue', false)
  }
})

// 平台介入状态 -1.没有介入 1.用户申请介入 2.平台同意介入 3.平台拒绝介入 5.平台同意退款成功 6.用户撤销
// 交易结束状态
const closingSts = computed(() => {
  switch (props.refundDetail.platformInterventionStatus) {
    case platInterStsConstant.REJECT:
      return '平台拒绝退款'
    case platInterStsConstant.REFUND_SUCCEED:
      return '平台同意退款成功'
    default:
      return ''
  }
})

const platInterSts = computed(() => props.refundDetail.platformInterventionStatus)
// 平台介入中补充凭证列表
const refundInterList = computed(() => {
  return props.refundDetail.orderRefundInterventionList?.map(item => {
    item.imgList = onHandleImgs(item.imgUrls)
    return item
  })
})

const deliveryImgs = computed(() => {
  return onHandleImgs(props.refundDetail.orderRefundAddr?.imgs)
})

// 用户申请退款凭证
const applyRefundImgs = computed(() => {
  return onHandleImgs(props.refundDetail.imgUrls)
})

// 申请平台介入凭证
const applyInterventionImgs = computed(() => {
  return onHandleImgs(props.refundDetail.applyInterventionImgUrls)
})

// 拒绝凭证
const rejectImgs = computed(() => {
  return onHandleImgs(props.refundDetail.shopImgUrls)
})

// 图片处理
const onHandleImgs = (imgStr) => {
  if (imgStr) {
    return imgStr.split(',').map(url => {
      return picDomain + url
    })
  }
  return []
}

let isShowPreview = false
/**
 * 查看图片
 */
const onPreviewImage = (current, imgs) => {
  const urls = imgs.map(item => {
    item = util.checkFileUrl(item)
    return item
  })
  uni.previewImage({
    current,
    urls,
    success: () => {
      isShowPreview = true
    }
  })
}
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
