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

        <view class="order-goods  page-card mb-20">
          <view class="order-header">
            <view class="order-title">
              退款信息
            </view>
          </view>
          <goods
            list
            interval
            desc="3"
            showAction
            model
            purchase="x3"
            :data="item.productInfo"
            v-for="(item, index) in orderInfoData.cartInfo"
          >
            <template
              #action
              v-if="orderInfoData.status == 2 && item.isReply > 0"
            >
              <uv-button
                type="primary"
                text="去评价"
                size="small"
                @tap="toEvaluate(item)"
              ></uv-button>
            </template>
            <template
              #action
              v-if="orderInfoData.status == 3"
            >
              <uv-button
                type="primary"
                text="退款"
                size="small"
                @tap="toEvaluate(item)"
              ></uv-button>
            </template>
          </goods>

          <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.payPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">优惠：</view>
              <view class="info-cell-value">¥{{ orderInfoData.deductionPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">运费：</view>
              <view class="info-cell-value">¥{{ orderInfoData.freightPrice }}</view>
            </view>
            <view class="info-cell ">
              <view class="info-cell-label">总计：</view>
              <view class="info-cell-value">¥{{ orderInfoData.totalPrice }}</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">
                  复制
                </view>

              </view>
              <view class="info-cell">
                <view class="info-cell-label">
                  创建时间
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.createTime }}
                </view>
              </view>
              <view
                class="info-cell"
                v-if="orderInfoData.status > 0"
              >
                <view class="info-cell-label">
                  创建时间
                </view>
                <view class="info-cell-value">
                  {{ orderInfoData.payTime }}
                </view>
              </view>
              <view
                class="info-cell"
                v-if="orderInfoData.status >= 1"
              >
                <view class="info-cell-label">
                  发货时间
                </view>
                <view class="info-cell-value">
                  <!-- {{ orderInfoData.payTime }} -->
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="mb-20 card">
          <view class="card-head">
            <view class="card-title">
              物流信息
            </view>
          </view>
          <view class="card-content">

          </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 == 0"
      >
        <!-- 待发货 -->
        <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 == 1"
      >
        <!-- 已发货 待收货 -->
        <view class="order-actions-left">
        </view>
        <view class="order-actions-btns">
          <view class="order-actions-delete">
            申请退款
          </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="toEvaluate"
          >
            去评价
          </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>
</template>

<script setup>
import { ref } from 'vue'
import { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { orderCancel, orderInfo, orderTake, orderDelete } from '@/api/order'
import { orderReStatus } from '@/config'



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

const msg = {

}

const handleOrderInfo = async (option) => {
  const res = await orderInfo(option)
  orderInfoData.value = res
  handleMsg(res.status)
  console.log("--> % handleOrderInfo % res:\n", res)
}


const handleOrderTake = async () => {
  let option = {
    uni: orderInfoData.value.orderId,
  }
  const res = await orderTake(option)
  handleOrderInfo({
    key: option.orderId
  })
  // orderInfoData.value = res
  // handleMsg(res.status)
  // console.log("--> % handleOrderInfo % res:\n", res)
}



const handlePay = () => {

  navigateTo({
    url: '/pages/selectPlay/selectPlay',
    query: {
      key: orderInfoData.value.unique,
      orderId: orderInfoData.value.orderId,
    }
  })
}


const toEvaluate = (item) => {
  navigateTo({
    url: '/pages/evaluate/evaluate',
    query: {
      unique: item.unique,
    }
  })
}

const toSelectRefundGood = () => {
  navigateTo({
    url: '/pages/selectRefundGood/selectRefundGood',
    query: {
      orderId: orderInfoData.value.orderId,
      id: orderInfoData.value.id,
    }
  })
}

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


const handleDelete = async () => {
  await orderDelete({
    id: orderInfoData.value.orderId
  })
}

onLoad((option) => {
  handleOrderInfo({
    key: option.orderId
  })
})



</script>

<style lang="less">
.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;

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

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

}

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

  &:after {
    content: '';
  }
}
</style>
