<template>
  <view class="afsOrder-detail" v-if="afsOrder.vendorOrderID != 99">
    <view class="skuList pd20">
      <view v-for="sku in afsOrderSku" :key="sku.id">
        <view class="sku-item-for-orderdetail" v-if="sku.skuID">
          <view class="img" @tap="previewImage(sku.image)">
            <image :src="sku.image" mode="scaleToFill" />
          </view>
          <view class="right">
            <view class="sku-name">{{ sku.name }}</view>
            <view class="sku-spec">
              <view class="sku-price">
                <jx-price :price="sku.shopPrice" size="28rpx" color="#f60d58" />
              </view>
              <view class="sku-count">数量: {{ sku.count }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单号 -->
    <view class="cell pd20 cell3" @tap="copyInfo(afsOrder.vendorOrderID)">
      <view>订单编号：{{ afsOrder.vendorOrderID }}</view>
    </view>
    <!-- 售后单号 -->
    <view class="cell pd20 cell3" @tap="copyInfo(afsOrder.afsOrderID)">
      <view>
        售后单号：{{ afsOrder.afsOrderID }}({{ afsAppealTypeName }})
      </view>
    </view>
    <!-- 申请售后时间createTime -->
    <view class="cell pd20 cell3">
      <view>申请时间：{{ createTime }}</view>
    </view>
    <!-- 售后状态 -->
    <view class="cell pd20 cell3">
      <view>售后状态：{{ afsStatus }}</view>
    </view>
    <!-- 配送方式 -->
    <view class="cell pd20 cell3">
      <view>配送方式：{{ waybillVendorName }}</view>
    </view>
    <!-- 售后原因 -->
    <view class="cell pd20 cell3" style="margin-top: 20rpx">
      <view>售后原因：{{ afsReason }}</view>
    </view>
    <!-- 原因说明 -->
    <view class="afsWhy">
      <view>原因描述：{{ afsOrder.reasonDesc }}</view>
    </view>
    <!-- 图片描述 -->
    <view class="imgdesc" v-if="imgList.length > 0 && imgList[0]">
      <view class="title">售后凭证:</view>
      <view class="img-wrapper">
        <view
          class="img-item"
          v-for="(item, index) in imgList"
          :key="index"
          @tap="previewImage(item)"
        >
          <image :src="item" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <!-- 客户 -->
    <view class="userName" v-if="orderData.consigneeMobile && !orderData.buyerComment.includes('支付方式')">
      <view style="font-weight: bold">客户：{{ orderData.consigneeName }}</view>
      <view>
          <text v-if="orderData.consigneeMobile" style="color: #4eb331">临：</text>
          <text
            style="color: #4eb331"
            @tap.stop="phoneCall(orderData.consigneeMobile)"
            v-if="orderData.consigneeMobile.split(',')[1]"
            >{{
              orderData.consigneeMobile.split(',')[0] +
              '转' +
              orderData.consigneeMobile.split(',')[1]
            }}</text
          >
          <text
            v-else
            style="color: #4eb331"
            @tap.stop="phoneCall(orderData.consigneeMobile)"
            >{{ orderData.consigneeMobile }}</text
          >
          <br />
          <!-- 真实号 -->
          <text v-if="orderData.consigneeMobile2" style="color: #4eb331">真：</text>
          <text
            style="color: #4eb331"
            @tap.stop="phoneCall(orderData.consigneeMobile2)"
            v-if="orderData.consigneeMobile2.split(',')[1]"
            >{{
              orderData.consigneeMobile2.split(',')[0] +
              '转' +
              orderData.consigneeMobile2.split(',')[1]
            }}</text
          >
          <text
            v-else
            style="color: #4eb331"
            @tap.stop="phoneCall(orderData.consigneeMobile2)"
            >{{ orderData.consigneeMobile2 }}</text
          >
        </view>
    </view>
    <!-- 操作 155 -->
    <view
      class="status-155"
      v-if="afsOrder.status === 155 && (afsOrder.flag & 3) === 0"
    >
      <view class="loss"
        >若退款造成的损失较大，建议联系顾客，自行上门取回退货。</view
      >
      <view class="btn-group">
        <text class="refuse" @tap.stop="popup.open()" style="width: 82%;">驳回</text>
        <text class="agree" @tap.stop="handleAgree" style="width: 14%;margin-left: 6rpx;">同意</text>
      </view>
    </view>
    <!-- 已进行审核操作 -->
    <view
      v-if="afsOrder.status === 155 && (afsOrder.flag & 3) !== 0"
      class="afsOrder-flag"
    >
      <text v-if="(afsOrder.flag & 3) === 1">已【同意】售后</text>
      <text v-if="(afsOrder.flag & 3) === 3">已【驳回】售后</text>
    </view>
    <!-- 驳回理由 -->
    <view v-if="afsOrder.refuseReason" class="refuseReason">
      驳回理由：{{ afsOrder.refuseReason }}
    </view>
    <!-- 确认收货 -->
    <view
      v-if="afsOrder.status === 165 && (afsOrder.flag & 4) === 0"
      class="status-165"
      @tap.stop="confirmGoods"
    >
      <text>商家确认收货</text>
    </view>
    <!-- 已操作确认收货 -->
    <view
      v-if="afsOrder.status === 165 && (afsOrder.flag & 4) !== 0"
      class="afsOrder-flag"
      >已确认收货</view
    >

    <!-- dialog -->
    <uni-popup type="top" ref="popup" :isMask="true">
      <view class="popup">
        <view class="title">驳回原因</view>
        <textarea
          class="textarea"
          v-model.trim="reason"
          placeholder="请输入驳回原因"
        ></textarea>
        <view class="btn-root">
          <text class="cancel" @tap="cancelFn">取消</text>
          <text class="confirm" @tap="diaConfirm">确定</text>
        </view>
      </view>
    </uni-popup>
  </view>

  <!-- 公共组件 -->
  <jx-empty title="未找到此订单" v-else />
  <jx-loading />
</template>
<script lang="ts" setup>
import useGlobalFunc from '@/composables/useGlobalFunc'
import afterSalesOrderDetailFn from './afterSalesOrderDetail'
const {
  previewImage, // 查看图片
  copyInfo, // 复制信息
  phoneCall, // 拨打电话
} = useGlobalFunc()
const {
  afsOrder, // 售后订单
  afsOrderSku, // 售后详情数据
  orderData, // 订单数据
  afsAppealTypeName, // 售后方式
  createTime, // 订单创建时间
  afsStatus, // 售后单状态
  waybillVendorName, // 配送方式
  afsReason, // 售后原因
  imgList, // 图片列表
  popup, // 售后dialog 实例
  handleAgree, // 同意退款
  confirmGoods, // 退货待确认
  reason, // 驳回原因
  cancelFn, // 取下驳回
  diaConfirm, // 同意驳回
} = afterSalesOrderDetailFn()
</script>

<style lang="scss" scoped>
@import './afterSalesOrderDetail.scss';
</style>
<style>
page {
  background-color: #efefef;
}
</style>