<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%myOrders.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getConfigByCode } from '@/api/common'
import { orderList, orderStatusEnum, recycleOrder, userCanRecycleNum } from '@/api/order'
import { DialogBox } from '@/components/DialogBox'
import { t } from '@/locale'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'
import { toast } from '@/utils/toast'

defineOptions({
  name: 'MyOrders', // 我的订单
})

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)
const isPageLoading = ref(true) // 页面加载状态
const systemInfo = ref(uni.getSystemInfoSync()) // 获取系统信息
const tab = ref<number>(0)
const tabList = ref<any>([
  {
    label: 'myOrders.tab.all',
    value: 0,
  },
  {
    label: 'myOrders.tab.toPay',
    value: 1,
  },
  {
    label: 'myOrders.tab.success',
    value: 2,
  },
  {
    label: 'myOrders.tab.failed',
    value: 3,
  },
  {
    label: 'myOrders.tab.reward',
    value: 4,
  },
])

// 搜索结果
const dataList = ref<any[]>([])

const maxSelectCount = ref<number>(0) // 最大可选订单数量
const selectedOrders = ref<string[]>([]) // 已选中的订单ID列表

const recycleProportion = ref<string>('')
const recycleRate = ref<number>(0)

async function getRecycleProportion() {
  try {
    const res = await getConfigByCode({ code: 'recycle_proportion' })
    if (res.code === '200' && res.data?.valueInfo) {
      let rate = Number(res.data.valueInfo) || 0
      if (rate > 1)
        rate = rate / 100
      recycleRate.value = rate
      recycleProportion.value = String(rate * 100)
    }
  }
  catch {
  }
}

async function getUserCanRecycleNum() {
  try {
    const res = await userCanRecycleNum()
    if (res.code === '200') {
      maxSelectCount.value = Number(res.data) || 0
    }
  }
  catch {
  }
}
const orderStatusEnumData = ref<any>([])
async function getOrderStatus() {
  try {
    const res = await orderStatusEnum({ id: 1 })
    if (res.code === '200') {
      orderStatusEnumData.value = res.data
    }
  }
  catch {

  }
}

// 判断订单是否已选中
function isOrderSelected(orderId: string) {
  return selectedOrders.value.includes(orderId)
}

// 判断订单是否可以勾选（未选中且未达到上限，或已选中）
function canSelectOrder(orderId: string) {
  return isOrderSelected(orderId) || selectedOrders.value.length < maxSelectCount.value
}

// 切换订单选中状态
function toggleOrderSelection(orderId: string) {
  const index = selectedOrders.value.indexOf(orderId)
  if (index > -1) {
    // 已选中，取消选中
    selectedOrders.value.splice(index, 1)
  }
  else if (selectedOrders.value.length < maxSelectCount.value) {
    // 未选中且未达到上限，添加选中
    selectedOrders.value.push(orderId)
  }
}

// 切换tab时清空选中状态
function handleTabChange() {
  selectedOrders.value = []
  getUserCanRecycleNum()
  queryList(1, 20)
}

// 计算选中订单的总金额
const totalAmount = computed(() => {
  if (selectedOrders.value.length === 0)
    return 0
  return dataList.value
    .filter(item => selectedOrders.value.includes(item.orderId))
    .reduce((sum, item) => {
      const price = Number(item?.orderInfoVO?.[0]?.price) || 0
      const quantity = Number(item?.orderInfoVO?.[0]?.payNum) || 0
      return sum + (price * quantity)
    }, 0)
})

const recycleAmount = computed(() => {
  return totalAmount.value * recycleRate.value
})

// 弹框状态
const showRecycleDialog = ref(false)

// 点击 Recycle Order 按钮，显示二次确认弹框
function handleRecycleOrder() {
  showRecycleDialog.value = true
}

