<script setup lang="ts">
import { refundDetailApi } from '~/server/orderApi'
import useOrder from '~/composables/useOrder'
import { ref, reactive } from 'vue'
const { handleIntoPage } = useOrder()
import { orderRefundTipsStatusFilter, orderRefundFilter } from '~/utils/filter'
import useOrderRefund from '~/composables/useOrderRefund'
import ReturningGoods from '~/pages/order/components/returningGoods.vue'
import { merchantAddressApi, merCustomerApi } from '~/server/merchantApi'
import { ItemObject } from '~/types/global'
import { QuestionFilled } from '@element-plus/icons-vue'
const route = useRoute()
const refundOrderNo = ref<string>(<string>route.query.refundOrderNo)
const loading = ref<boolean>(false)
const type = ref<number>(0) //订单类型 0-普通订单，1-视频号订单,2-秒杀订单
const { onRevokeRefund } = useOrderRefund()

//复制
const { handleCopy } = useCopy()
const copyText = () => {
  handleCopy(orderInfo.trackingNumber)
}

/**
 * 退款订单详情
 */
onMounted(() => {
  getOrderRefundDetail()
})
const orderInfo = reactive({})
const cartInfo = ref([]) //再次购买加入购物车的商品
const userAddress = ref([])
const isUserAddress = ref<boolean>(false) //是否只显示一次收货地址
const getOrderRefundDetail = async () => {
  loading.value = true
  await refundDetailApi(refundOrderNo.value)
    .then((res) => {
      Object.assign(orderInfo, res)
      //商户地址
      if (orderInfo.returnGoodsType === 2) getMerchantAddress()
      //客服配置
      getChatConfig()
      userAddress.value = res.merchantOrderList.filter((item: any) => {
        return item.shippingType === 1
      })
      cartInfo.value = res.merchantOrderList[0].orderInfoList
      isUserAddress.value = userAddress.value.length > 0 ? true : false
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

//商户地址
const merchantAddress = ref<string>('')
const getMerchantAddress = async () => {
  merchantAddress.value = await merchantAddressApi(orderInfo.merId)
}

//获取客服配置
const { chatConfig } = useOrder()
const chatConfigData = reactive<ItemObject>({})
const getChatConfig = async () => {
  let data = await merCustomerApi(orderInfo.merId)
  Object.assign(chatConfigData, data)
}

//联系客服
const handleChat = async () => {
  await chatConfig(chatConfigData)
}

//撤销售后
const handleRevokeRefund = async (refundOrderNo: string) => {
  await onRevokeRefund(refundOrderNo).then(async () => {
    await getOrderRefundDetail()
  })
}

//退回弹窗
const { bool: dialogVisible, DialogOpen, DialogClose } = useDialog()
//退回商品
const returnGoodsType = ref<number>(0) //退回状态
const handleReturningRefund = async (item: any) => {
  returnGoodsType.value = item.returnGoodsType
  DialogOpen()
}
//退回提交成功回调
const handleSubmitSuccess = async () => {
  await getOrderRefundDetail()
  await DialogClose()
}
//关闭弹窗
const handleSubmitClose = () => {
  DialogClose()
}
</script>

<template>
  <div class="wrapper_1200" v-loading="loading">
    <page-header title="售后详情" menuTitle="售后/退款"></page-header>
    <!--订单状态 refundStatus售后状态：0:待审核 1:商家拒绝 2：退款中 3:已退款 4:用户退货 5:商家待收货 6:已撤销-->
    <div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20">
      <div class="fontColor333 text-20px font-500 oppoSans-M mb-15px acea-row items-center">
        <div class="mr-10px">{{ orderRefundFilter(orderInfo.refundStatus) }}</div>
        <div v-show="orderInfo.refundStatus === 3" class="text-18px font-color dinProSemiBold">
          <span class="text-12px">￥</span>{{ orderInfo.refundPrice }}
        </div>
      </div>
      <div v-if="orderInfo.refundStatus === 1" class="text-#666 text-14px font-400 oppoSans-R">
        {{ orderInfo.refundReason }}
      </div>
      <div v-else class="text-#666 text-14px font-400 oppoSans-R">
        {{ orderRefundTipsStatusFilter(orderInfo.refundStatus) }}
      </div>
    </div>
    <!-- 物流信息-->
    <div
      v-if="
        orderInfo.refundStatus > 0 &&
        orderInfo.afterSalesType === 2 &&
        orderInfo.returnGoodsType === 1 &&
        orderInfo.expressName &&
        orderInfo.trackingNumber
      "
      class="w-100% borRadius bg-#fff h-90px px-30px py-22px mbtom20 flex-y-center"
    >
      <div class="text-14px lh-14px w-50px h-50px b-rd-50% bg-#F7F7F7 text-center lh-50px mr-15px">
        <span class="iconfont icon-kuaidi" style="font-size: 24px"></span>
      </div>
      <div class="font-400 text-14px oppoSans-R">
        <div class="oppoSans-R mb-14px text-#333333">
          <span>快递公司：{{ orderInfo.expressName }}</span>
          <span class="ml-50px">联系电话：{{ orderInfo.telephone }}</span>
        </div>
        <div class="oppoSans-R text-#333333">
          快递单号： {{ orderInfo.trackingNumber
          }}<span
            class="text-#333333 ml-10px oppoSans-R borderSol b-rd-10px w-40px h-20px lh-20px text-12px inline-block text-center cursors"
            @click="copyText"
            >复制</span
          >
        </div>
      </div>
    </div>
    <!-- 用户到店退回联系电话-->
    <div
      v-if="
        orderInfo.refundStatus > 0 &&
        orderInfo.afterSalesType === 2 &&
        orderInfo.returnGoodsType === 2 && orderInfo.telephone
      "
      class="w-100% borRadius bg-#fff h-90px px-30px py-22px mbtom20 flex-y-center"
    >
      <div class="text-14px lh-14px w-50px h-50px b-rd-50% bg-#F7F7F7 text-center lh-50px mr-15px">
        <span class="iconfont icon-kuaidi" style="font-size: 24px"></span>
      </div>
      <div class="font-400 text-14px oppoSans-R">
        <div class="oppoSans-R text-#333333">
          <span>联系电话：{{ orderInfo.telephone }}</span>
        </div>
      </div>
    </div>
    <!--退回地址,订单待审核之后，有地址展示，无地址不展示-->
    <div
      v-if="orderInfo.refundStatus>0 && ((orderInfo.returnGoodsType ===1 && orderInfo.receiver && orderInfo.receiverPhone) || (orderInfo.returnGoodsType === 2 &&merchantAddress))"
      class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20"
    >
      <div class="fontColor333 text-16px mb-30px">{{ orderInfo.returnGoodsType === 1 ? '退回地址' : '商家地址' }}</div>
      <div v-if="orderInfo.returnGoodsType === 1 && orderInfo.receiver && orderInfo.receiverPhone" class="acea-row">
        <div class="text-14px text-#666">
          <div class="mb-20px oppoSans-R">收货人：{{ orderInfo.receiver }}</div>
          <div class="mb-20px oppoSans-R">联系电话：{{ orderInfo.receiverPhone }}</div>
          <div class="oppoSans-R">收货地址：{{ orderInfo.receiverAddressDetail }}</div>
        </div>
      </div>
      <div v-if="orderInfo.returnGoodsType === 2" class="acea-row">
        <div class="text-14px text-#666">
          <div class="mb-20px oppoSans-R">商户名称：{{ merchantAddress.name }}</div>
          <div class="mb-20px oppoSans-R">联系电话：{{ merchantAddress.phone }}</div>
          <div class="oppoSans-R">收货地址：{{ merchantAddress.addressDetail }}</div>
        </div>
      </div>
    </div>
    <!--售后信息-->
    <div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
      <div class="fontColor333 text-16px mb-30px">售后信息</div>
      <div class="acea-row">
        <div class="text-14px text-#666 w-540px oppoSans-R">
          <div class="mb-20px oppoSans-R">售后单号：{{ orderInfo.refundOrderNo }}</div>
          <div class="mb-20px oppoSans-R">申请时间：{{ orderInfo.createTime }}</div>
          <div class="mb-20px oppoSans-R">售后类型：{{ orderInfo.afterSalesType === 1 ? '仅退款' : '退货退款' }}</div>
          <div v-if="orderInfo.returnGoodsType !== 0" class="mb-20px oppoSans-R">
            退货方式：{{
              orderInfo.returnGoodsType === 0 ? '不退货' : orderInfo.returnGoodsType === 1 ? '快递退回' : '到店退货'
            }}
          </div>
          <div class="oppoSans-R mb-20px">退款件数：{{ orderInfo.applyRefundNum }}</div>
          <div class="oppoSans-R">退款方式：原路返回</div>
        </div>
        <div class="w-1px h-124px bg-#EEEEEE"></div>
        <div class="text-14px text-#666 ml-30px w-565px">
          <div class="mb-20px oppoSans-R flex-y-center">
            退款金额：￥{{ orderInfo.refundPrice }}
            <div class="cursors acea-row">
              <el-tooltip class="box-item" effect="light" placement="bottom-start">
                <template #content>
                  1. 在线支付，退款金额原路返还；<br />2. 符合退款规则的优惠券，直接退回您已领取优惠券； <br />3.
                  抵扣积分退回与赠送积分扣除，系统自动进行。</template
                >
                <el-icon color="#CCCCCC" class="ml-6px"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
          <div class="mb-20px oppoSans-R">退款原因：{{ orderInfo.refundReasonWap }}</div>
          <div class="mb-20px oppoSans-R">
            备注说明：{{ orderInfo.refundReasonWapExplain ? orderInfo.refundReasonWapExplain : '-' }}
          </div>
          <div class="acea-row oppoSans-R">
            售后凭证：
            <div v-if="orderInfo.refundReasonWapImg">
              <el-image
                v-for="item in orderInfo.refundReasonWapImg.split(',')"
                :src="item"
                :preview-src-list="orderInfo.refundReasonWapImg.split(',')"
                class="cursors w-66px h-66px b-rd-6px mr-10px"
              ></el-image>
            </div>
            <div> - </div>
          </div>
        </div>
      </div>
    </div>
    <!--商品信息-->
    <div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
      <div class="flex-between-center mb-30px">
        <div class="fontColor333 text-16px">商品信息</div>
        <div class="text-#999999 font-400 oppoSans-R text-14px">
          订单号：<span class="text-#333333 font-400 oppoSans-R text-14px">{{ orderInfo.orderNo }}</span>
        </div>
      </div>
      <confirm-product :list="orderInfo" :productType="orderInfo.productType"></confirm-product>
    </div>

    <!--操作按钮-->
    <!-- 售后状态：0:待审核 1:商家拒绝 2：退款中 3:已退款 4:用户退货 5:商家待收货 6:已撤销 -->
    <!--    v-show="orderInfo.refundStatus !== 3 && orderInfo.refundStatus !== 6"-->
    <div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20 flex-between-center">
      <div></div>
      <div>
        <el-button round class="w-120px btn" @click="handleChat">联系客服</el-button>
        <el-button
          v-if="orderInfo.refundStatus === 0 || orderInfo.refundStatus === 4 || orderInfo.refundStatus === 5"
          round
          class="w-120px btn"
          @click="handleRevokeRefund(orderInfo.refundOrderNo)"
          >撤销售后</el-button
        >
        <el-button
          v-if="orderInfo.refundStatus === 4 && orderInfo.afterSalesType === 2"
          round
          type="primary"
          class="w-120px btn"
          @click="handleReturningRefund(orderInfo)"
          >退回商品</el-button
        >
      </div>
    </div>

    <!--退回商品-->
    <returning-goods
      :returnGoodsType="returnGoodsType"
      :refundOrderNo="refundOrderNo"
      :isShowDialog="dialogVisible"
      @handleSubmitSuccess="handleSubmitSuccess"
      v-if="dialogVisible"
      :merchantAddressDetail="merchantAddress"
      @handleSubmitClose="handleSubmitClose"
    ></returning-goods>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-step__head.is-success) {
  --el-color-success: #e93323;
}
:deep(.el-step__title.is-success) {
  --el-color-success: #333333;
}
.btn {
  height: 44px;
  line-height: 44px;
  border-radius: 33px 33px 33px 33px;
  font-size: 16px;
}
</style>
