<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">
            {{ $t('jiaoYiJieShu') }}
          </view>
          <view class="text">
            {{ closingSts }}
          </view>
          <view
            v-if="refundDetail.platformMessage"
            class="text form-item"
          >
            <text class="label">
              {{ $t('pingTaiLiuYan') }}
            </text>
            <text class="content">
              {{ refundDetail.platformMessage }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 用户撤销平台介入申请 -->
        <view
          v-if="refundDetail.applyInterventionTime&&platInterSts===platInterStsConstant.NONE"
          class="item"
        >
          <text
            v-if="isCN"
            class="flag"
          >
            {{ $t('mai') }}
          </text>
          <view class="big">
            {{ $t('yongHuCheXiaoPingTaiJieRuShenQing') }}
          </view>
          <view class="time">
            {{ refundDetail.interventionFinishTime }}
          </view>
        </view>
        <!-- 平台介入中 -->
        <view
          v-for="(intervenItem,intervenInx) in refundInterList"
          :key="intervenInx"
          class="item"
        >
          <text
            v-if="isCN"
            class="flag"
          >
            <!-- 0.普通用户 1.商家端 2.平台端  -->
            {{ ['买','商','平'][intervenItem.sysType] }}
          </text>
          <view class="big">
            {{ $t('pingTaiJieRuZhong-0') }}
          </view>
          <view
            v-if="intervenItem.voucherDesc"
            class="text form-item"
          >
            <text class="label">
              {{ $t('pingZhengShuoMing-0') }}
            </text>
            <text class="content">
              {{ intervenItem.voucherDesc }}
            </text>
          </view>
          <view class="text">
            {{ $t('buChongPingZheng') }}
          </view>
          <view
            v-if="intervenItem.imgList.length"
            class="img-box"
          >
            <view
              v-for="(interImg, interInx) in intervenItem.imgList"
              :key="interInx"
              class="img"
            >
              <img-show
                :src="interImg"
                @tap="onPreviewImage(interInx, intervenItem.imgList)"
              />
            </view>
          </view>
          <view class="time">
            {{ intervenItem.createTime }}
          </view>
        </view>
        <!-- 用户申请平台介入 -->
        <view
          v-if="refundDetail.applyInterventionTime"
          class="item"
        >
          <text
            v-if="isCN"
            class="flag"
          >
            {{ $t('mai-0') }}
          </text>
          <view class="big">
            {{ $t('shenQingPingTaiJieRu') }}
          </view>
          <view
            v-if="refundDetail.applyInterventionReason"
            class="text form-item"
          >
            <text class="label">
              {{ $t('shenQingLiYou-0') }}
            </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"
            >
              <img-show
                :src="img"
                @tap="onPreviewImage(applyInterInx, applyInterventionImgs)"
              />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.applyInterventionTime }}
          </view>
        </view>
        <!-- 退款关闭 -->
        <view
          v-if="(refundDetail.returnMoneySts===returnMoneyStsConstant.FAIL || platInterSts!==platInterStsConstant.NONE) && refundCloseDesc"
          class="item"
        >
          <view class="big">
            {{ $t('tuiKuanGuanBi') }}
          </view>
          <view class="text">
            {{ refundCloseDesc.txt }}
          </view>
          <view
            v-if="refundDetail.rejectMessage"
            class="text form-item"
          >
            <text class="label">
              {{ $t('juJueLiYou') }}
            </text>
            <text class="content">
              {{ refundDetail.rejectMessage }}
            </text>
          </view>
          <view
            v-if="refundDetail.sellerMsg && !refundDetail.refundDelivery?.refundDeliveryId"
            class="text form-item"
          >
            <text class="label">
              {{ $t('shangJiaBeiZhu-1') }}
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view
            v-if="rejectImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, rejectInx) in rejectImgs"
              :key="rejectInx"
              class="img"
            >
              <img-show
                :src="img"
                @tap="onPreviewImage(rejectInx,rejectImgs)"
              />
            </view>
          </view>
          <view class="time">
            {{ refundCloseDesc.time }}
          </view>
        </view>
        <view
          v-if="refundDetail.refundTime && !refundDetail.rejectTime"
          class="item"
        >
          <text class="flag end" />
          <view class="big">
            {{ $t('tuiKuanChengGong-0') }}
          </view>
          <view class="text">
            {{ $t('shangJiaYiTuiKuan') }}
          </view>
          <view class="time">
            {{ refundDetail.refundTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.receiveTime"
          class="item"
        >
          <view class="big">
            {{ $t('shangJiaShouHuo') }}
          </view>
          <view class="text">
            {{ $t('shangJiaYiShouHuoDengDaiShangJiaTongYiTuiKuan') }}
          </view>
          <view class="time">
            {{ refundDetail.receiveTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.shipTime"
          class="item"
        >
          <view class="big">
            {{ $t('maiJiaTuiHuo') }}
          </view>
          <view class="text">
            {{ $t('maiJiaFaHuoDengDaiShangJiaShouHuo') }}
          </view>
          <view
            v-if="deliveryImgs.length"
            class="img-box"
          >
            <view
              v-for="(img, deliveryImgIndex) in deliveryImgs"
              :key="deliveryImgIndex"
              class="img"
            >
              <img-show
                :src="img"
                @tap="onPreviewImage(deliveryImgIndex, deliveryImgs)"
              />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.shipTime }}
          </view>
        </view>
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND && refundDetail.handelTime && !refundDetail.rejectTime"
          class="item"
        >
          <view class="big">
            {{ $t('shangJiaTongYi') }}
          </view>
          <view class="text">
            {{ $t('shangJiaYiChuLiDengDaiShangJiaTuiKuan') }}
          </view>
          <view
            v-if="refundDetail.sellerMsg"
            class="text form-item"
          >
            <text class="label">
              {{ $t('shangJiaBeiZhu-2') }}
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.handelTime }}
          </view>
        </view>
        <!-- 商家已处理, 等待买家发货 -->
        <view
          v-if="refundDetail.applyType===applyTypeConstant.REFUND_AND_RETURNS && refundDetail.handelTime && (!refundDetail.rejectTime || refundDetail.refundDelivery?.refundDeliveryId)"
          class="item"
        >
          <view class="big">
            {{ $t('shangJiaTongYi-0') }}
          </view>
          <view class="text">
            {{ $t('shangJiaYiChuLiDengDaiMaiJiaFaHuo') }}
          </view>
          <view
            v-if="refundDetail.sellerMsg"
            class="text form-item"
          >
            <text class="label">
              {{ $t('shangJiaBeiZhu-3') }}
            </text>
            <text class="content">
              {{ refundDetail.sellerMsg }}
            </text>
          </view>
          <view class="time">
            {{ refundDetail.handelTime }}
          </view>
        </view>

        <view class="item">
          <view class="big">
            {{ $t('maiJiaTiJiaoJinTuiKuanTuiKuanTuiHuoShenQingDengDaiShangJiaChuLi') }}
          </view>
          <view
            v-if="buyerReason"
            class="text form-item"
          >
            <text class="label">
              {{ $t('tuiKuanYuanYin') }}
            </text>
            <text class="content">
              {{ buyerReason }}
            </text>
          </view>
          <view
            v-if="refundDetail.buyerDesc"
            class="text form-item"
          >
            <text class="label">
              {{ $t('tuiKuanShuoMing') }}
            </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"
            >
              <img-show
                :src="img"
                @tap="onPreviewImage(imgIndex,applyRefundImgs)"
              />
            </view>
          </view>
          <view class="time">
            {{ refundDetail.applyTime }}
          </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 isCN = computed(() => {
  return uni.getStorageSync('bbcMsLang').indexOf('zh') !== -1
})

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)
  }
})

