<template>
  <view
    class="after-sales-root position-relative"
    @tap="afterSalesDetaile(item.afsOrderID)"
  >
    <!-- 订单号 -->
    <view class="top-title">
      <view
        class="order"
        @tap.stop="copyInfo(item.afsOrderID, '售后单号复制成功')"
      >
        <text>售后单号：{{ item.afsOrderID }}</text>
        <jx-icon icon="fuzhi" color="#ffffff"></jx-icon>
      </view>
      <text :class="item.status == 180 ? 'success' : 'warring'">{{
        status
      }}</text>
    </view>

    <!-- 订单平台 -->
    <view
      class="platform"
      @tap.stop="copyInfo(item.vendorOrderID, '订单号复制成功')"
    >
      <text class="brand" :class="`icon-${item.vendorID}`"></text>
      <text class="orderSeq">#{{ item.orderSeq }}</text>
      <text class="num">订单号：{{ item.vendorOrderID }}</text>
      <jx-icon icon="fuzhi" color="#818181"></jx-icon>
    </view>

    <!-- 原因描述 -->
    <view class="detaile-text">{{ item.reasonDesc || '用户未评价' }}</view>

    <!-- 售后方式 -->
    <view class="after-text">
      <text>售后方式：</text>
      <text class="mode">{{ afsAppealTypeName }}</text>
    </view>

    <!-- 申请时间 -->
    <view class="created-time"
      >申请时间：{{ timeFormatHMS(item.afsCreatedAt) || '无' }}</view
    >

    <!-- 商品数量 -->
    <view class="shopping-count" v-if="item.skus != null"
      >共{{ item.skus.length || 0 }}份&nbsp;{{ count }}件商品</view
    >

    <!-- 驳回理由 -->
    <view class="shopping-count" v-if="item.refuseReason">
      <text>驳回理由:&emsp;{{ item.refuseReason }}</text>
    </view>

    <!-- 操作按钮 -->
    <view
      class="operation-btn"
      v-if="item.status === 155 && (item.flag & 3) === 0"
    >
      <text class="text"
        >若退款造成的损失较大，建议联系顾客，自行上门取回退货。</text
      >
      <view class="btn-root">
        <view class="reject" @tap.stop="popup.open()" style="width: 86%;font-size: 40rpx;">驳回</view>
        <view class="resolve" @tap.stop="handleAgree" style="width: 14%;">同意</view>
      </view>
    </view>

    <!-- 商家确认收到货 -->
    <view
      class="confirm-goods"
      v-if="item.status === 165 && (item.flag & 4) === 0"
    >
      <view class="text" @tap.stop="confirmGoods">商家确认收货</view>
    </view>

    <!-- 查看详情 -->
    <view class="detail-btn" style="font-size: 40rpx;">查看详情</view>

    <!-- 提示内容 -->
    <view class="tips-text">
      <!-- 已进行审核操作 -->
      <template v-if="item.status === 155 && (item.flag & 3) !== 0">
        <text v-if="(item.flag & 3) === 1">已【同意】售后</text>
        <text v-if="(item.flag & 3) === 3">已【驳回】售后</text>
      </template>

      <!-- 确认收货 -->
      <template v-if="item.status === 165 && (item.flag & 4) !== 0">
        <text>已确认收货</text>
      </template>
    </view>
  </view>

  <uni-popup ref="popup" type="center">
    <view class="reson-root">
      <view class="title">驳回原因</view>
      <textarea
        class="textarea"
        v-model.trim="reason"
        placeholder="请输入驳回原因"
      ></textarea>
      <view class="btn-root">
        <view class="cancal" @tap="cancel">取消</view>
        <view class="confirm" @tap="handleRefuse">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import order from '@/api/https/order'
import useOrderInfo from '@/composables/useOrderInfo'
import toast from '@/utils/toast'
import { timeFormatHMS } from '@/utils/tools'
import { computed, ref } from 'vue'
import { store } from '@/store'
const {
  copyInfo, // 复制内容
  afterSalesDetaile, // 售后详情
} = useOrderInfo()

interface PropsType {
  item: any
}
const props = defineProps<PropsType>()

/**
 * 售后状态
 */
const status = computed(() => {
  switch (props.item.status) {
    case 155:
      return '待审核'
    case 160:
      return '已审核'
    case 165:
      return '退货待确认'
    case 167:
      return '退货已收到'
    case 180:
      return '售后成功'
    case 190:
      return '售后失败'
    default:
      return '未知'
  }
})

/**
 * 售后方式
 */
const afsAppealTypeName = computed(() => {
  switch (props.item.appealType) {
    case 1:
      return '仅退款'
    case 2:
      return '退货退款'
    case 3:
      return '重发商品'
    default:
      return '未知'
  }
})

/**
 * 商品数量
 */
const count = computed(() => {
  let num = 0
  props.item.skus.forEach((item: any) => {
    num += item.count
  })
  return num
})

/**
 * 驳回售后
 */
const popup = ref<any>(null)
const reason = ref<string>('')
async function agreeOrRefuse(type: number) {
  // if (props.item.vendorID == 3) {
  //   // 饿百订单
  //   if (type === 1) {
  //     // 同意
  //     let data = {
  //       vendorOrderID: props.item.vendorOrderID,
  //       vendorID: props.item.vendorID,
  //       acceptIt: Boolean(1), // 拒绝为0，同意为1
  //       reason: type === 1 ? '同意退款' : reason.value,
  //     }
  //     let res = await order.agree_or_refuse_cancel(data)
  //     judge(res)
  //   } else {
  //     // type ===3  驳回
  //     let data = {
  //       vendorOrderID: props.item.vendorOrderID,
  //       vendorID: props.item.vendorID,
  //       acceptIt: Boolean(1), // 拒绝为0，同意为1
  //       reason: type === 1 ? '同意退款' : reason.value,
  //     }
  //     let res = await order.agree_or_refuse_cancel(data)
  //     judge(res)
  //   }
  // } else {
  //   // 非饿百订单
    // 退货退款
    let data = {
      afsOrderID: props.item.afsOrderID,
      vendorID: props.item.vendorID,
      approveType: type,
      reason: type === 1 ? '同意退款' : reason.value,
    }
    let res = await order.agree_orRefuse_refund(data)
    judge(res)
  // }
}
async function handleRefuse() {
  if (reason.value) {
    agreeOrRefuse(3)
  } else {
    toast('请输入驳回原因')
  }
}

/**
 * 判断驳回信息
 */
function judge(res: AnyObject) {
  if (res.code == 0) {
    toast('操作成功', 1)
    cancel()
    // 刷新订单
    store.commit('serveInfo/setUpdateOrder', Date.now())
  } else {
    uni.jxAlert({
      title: '错误',
      content: res.desc,
    })
  }
}

/**
 * 关闭驳回弹窗
 */
function cancel() {
  reason.value = ''
  popup.value.close()
}

/**
 * 同意售后
 */
function handleAgree() {
  uni.jxConfirm({
    title: '提示',
    content: '是否同意处理该售后单',
    success: () => {
      agreeOrRefuse(1)
    },
  })
}

/**
 * 商家确认收货
 */
function confirmGoods() {
  uni.jxConfirm({
    title: '提示',
    content: '是否已经收到货',
    success: async () => {
      let data = {
        afsOrderID: props.item.afsOrderID,
        vendorID: props.item.vendorID,
      }
      let res = await order.confirm_received_return_goods(data)
      judge(res)
    },
  })
}
</script>

<style lang="scss" scoped>
@import './after-sales-order.scss';
</style>