<template>
  <!-- 我的订单 -->
  <view>
    <u-navbar :placeholder="true" title="订单" bgColor="#F8FAFB" :autoBack="true"></u-navbar>
    <view class="tabs">
      <u-tabs
        :activeStyle="{ color: '#000000', fontWeight: 'bold', transform: 'scale(1.05)' }"
        :inactiveStyle="{ color: '#00000099', transform: 'scale(1)' }"
        itemStyle="padding-left: 5px;padding-bottom:12rpx; padding-right: 5px; height: 34px;"
        :list="list1"
        :current="tabStatus"
        lineWidth="15"
        lineColor="#FB753C"
        :scrollable="false"
        @click="click"
      ></u-tabs>
    </view>
    <view class="mainBox">
      <view class="orderBox" v-for="(item, index) in orderList" :key="item.id" @click="toDetaile(item.id)">
        <view class="downTime" v-if="item.order_status == 1">
          <u-count-down :time="item.time * 1000" format="mm:ss"></u-count-down>
        </view>
        <view class="orderNoBox flexJ" v-if="[3, 4, 21].includes(item.order_status)">
          <view class="orderNo">快递单号 {{ item.express_no }}</view>
          <view @click.stop="copy(item.express_no)" class="copy">复制</view>
        </view>
        <!-- 订单商品 -->
        <orderShop :shop="item"></orderShop>
        <view class="orderBtn">
          <!-- 订单状态: 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后 -->
          <!-- 待付款 -->
          <view class="flexA" v-if="item.order_status == 1">
            <view @click.stop="operateOrder(item, 0)" class="cancel flexC">{{ item.goodstatus_text == '' ? '取消付款' : '取消兑换' }}</view>
            <view @click.stop="operateOrder(item, 1)" v-if="item.order_status == 1" class="orange flexC">
              {{ item.goodstatus_text == '' ? '立即支付' : '立即兑换' }}
            </view>
          </view>
          <!-- 代发货 -->
          <view @click.stop="operateOrder(item, 2)" v-if="item.order_status == 2" class="orange flexC">申请退款</view>
          <!-- 待收货 -->
          <view class="flexA" v-if="item.order_status == 3">
            <view v-if="item.order_status == 3 && item.goodstatus_text == ''" class="cancel flexC" @click.stop="true">
              <button open-type="contact"></button>
              联系客服
            </view>
            <view @click.stop="operateOrder(item, 3)" class="orange flexC">确认收货</view>
          </view>
          <!-- 待评价 -->
          <view @click.stop="operateOrder(item, 4)" v-if="item.order_status == 5" class="orange flexC">评价</view>
          <!-- 售后 -->
          <view @click.stop="operateOrder(item, 5)" v-if="item.order_status == 21" class="orange flexC">查看详情</view>
        </view>
      </view>
    </view>
    <!-- 暂无订单 -->
    <view class="null flexV" v-if="!orderList.length">
      <image src="/static/mineIc/orderNull.png" mode=""></image>
      暂无订单
    </view>
    <!-- 选择支付方式 -->
    <payMode @canclePop="modeShow = false" :orderId="orderId" :isOrderPay="true" :totalPrice="orderList.total_price" :modeShow="modeShow"></payMode>
    <!-- 提示弹窗 -->
    <tipPops @pointsBtns="pointsBtns" :integral="integral" :tipType="tipType" :tipShow="tipShow"></tipPops>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import orderShop from '@/componets/orderShop.vue'
