<template>
  <layout class="orderInfo">
    <uv-navbar
        :fixed="false"
        title="订单详情"
        left-arrow
        @leftClick="goList"
    />
    <view v-if="orderInfoData">
      <view class="orderInfo-header background-warp">
        <view class="background">
          <image
              class="image"
              src="@/static/images/order-info-bg.png"
              mode="widthFix"
          />
        </view>
        <view class="background-content page-space">
          <view class="order-status-info">
            <view
                class="order-status"
                :class="'order-status-'+ orderInfoData.status"
            >
              <!-- <image
                class="image"
                src="@/static/images/kjzq.png"
              /> -->
              <view>{{ orderInfoStatusMsg }}</view>
            </view>
            <view class="order-date">
              {{ orderInfoData._status._msg }}
            </view>
          </view>
          <view class="address noBorder">
            <view class="address-icon">

              <image
                  class="image"
                  src="@/static/images/icon-location.png"
              />
            </view>
            <view class="address-main">
              <view class="address-header">
                <view class="address-name">{{ orderInfoData.realName }}</view>
                <view class="address-phone">{{ orderInfoData.userPhone }}</view>
              </view>
              <view class="address-content">
                <view class="address-desc">{{ orderInfoData.userAddress }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="page-space">

        <view class="order-goods  page-card mb-20">
          <!-- <view class="order-header">
            <view class="order-logo">
              <image
                class="image"
                src="@/static/images/flashKilling.png"
                alt=""
              />
            </view>
          </view> -->
          <view
              v-for="(item, index) in orderInfoData.cartInfo"
              class="order-evaluate"
              :class="{evaluateBtn: orderInfoData._status._type == 3}"
          >
            <goods
                list
                interval
                desc="3"
                showAction
                model
                :purchase="item.cartNum"
                :data="item.productInfo"
            >
              <template #price>
                ￥{{ item.truePrice }}
              </template>
            </goods>
            <view
                v-if="orderInfoData.status == 2 && item.isReply === 0"
                @tap.stop="toEvaluate(item)"
                class="order-actions-primary order-evaluate-btn"
            >去评价
            </view>
          </view>
          <view class="order-infos infos mb-20 infos-right border-top">
            <view class="info-cell">
              <view class="info-cell-label">商品总价：</view>
              <view class="info-cell-value">¥{{ orderInfoData.cost }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">优惠：</view>
              <view class="info-cell-value">¥{{ orderInfoData.couponPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">运费：</view>
              <view class="info-cell-value">¥{{ orderInfoData.totalPostage }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">总计：</view>
              <view class="info-cell-value">¥{{ orderInfoData.payPrice }}</view>
            </view>
          </view>
        </view>

        <view class="mb-20 card">
          <view class="card-head">
            <view class="card-title">
              订单信息
            </view>
          </view>
          <view class="card-content">
            <view class="infos">
              <view class="info-cell">
                <view class="info-cell-label">
                  订单编号
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.orderId }}
                </view>
                <view
                    class="info-cell-operation"
                    @click="setData(orderInfoData.orderId,'复制成功')"
                >
                  复制
                </view>

              </view>
              <view class="info-cell">
                <view class="info-cell-label">
                  创建时间
                </view>
                <view class="info-cell-value">
                  {{ $timeFormat(orderInfoData.createTime, 'yyyy-mm-dd hh:MM:ss') }}
                </view>
              </view>
              <view
                  class="info-cell"
                  v-if="orderInfoData.status > 0"
              >
                <view class="info-cell-label">
                  付款时间
                </view>
                <view class="info-cell-value">
                  {{ $timeFormat(orderInfoData.payTime, 'yyyy-mm-dd hh:MM:ss') }}
                </view>
              </view>
              <view
                  class="info-cell"
                  v-if="orderInfoData.deliveryTime"
              >
                <view class="info-cell-label">
                  发货时间
                </view>
                <view class="info-cell-value">
                  {{ $timeFormat(orderInfoData.deliveryTime, 'yyyy-mm-dd hh:MM:ss') }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
            class="mb-20 card"
            v-if="orderInfoData.status >= 1"
        >
          <view class="card-head">
            <view class="card-title">
              物流信息
            </view>
          </view>
          <view
              class="card-content "
              v-if="expressData"
          >
            <view class="paddingH-10">
              <view class="no-express" v-if="expressData.length === 0">暂无轨迹信息</view>
              <uv-steps
                  v-else
                  current="0"
                  direction="column"
                  activeColor="#EE6D46"
                  inactiveColor="#E5E5E5"
              >
                <uv-steps-item
                    v-for="(item, index) in expressData"
                    :key="index"
                    :title="item.acceptStation"
                    :desc="item.acceptTime"
                ></uv-steps-item>
              </uv-steps>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-bar-bg"></view>

      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status == 0"
      >
        <!-- 未支付 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-delete"
              @tap="handleCancel"
          >
            取消订单
          </view>
          <view
              class="order-actions-primary"
              @tap="handlePay"
          >
            立即付款
          </view>
        </view>
      </view>

      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status === 99"
      >
        <!-- 待发货 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-delete"
              @tap="toSelectRefundGood(orderInfoData)"
          >
            申请退款
          </view>
        </view>
      </view>
      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status === 1"
      >
        <!-- 已发货 待收货 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-delete"
              @tap="toSelectRefundGood(orderInfoData)"
          >
            申请退款
          </view>
          <view
              class="order-actions-primary"
              @tap="handleOrderTake"
          >
            确认收货
          </view>
        </view>
      </view>

      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status === 2"
      >
        <!-- 待评价 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-primary"
              @tap="toSelectRefundGood(orderInfoData)"
          >
            申请售后
          </view>
          <!--          <view-->
          <!--            class="order-actions-primary"-->
          <!--            @tap="toEvaluate(orderInfoData.cartInfo[0])"-->
          <!--          >-->
          <!--            去评价-->
          <!--          </view>-->

        </view>
      </view>

      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status === 3"
      >
        <!-- 已完成 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view
              class="order-actions-delete"
              @tap="handleDelete"
          >
            删除订单
          </view>
          <view
              class="order-actions-primary"
              @tap="toSelectRefundGood(orderInfoData)"
          >
            申请售后
          </view>
        </view>
      </view>

      <!-- 退款中 -->
      <view
          class="order-actions bottom-bar"
          v-if="orderInfoData.status === 5"
      >
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view class="order-actions-primary">
            查看订单
          </view>
        </view>
      </view>

      <!-- 已退款 -->
      <!-- <view
        class="order-actions bottom-bar"
        v-if="orderInfoData.status == 6"
      >
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view class="order-actions-primary">
            查看订单
          </view>
        </view>
      </view> -->

      <!-- 退款 -->
      <!-- <view
        class="order-actions bottom-bar"
        v-if="orderInfoData.status == 7"
      >
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view class="order-actions-primary">
            查看订单
          </view>
        </view>
      </view> -->


    </view>
  </layout>
  <!-- 支付弹窗 -->
  <PayPopup
      ref="payPopupRef"
      @confrim="paySucess"
  />
</template>

<script setup>
import { ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderCancel, orderDelete, orderExpress, orderInfo, orderTake } from '@/api/order'
import { orderReStatus } from '@/config'
import { useRouter } from "@/hooks/useRouter";
import { useShearPlate } from "@/hooks/useShearPlate";
import { useGlobalProperties } from "@/hooks";
import PayPopup from "@/components/PayPopup/index.vue";

const {$timeFormat} = useGlobalProperties()

const {getParams, push, goBack} = useRouter()

const orderInfoData = ref(null)
const orderInfoStatusMsg = ref('')
const expressData = ref(null)

const {setData} = useShearPlate();


const handleOrderInfo = async (option) => {
  const res = await orderInfo(option)
  orderInfoData.value = res
  res.status = res.paid === 1 && res.status === 0 ? 99 : res.status
  handleMsg(res.status)
  if (res._status._type > 1) {
    const express = await orderExpress({
      orderCode: orderInfoData.value.orderId,
      shipperCode: orderInfoData.value.deliverySn,
      logisticCode: orderInfoData.value.deliveryId,
    })
    expressData.value = express.traces.reverse()
  }
}


const handleOrderTake = async () => {
  uni.showModal({
    title: '提示',
    content: '确认收货',
    success: async (res) => {
      if (res.confirm) {
        let option = {
          uni: orderInfoData.value.orderId,
        }
        const res = await orderTake(option)
        toast({
          title: '收货成功'
        })
        handleOrderInfo({
          key: option.uni
        })

      } else if (res.cancel) {
      }
    }
  });

}


const handlePay = () => {
  openPay(orderInfoData.value.orderId)
  // push({url: '/pages/selectPlay/selectPlay'}, {
  //   data: {
  //     key: orderInfoData.value.unique,
  //     orderId: orderInfoData.value.orderId,
  //   }
  // })
}

// 返回列表
const goList = ()=>{
  push({url: '/pages/orderList/orderList'}, {
    data: {
      type: orderInfoData.value.status === 99?1:orderInfoData.value.status+1,
    }
  })
}

// 去评价
const toEvaluate = (item) => {
  push({url: '/pages/evaluate/evaluate'}, {
    data: {
      unique: item.unique,
    }
  })
}

const toSelectRefundGood = () => {
  push({url: '/pages/selectRefundGood/selectRefundGood'}, {
    data: {
      orderId: orderInfoData.value.orderId,
      id: orderInfoData.value.id,
      status: orderInfoData.value.status === 99?0:orderInfoData.value.status
    }
  })
}

const handleMsg = (status) => {
  orderInfoStatusMsg.value = orderReStatus[status]
}


const handleDelete = async () => {
  uni.showModal({
    title: '提示',
    content: '确认删除订单',
    success: async (res) => {
      if (res.confirm) {
        await orderDelete({
          uni: orderInfoData.value.orderId
        })
        uni.showToast({
          title: '已删除',
          duration: 2000
        });
        setTimeout(()=>{
          goList()
        },2000)
      } else if (res.cancel) {
      }
    }
  });
}

const handleCancel = async () => {
  uni.showModal({
    title: '提示',
    content: '确认取消订单',
    success: async (res) => {
      if (res.confirm) {
        await orderCancel({
          id: data.value.orderId
        })
        data.value = null
        uni.showToast({
          title: '已取消',
          duration: 2000
        });
      } else if (res.cancel) {
      }
    }
  });
}

// ============================== 支付相关 ===============================
const payPopupRef = ref()

function openPay(orderId) {
  unref(payPopupRef).show(orderId)
}


function paySuccess() {
  push({url: '/pages/payStatus/index?type=1'})
}


onLoad((options) => {
  const params = getParams(options)
  handleOrderInfo({
    key: params.orderId
  })
})


</script>

<style lang="scss">
.orderList {
  padding: 20rpx 0;
}

.order-header {
}

.order-status-info {
  padding: 50rpx 0;


  .order-status {
    display: flex;
    align-items: center;
    height: 42rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-bottom: 20rpx;
    padding-left: 50rpx;
    background-size: 40rpx 40rpx;
    background-position: left center;
    background-repeat: no-repeat;

    .image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    &.order-status-0,&.order-status--1 {
      background-image: url("../../static/images/icon-order-info-1.png");
    }

    &.order-status-1, &.order-status-99 {
      background-image: url("../../static/images/icon-order-info-2.png");
    }

    &.order-status-2, &.order-status-3 {
      background-image: url("../../static/images/icon-order-info-4.png");
    }
  }

  .order-date {
    height: 33rpx;
    font-size: 24rpx;
    color: #FFFFFF;
  }

}

.order-infos {
  margin: 0 40rpx;
  padding: 40rpx 0 20rpx;

  &:after {
    content: '';
  }
}

.no-express{
  font-size: 26rpx;
  padding: 20rpx 14rpx 30rpx;
}
</style>
