<script setup lang="ts">
import {invoiceListApi, orderDetailApi, orderListApi} from '~/server/orderApi'
import useOrder from '~/composables/useOrder'
import {CartBatchAdd} from "~/types/order";
import {ref, reactive} from "vue";
const { handleIntoPage } = useOrder()
import { activeStatuFilter} from '~/utils/filter'
const route = useRoute()
const orderNo = ref<string>(<string>route.query.orderNo)
const loading = ref<boolean>(false)
const type = ref<number>(0) //订单类型 0-普通订单，1-视频号订单,2-秒杀订单

const bgColor = reactive<any>({
  bgColor: '',
  Color: '#E93323',
  width: '36rpx',
  timeTxtwidth: '16rpx',
  isDay: true,
  fontSize: '14px',
})

/**
 * 订单详情
 */
const orderInfo = reactive({})
const cartInfo = ref([]) //再次购买加入购物车的商品
const userAddress = ref([])
const isUserAddress = ref<boolean>(false) //是否只显示一次收货地址
const shippingType = ref<number>(1) //是快递还是自提 1快递2自提
const getOrderDetail = async () => {
  loading.value = true
  await orderDetailApi(orderNo.value)
    .then((res) => {
      Object.assign(orderInfo, res)
      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
    })
}
getOrderDetail()

//物流列表
const { data: invoiceList} = await useAsyncData(async () => invoiceListApi(orderNo.value))
// 地址跳转
const handlerNuxtLink = async ()=>{
  await linkNavigateTo(`/order/order_logistics`,{orderNo: orderNo.value})
}

//去退款列表
const handleToOrderRefund = async (orderNo: string) =>{
  await linkNavigateTo(`/users/refund_list`, {  type: 9,orderNo: orderNo })
}


const useOrders = useOrder()
//再次购买
const handleByAgain = async() => {
  let cartListRequest:Array<CartBatchAdd> = []
  cartInfo.value.map((item) => {
    cartListRequest.push({
      productId: parseFloat(item.productId),
      productAttrUnique: item.attrValueId,
      cartNum: parseFloat(item.payNum),
    })
  })
  await useOrders.onByAgain(cartListRequest)
}

//立即付款
const handlePaymentOrder = (orderNo:string)=>{
  linkNavigateTo(`/order/order_payment`, { orderNo: orderNo })
}

//倒计时结束
const isShowCancelTime = ref<boolean>(false)
const stopTime = () => {
  isShowCancelTime.value=true
}
</script>

<template>
  <div class="wrapper_1200" v-loading="loading">
    <page-header title="订单详情" menuTitle="我的订单"></page-header>
    <div v-if="orderInfo.status === 0 && !isShowCancelTime" class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
      <div class="acea-row font-color">
        <countDown
            class="ml-5px mr-5px"
            :is-day="true"
            :tip-text="' '"
            :day-text="' '"
            :hour-text="' : '"
            :minute-text="' : '"
            :second-text="' '"
            :datatime="orderInfo.cancelTime / 1000"
            :isCol="false"
            :bgColor="bgColor"
            @stopTime="stopTime"
        >
        </countDown>
        <div>后订单取消</div>
      </div>
    </div>
    <!--订单状态-->
    <div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
      <div class="fontColor333 text-16px">订单状态：{{ orderStatusFilter(orderInfo.status) }}</div>
      <div v-if="orderInfo.status !== 9 && orderInfo.status !== 3" class="mt-40px">
        <el-steps :active="activeStatuFilter(orderInfo.status)" align-center finish-status="success">
          <el-step title="待付款" />
          <el-step title="待发货" />
          <el-step title="待收货" />
          <el-step title="已收货" />
          <el-step title="已完成" />
        </el-steps>
      </div>
    </div>
    <!-- 物流信息-->
    <div v-if="Number(orderInfo.status) >1 &&Number(orderInfo.status) < 9 && orderInfo.status!=3&&shippingType!==2" @click="handlerNuxtLink" class="w-100% borRadius bg-#FEF5F4 h-50px lh-49px px-30px mbtom20 flex-between-center cursors">
      <div class="font-color text-14px lh-14px">
        <span class="iconfont icon-xiaoxi mr-10px"></span>
        <span v-if="invoiceList.num>1">当前订单已拆分成{{invoiceList.num}}个包裹，{{invoiceList.deliveryNum}}个已发出</span>
        <span v-else>当前订单有{{invoiceList.num}}个包裹</span>
      </div>
      <div class="text-14px text-#666 lh-14px">查看物流 ></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 fontColor333 w-540px">
          <div class="mb-20px">订单编号：{{ orderInfo.orderNo }}</div>
          <div class="mb-20px">下单时间：{{ orderInfo.createTime }}</div>
          <div v-show="orderInfo.payType" class="mb-20px">支付方式：{{ payTypeFilter(orderInfo.payType) }}</div>
        </div>
        <div class="w-1px h-124px bg-#EEEEEE"></div>
        <!-- 收货地址只显示一次 -->
        <div v-if="isUserAddress" class="text-14px fontColor333 ml-30px w-565px">
          <div class="mb-20px">收货人：{{ userAddress[0].realName }}</div>
          <div class="mb-20px">联系电话：{{ userAddress[0].userPhone }}</div>
          <div class="">收货地址：{{ userAddress[0].userAddress }}</div>
        </div>
      </div>
    </div>
    <!--商品信息-->
    <div
      v-for="item in orderInfo.merchantOrderList"
      :key="item.id"
      class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20"
    >
      <div class="acea-row mb-30px">
        <div v-if="item.isSelf"><span class="lh-12px bg-color inline-block text-12px text-#fff b-rd-2px py-2px mr-6px px-4px relative" style="top:-2px">自营</span></div>