// 确认回收订单
async function confirmRecycle() {
  try {
    if (selectedOrders.value.length === 0) {
      toast.info(t('myOrders.selectTip', [maxSelectCount.value]))
      return
    }

    uni.showLoading({
      title: t('common.loading'),
      mask: true,
    })

    const res = await recycleOrder({ orderNos: selectedOrders.value })
    if (res.code === '200') {
      toast.success(t('myOrders.recycleSuccess'))
    }
    selectedOrders.value = []
    // 刷新列表
    paging.value?.reload()
    getUserCanRecycleNum()
  }
  catch (error) {
    console.error('回收订单失败:', error)
    toast.error(t('myOrders.recycleFailed'))
  }
  finally {
    uni.hideLoading()
  }
}
async function queryList(pageNo: number, pageSize: number) {
  // 此处请求仅为演示，请替换为自己项目中的请求
  try {
    // 第一页加载时显示骨架屏
    if (pageNo === 1) {
      isPageLoading.value = true
    }

    const res = await orderList({
      page: pageNo,
      size: pageSize,
      type: tab.value, // 根据tab的值来查询不同状态的订单
    })
    paging.value.complete(res.data.list)
    if (pageNo === 1) {
      getUserCanRecycleNum()
    }
  }
  catch {
    paging.value.complete(false)
  }
  finally {
    // 第一页加载完成后隐藏骨架屏
    if (pageNo === 1) {
      isPageLoading.value = false
    }
  }
}
onLoad((options) => {
  getOrderStatus()
  getUserCanRecycleNum()
  getRecycleProportion()

  // 处理页面参数，如果有type参数则切换到对应的tab
  if (options) {
    if (options.type !== undefined) {
      // 确保type值在有效范围内
      const typeValue = Number(options.type)
      if (typeValue >= 0 && typeValue <= 4) {
        tab.value = typeValue
      }
    }
  }
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
    <template #top>
      <wd-tabs v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always" @click="handleTabChange">
        <wd-tab v-for="tabItem in tabList" :key="tabItem.value" :title="t(tabItem.label)" :name="tabItem.value" />
      </wd-tabs>
    </template>

    <!-- 页面加载时显示骨架屏 -->
    <template v-if="isPageLoading">
      <view class="pt-24rpx">
        <!-- 订单卡片骨架屏 -->
        <wd-card v-for="i in 3" :key="i" type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!">
          <template #title>
            <!-- 订单头部：订单号 + 状态 -->
            <wd-skeleton
              :row-col="[
                [{ width: '250rpx', height: '28rpx' }, { width: '60rpx', height: '26rpx', marginLeft: 'auto' }],
              ]"
              animation="gradient"
            />
          </template>
          <!-- 商品区域：图片 + 信息 -->
          <wd-skeleton
            :row-col="[
              [
                { width: '140rpx', height: '140rpx', type: 'rect' },
                [
                  { width: '100%', height: '40rpx' }, // 商品标题第一行
                  { width: '80%', height: '40rpx', marginTop: '8rpx' }, // 商品标题第二行
                  { width: '120rpx', height: '24rpx', marginTop: '4rpx' }, // 颜色规格
                  [{ width: '100rpx', height: '24rpx' }, { width: '80rpx', height: '24rpx', marginLeft: 'auto' }], // 价格和数量
                ],
              ],
            ]"
            animation="gradient"
          />
        </wd-card>
      </view>
    </template>

    <!-- 实际内容 -->
    <template v-else>
      <!-- Success tab 选择提示 -->
      <view v-if="tab === 2" class="pt-24rpx text-center font-bold">
        {{ t('myOrders.selectTip', [maxSelectCount]) }}
      </view>
      <view class="pt-24rpx">
        <wd-card v-for="item in dataList" :key="item.orderId" type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!" @click="toPage({ url: '/pages/myOrders/orderDetail', params: { orderNo: item?.orderId } })">
          <template #title>
            <view class="flex items-center justify-between">
              <view class="flex items-center text-28rpx text-#000">
                <!-- 仅在 success tab (tab=2) 时显示勾选框 -->
                <wd-checkbox
                  v-if="tab === 2"
                  :model-value="isOrderSelected(item.orderId)"
                  :disabled="!canSelectOrder(item.orderId)"
                  custom-class="mr-16rpx"
                  @click.stop="toggleOrderSelection(item.orderId)"
                />
                <view>
                  {{ t('myOrders.order.id') }}：{{ item.orderId }}
                </view>
              </view>
              <wd-text size="26rpx" type="primary" :text="orderStatusEnumData.find((i:any) => i.code === item.status)?.name" />
            </view>
          </template>
          <view class="flex items-center justify-center gap-24rpx">
            <view class="h-140rpx w-140rpx shrink-0 text-center">
              <image
                :src="item?.orderInfoVO?.[0]?.image"
                class="h-full w-full"
                mode="aspectFit"
              />
            </view>
            <view class="flex-1">
              <view class="line-clamp-2 h-80rpx break-all text-28rpx text-#000">
                {{ item?.orderInfoVO?.[0]?.productName }}
              </view>
              <view>
                <view class="py-4rpx text-24rpx text-#3A444C">
                  {{ t('myOrders.order.color') }}： {{ item?.orderInfoVO?.[0]?.sku }}
                </view>
                <view class="flex items-center justify-between text-24rpx text-#3A444C">
                  <view>
                    ৳ {{ formatNumber(item?.orderInfoVO?.[0]?.price) }}
                  </view>
                  <view>
                    {{ t('myOrders.order.quantity') }}：{{ item?.orderInfoVO?.[0]?.payNum }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </wd-card>
      </view>
    </template>

    <!-- 底部提交信息块 -->
    <template #bottom>
      <view
        v-if="tab === 2 && selectedOrders.length > 0"
        class="flex items-center justify-end bg-white px-24rpx pt-30rpx shadow-[0_-2rpx_8rpx_0_rgba(0,0,0,0.1)]"
        :style="{ paddingBottom: `${systemInfo.safeAreaInsets?.bottom + 30 || 30}rpx` }"
      >
        <view>
          <text>
            {{ $t('myOrders.total') }}:
          </text>
          <text class="text-[var(--wot-color-theme)]">
            ৳{{ formatNumber(recycleAmount) }}
          </text>
        </view>
        <wd-button
          custom-class="ml-16rpx! min-w-260rpx! bg-[var(--wot-color-theme)]"
          @click="handleRecycleOrder"
        >
          {{ $t('myOrders.recycleOrder') }}
        </wd-button>
      </view>
    </template>
  </z-paging>

  <!-- 回收订单确认弹框 -->
  <DialogBox
    v-model:show="showRecycleDialog"
    :show-cancel="false"
    :confirm-text="$t('myOrders.dialog.confirm')"
    @confirm="confirmRecycle"
  >
    <view class="text-left">
      <view class="pb-24rpx text-center text-32rpx font-bold">
        {{ $t('myOrders.dialog.title') }}
      </view>
      <view class="pb-24rpx text-24rpx font-bold">
        {{ $t('myOrders.dialog.notesTitle') }}
      </view>
      <view class="pb-32rpx text-24rpx text-#666">
        <view class="space-y-16rpx">
          <view>{{ $t('myOrders.dialog.note1') }}</view>
          <view>{{ $t('myOrders.dialog.note2', [recycleProportion]) }}</view>
          <view>{{ $t('myOrders.dialog.note3') }}</view>
        </view>
      </view>
      <view class="mb-44rpx text-center">
        <text>{{ $t('myOrders.dialog.priceLabel') }}: </text>
        <text class="text-[var(--wot-color-theme)]">
          ৳{{ formatNumber(recycleAmount) }}
        </text>
      </view>
    </view>
  </DialogBox>
</template>

<style lang="scss" scoped>
//
</style>