import PayMode from '@/componets/checkPayMode.vue'
import tipPops from '@/componets/tipPop.vue'
import { getOrderList, getCancleOrder, getRefund, getReceipt } from '@/api/'
onLoad(e => {
  tabStatus.value = e.status * 1 //tabs当前选中
  // console.log('订单状态', e.status)
})
onShow(() => {
  console.log('订单状态', tabStatus.value)
  getOrderLists(tabStatus.value == 5 ? 21 : tabStatus.value == 4 ? 5 : tabStatus.value * 1)
})
let tabStatus = ref(0) //订单状态
let orderList = ref([]) //订单
const list1 = reactive([{ name: '全部' }, { name: '待付款' }, { name: '待发货' }, { name: '待收货' }, { name: '待评价' }, { name: '售后' }])
// type == 0取消订单 1立即支付 2申请退款 3确认收货 4评价 5查看详情
const operateOrder = (item, type) => {
  orderId.value = item.id
  if (type == 0 || type == 2) {
    tipType.value = type == 0 ? 1 : 2
    tipShow.value = true
  } else if (type == 1) {
    modeShow.value = true
  } else if (type == 3) {
    getReceipts() //确认收货
  } else if (type == 4) {
    uni.navigateTo({
      url: `/pages/mine/evaluate?id=${item.id}`
    })
  } else if (type == 5) {
    toDetaile(item.id)
  }
}
//提示弹窗按钮点击
const pointsBtns = type => {
  console.log(type)
  tipShow.value = false
  if (type == 1) {
    tipType.value == 1 ? getCancleOrders() : getRefunds()
  }
}
let orderId = ref('') //订单id
let integral = ref(0) //积分
let tipType = ref(1) //1取消支付 2取消订单
let modeShow = ref(false) // 选择支付方式弹窗
let tipShow = ref(false) // 提示弹窗
// 跳转订单详情
const toDetaile = id => {
  console.log('订单')
  uni.navigateTo({
    url: `/pages/mine/orderDetail?id=${id}`
  })
}
// 复制订单号
const copy = text => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'none' })
    }
  })
}
// tabs切换
const click = e => {
  console.log(e)
  getOrderLists(e.index == 5 ? 21 : e.index == 4 ? 5 : e.index)
}
// 订单状态: 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后
const getOrderLists = async status => {
  try {
    const res = await getOrderList(status)
    orderList.value = res
    console.log('getOrderList', res)
    // 保存数据
  } catch (err) {
    uni.showToast({
      title: err,
      icon: 'none'
    })
    console.log('getOrderList', err)
  }
}
// 取消订单
const getCancleOrders = async () => {
  try {
    const res = await getCancleOrder(orderId.value)
    uni.showToast({ title: '订单已取消~', icon: 'none' })
    tipShow.value = false
    tabStatus.value = 0
    getOrderLists(0)
    console.log('getCancleOrder', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getCancleOrder', err)
  }
}
// 退款
const getRefunds = async () => {
  try {
    const res = await getRefund(orderId.value)
    uni.showToast({ title: '已申请,等待客服审核', icon: 'none' })
    getOrderLists(2)
    console.log('getRefund', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getRefund', err)
  }
}
// 确认收货
const getReceipts = async () => {
  try {
    const res = await getReceipt(orderId.value)
    uni.showToast({ title: '已收货,期待下次下单~', icon: 'none' })
    getOrderLists(3)
    console.log('getReceipt', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getReceipt', err)
  }
}
</script>

<style lang="scss">
page {
  background: #f8fafb;
}

.tabs {
  width: 100%;
  height: 88rpx;
  background: #fff;
}

.mainBox {
  width: 100%;
  padding: 24rpx 32rpx;
  box-sizing: border-box;

  .orderBox {
    width: 100%;
    padding: 28rpx 8rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    background: #ffffffff;
    margin-bottom: 16rpx;

    .downTime {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12rpx;

      .u-count-down__text {
        color: #fc4338ff;
        font-size: 24rpx;
      }
    }

    .orderNoBox {
      margin-bottom: 20rpx;

      :nth-child(1n) {
        color: #757d8cff;
        font-size: 24rpx;
      }
    }

    .orderBtn {
      display: flex;
      justify-content: flex-end;

      .cancel {
        position: relative;
        margin-right: 20rpx;
        width: 194rpx;
        height: 60rpx;
        border-radius: 6rpx;
        background: #f7f8faff;
        color: #000000e6;
        font-size: 24rpx;

        button {
          position: absolute;
          background: transparent;
          width: 100%;
          height: 100%;
          color: #000000e6;
          font-size: 24rpx;
          border: none !important;
          padding: 0 !important;
          line-height: 28rpx;

          &::after {
            border: none;
          }
        }
      }

      .orange {
        border-radius: 6rpx;
        width: 194rpx;
        height: 60rpx;
        color: #ffffffff;
        font-size: 24rpx;
        background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
      }
    }
  }
}

.null {
  margin: 266rpx auto 0;
  color: #969799ff;
  font-size: 28rpx;

  image {
    margin-bottom: 16rpx;
    width: 192rpx;
    height: 192rpx;
  }
}
</style>