// 退款原因
const buyerReason = computed(() => {
  return [
    $t('paiCuoDuoPaiBuXiHuan'),
    $t('xieShangYiZhiTuiKuan'),
    $t('shangPinPoSunShaoJian'),
    $t('shangPinYuMiaoShuBuFu'),
    $t('maiJiaFaCuoHuo'),
    $t('zhiLiangWenTi'),
    $t('qiTa')][props.refundDetail.buyerReason]
})

// 退款关闭说明
const refundCloseDesc = computed(() => {
  const info = props.refundDetail
  if (info.cancelTime) {
    return {
      txt: $t('maiJiaYiCheXiaoTuiKuanShenQing'),
      time: info.cancelTime
    }
  }
  if (info.rejectTime) {
    return {
      txt: $t('shangJiaYiJuJueTuiKuanShenQing'),
      time: info.rejectTime
    }
  }
  if (info.handelTime && !info.rejectTime) {
    return {
      txt: $t('maiJiaYiCheXiaoHuoChaoShi'),
      time: info.handelTime
    }
  }
  return null
})

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

// 平台介入中补充凭证列表
const refundInterList = computed(() => {
  const list = props.refundDetail.orderRefundInterventionList || []
  return list.reverse().map(item => {
    item.imgList = onHandleImgs(item.imgUrls)
    return item
  })
})

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

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

// 申请平台介入凭证
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 util.checkFileUrl(url)
    })
  }
  return []
}

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

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