<template>
  <z-paging
    ref="paging"
    v-model="refundList"
    class="Mall4j page-refund-list"
    :empty-view-img="'/static/empty-img/order-empty.png'"
    :loading-more-no-more-text="'到底了，没有更多了'"
    :empty-view-text="'暂无相关售后订单'"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    @query="getRefundList"
  >
    <template #top>
      <!-- 搜索 -->
      <view class="search-box">
        <view class="search">
          <view class="icon">
            <image src="/static/images/search.png" />
          </view>
          <view class="text">
            <input
              v-model="keyword"
              :placeholder="'退款编号'"
              type="text"
              maxlength="30"
              @confirm="onSearchList"
            >
          </view>
        </view>
      </view>
    </template>
    <!-- 商品 -->
    <view class="refund-box">
      <view
        v-for="(refundOrderItem, index) in refundList"
        :key="index"
        class="item"
        @tap="toRefundDetail(refundOrderItem.refundId)"
      >
        <view class="number-style">
          <view class="number">
            退款编号：{{ refundOrderItem.refundId }}
          </view>
          <view class="style">
            <view class="icon">
              <image src="/static/images/refund.png" />
            </view>
            <view class="text">
              {{ ['','仅退款','退货退款'][refundOrderItem.applyType] }}
            </view>
          </view>
        </view>
        <view
          v-if="refundOrderItem.orderItems.length===1"
          class="prod-box"
        >
          <view class="img">
            <img-show
              :src="refundOrderItem.orderItems[0].pic"
              img-mode="aspectFit"
            />
          </view>
          <view class="text-box">
            <view class="name">
              {{ refundOrderItem.orderItems[0].spuName }}
            </view>
            <view class="sku-name">
              {{ refundOrderItem.orderItems[0].skuName===null?'':refundOrderItem.orderItems[0].skuName }}
            </view>
            <view class="apply-number">
              申请数量：{{ refundOrderItem.refundCount }}
            </view>
          </view>
        </view>
        <view
          v-else
          class="many-prods"
        >
          <scroll-view
            scroll-x="true"
            class="img-box"
          >
            <view
              v-for="(prodItem,prodIdx) in refundOrderItem.orderItems"
              :key="prodIdx"
              class="img"
            >
              <img-show
                :src="prodItem.pic"
                img-mode="aspectFit"
              />
              <view class="count">
                ×{{ prodItem.count }}
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="process">
          <view
            v-if="refundOrderItem.returnMoneySts===returnMoneyStsConstant.APPLY"
            class="state"
          >
            待处理
          </view>
          <view
            v-if="refundOrderItem.returnMoneySts>returnMoneyStsConstant.APPLY && refundOrderItem.returnMoneySts<returnMoneyStsConstant.SUCCESS"
            class="state"
          >
            进行中
          </view>
          <view
            v-if="refundOrderItem.returnMoneySts!==returnMoneyStsConstant.FAIL && refundOrderItem.returnMoneySts<returnMoneyStsConstant.SUCCESS"
            class="text-arrow"
          >
            {{ ['','您已提交申请，等待商家同意','商家同意申请，等待您退货','您已发出商品，等待商家收货','商家已收货，等待商家处理'][refundOrderItem.returnMoneySts] }}
          </view>
          <block v-if="refundOrderItem.returnMoneySts===returnMoneyStsConstant.SUCCESS || refundOrderItem.platformInterventionStatus===platInterStsConstant.REFUND_SUCCEED">
            <view class="state">
              已完成
            </view>
            <view class="text-arrow">
              退款已完成，感谢您的支持
            </view>
          </block>
          <view
            v-if="refundOrderItem.platformInterventionStatus===platInterStsConstant.NONE&&refundOrderItem.returnMoneySts===returnMoneyStsConstant.FAIL"
            class="state"
          >
            已关闭
          </view>
          <view
            v-if="refundOrderItem.platformInterventionStatus===platInterStsConstant.NONE&&refundOrderItem.returnMoneySts===returnMoneyStsConstant.FAIL"
            class="text-arrow"
          >
            {{ ['','您已撤销申请，感谢支持', '商家拒绝申请，请联系商家','您未及时处理，退款已关闭'][refundOrderItem.closeType] }}
          </view>
          <block v-if="refundOrderItem.platformInterventionStatus===platInterStsConstant.APPLY">
            <view class="state">
              待处理
            </view>
            <view class="text-arrow">
              您已申请平台介入，请补充凭证，等待平台客服处理
            </view>
          </block>
          <block v-if="refundOrderItem.platformInterventionStatus===platInterStsConstant.AGREE">
            <view class="state">
              进行中
            </view>
            <view class="text-arrow">
              平台同意退款，请您耐心等待
            </view>
          </block>
          <block v-if="refundOrderItem.platformInterventionStatus===platInterStsConstant.REJECT">
            <view class="state">
              已关闭
            </view>
            <view class="text-arrow">
              平台拒绝申请，请联系平台
            </view>
          </block>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ReturnMoneySts, PlatInterveneSts } from '@/utils/constant'
const returnMoneyStsConstant = ReturnMoneySts // 退款状态
const platInterStsConstant = PlatInterveneSts // 退款状态

/**
 * 获取退款订单列表
 */
const refundList = ref([]) // 退款订单列表
const paging = ref(null)
const getRefundList = (pageNo, pageSize) => {
  http.request({
    url: '/tmerclub_order/order_refund/user_page',
    method: 'GET',
    data: {
      pageNum: pageNo,
      pageSize,
      refundId: keyword.value || ''
    }
  })
    .then(data => {
      paging.value.complete(data.list)
    })
}

/**
 * 搜索
 */
const keyword = ref('') // 搜关键字
const onSearchList = () => {
  const reg = /^[0-9]*$/
  if (keyword.value && (!keyword.value.trim() || !reg.test(keyword.value))) {
    uni.showToast({
      title: '请输入正确的退款编号',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  paging.value.reload()
}

/**
 * 到退款详情
 */
const toRefundDetail = (refundId) => {
  uni.navigateTo({
    url: '/package-refund/pages/refund-detail/refund-detail?refundId=' + refundId
  })
}

</script>

<style scoped lang="scss">
  @use './refund-list.scss';
</style>