<!--        <div v-show="item.isSelf" class="labelClass bg-color text-#fff mr-6px" style="line-height: normal">自营</div>-->
        <div  @click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })" class="fontColor333 text-14px cursors">{{item.merName}}</div>
      </div>
      <div v-for="itm in item.orderInfoList">
        <confirm-product :list="itm" :productType="orderInfo.type" useType="orderDetails"></confirm-product>
      </div>
      <el-divider border-style="dashed" />
      <div class="mbtom20">
        <div class="acea-row mb20px">
          <div class="text-14px fontColor6">配送方式：</div>
          <div class="text-14px fontColor6 ml-10px">
            {{ item.shippingType === 1 ? '快递配送' : '到店自提，请前往移动端操作' }}
          </div>
        </div>
        <div class="acea-row mb20px">
          <div v-if="item.shippingType === 2" class="text-14px fontColor6">
            商户信息：<span class="ml-10px">{{ item.merName }}，  {{item.merAddressDetail}}， {{item.merPhone}}</span>
          </div>
        </div>
        <div class="acea-row mb20px">
          <div class="text-14px fontColor6">买家留言：</div>
          <div class="text-14px fontColor6 ml-10px">{{ item.userRemark || '-' }}</div>
        </div>
      </div>
    </div>

    <!--费用详情-->
    <div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
      <div v-if="orderInfo.payPostage > 0" class="acea-row justify-between mb20px">
        <div class="text-14px fontColor6">运费:</div>
        <div class="text-14px fontColor333"><span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.payPostage }}</span></div>
      </div>
      <div v-if="orderInfo.merCouponPrice > 0" class="acea-row justify-between mb20px">
        <div class="text-14px fontColor6">商家优惠:</div>
        <div class="text-14px fontColor333">-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.merCouponPrice || 0 }}</span></div>
      </div>
      <div v-if="orderInfo.platCouponPrice > 0" class="acea-row justify-between mb20px">
        <div class="text-14px fontColor6">平台优惠:</div>
        <div class="text-14px fontColor333">-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.platCouponPrice || 0 }}</span></div>
      </div>
      <div v-if="orderInfo.integralPrice > 0" class="acea-row justify-between mb20px">
        <div class="text-14px fontColor6">积分抵扣:</div>
        <div class="text-14px fontColor333">-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.integralPrice || 0 }}</span></div>
      </div>
      <div class="acea-row justify-between">
        <div class="text-14px fontColor6">实付款:</div>
        <div class="text-14px fontColor333">
          <span class="font-color oppoSans-M">￥</span><span class="text-22px font-color fw-600 dinProRegular">{{ orderInfo.payPrice || 0 }}</span>
        </div>
      </div>
    </div>

    <!--操作按钮-->
    <!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
    <div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20 flex-between-center">
      <div class="text-14px">
        合计： <span class="font-color oppoSans-M">￥</span
        ><span class="text-22px font-color fw-600 dinProRegular">{{ orderInfo.payPrice || 0 }}</span>
      </div>
      <div class="handleBtnBox">
        <!--        <el-button round class="w-150px btn">联系客服</el-button>-->
        <el-button v-if="orderInfo.status == 0" round class="w-120px btn" @click="useOrders.onCancelOrder(orderInfo.orderNo)"
          >取消订单</el-button
        >
        <el-button
          v-if="orderInfo.status == 6 || orderInfo.status == 9"
          round
          class="w-120px btn"
          @click="useOrders.onDeleteOrder(orderInfo.orderNo)"
          >删除订单</el-button
        >
        <el-button
          v-if="orderInfo.status == 0 && !isShowCancelTime"
          color="#E93323"
          round
          class="w-120px btn"
          @click="handlePaymentOrder(orderInfo.orderNo)"
          >立即付款</el-button
        >
        <el-button
          v-if="(orderInfo.status === 4 || orderInfo.status === 9 || orderInfo.status ===6) && orderInfo.type === 0"
          :color="Number(orderInfo.status) === 4?'':'#E93323'"
          round
          class="w-120px btn"
          @click="handleByAgain"
          >再次购买</el-button
        >
        <el-button
            v-if="orderInfo.status>0 && orderInfo.status<6"
            round
            class="w-120px btn text-16px"
            @click="handleToOrderRefund(orderInfo.orderNo)"
        >申请退款</el-button
        >
        <el-button
            v-if="orderInfo.status == 4"
            color="#E93323"
            round
            class="w-120px btn text-16px"
            @click="useOrders.onConfirmOrder(orderInfo.orderNo)"
        >确认收货</el-button
        >
      </div>
    </div>
  </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>