<!--
 * @Date: 2025-03-21
 * @Description: 我的订单页面
-->
<template>
  <AppLayout title="我的订单">
    <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen">
      <!-- 状态筛选 -->
      <div class="px-4 py-3">
        <div
          class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm"
          @click="showStatusPicker = true"
        >
          <span class="text-gray-600">订单状态</span>
          <div class="flex items-center text-gray-500">
            <span>{{ selectedStatusText }}</span>
            <van-icon name="arrow" class="ml-1" />
          </div>
        </div>
      </div>

      <van-popup
        v-model:show="showStatusPicker"
        position="bottom"
        round
      >
        <van-picker
          :columns="statusColumns"
          @confirm="onStatusConfirm"
          @cancel="showStatusPicker = false"
          :default-index="currentStatusIndex"
          show-toolbar
          title="选择订单状态"
        />
      </van-popup>

      <!-- 订单列表 -->
      <van-list
        v-if="orders.length"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="px-4 py-3 space-y-4"
      >
        <FrostedGlass
          v-for="order in orders"
          :key="order.id"
          class="p-4 rounded-xl"
        >
          <div class="flex items-center justify-between mb-3">
            <span class="text-sm text-gray-500">订单号：{{ order.id }}</span>
            <span :class="['text-sm', statusMap[order.status]['color']]">{{ statusMap[order.status]['text'] }}</span>
          </div>

          <div v-for="(detail, idx) in order.details" :key="index" class="flex items-start space-x-4 mb-3">
            <img :src="detail.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" class="w-20 h-20 object-cover rounded-lg flex-shrink-0" :alt="detail.product_name">
            <div class="flex-1 min-w-0">
              <h3 class="text-base font-medium mb-1 truncate">{{ detail.product_name }}</h3>
              <p class="text-sm text-gray-500 mb-1">{{ order.note }}</p>
              <p class="text-sm text-gray-500">{{ order.pay_date && formatDate(order.pay_date) }}</p>
              <p class="text-sm text-gray-500">¥{{ detail.price }} x {{ detail.number }} 份</p>
              <van-tag :color="approvalStatusMap[order.approval_status]['color']">{{ approvalStatusMap[order.approval_status]['text'] }}</van-tag>
            </div>
          </div>

          <div class="flex justify-between items-center pt-3 border-t border-gray-100">
            <div class="text-base font-medium text-green-600">¥{{ order.total_price }}</div>
            <div class="space-x-2">
              <button
                v-if="order.status === 'NOT_PAY'"
                class="px-4 py-1.5 text-sm text-white bg-green-600 rounded-full"
                @click="handlePay(order)"
              >
                立即支付
              </button>
              <button
                v-if="order.status === 'NOT_PAY'"
                class="px-4 py-1.5 text-sm text-gray-600 bg-gray-100 rounded-full"
                @click="handleCancel(order)"
              >
                取消支付
              </button>
              <button
                v-if="order.status === 'PAY'"
                class="px-4 py-1.5 text-sm text-gray-600 bg-gray-100 rounded-full"
                @click="handleViewDetail(order)"
              >
                查看详情
              </button>
            </div>
          </div>
          <div v-if="order.status === 'NOT_PAY' && order.countdown" class="text-right mt-4">
            <span class="text-red-500 text-sm font-medium">支付倒计时：{{ order.countdown }}</span>
          </div>
        </FrostedGlass>
      </van-list>

      <!-- 无数据提示 -->
      <div v-else class="flex flex-col items-center justify-center py-12">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <p class="mt-4 text-gray-500">暂无订单记录</p>
      </div>
    </div>
    <!-- 订单详情弹窗 -->
    <van-dialog
      v-model:show="showDetailDialog"
      title="订单详情"
      :show-cancel-button="false"
      confirm-button-text="确定"
      class="rounded-lg"
      confirm-button-color="#4caf50"
    >
      <div v-if="orderDetail" class="p-4 space-y-3">
        <div class="flex justify-between items-center">
          <span class="text-gray-500">订单号</span>
          <span class="font-medium">{{ orderDetail.id }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-500">订单状态</span>
          <span :class="['font-medium', statusMap[orderDetail.status].color]">{{ statusMap[orderDetail.status].text }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-500">支付方式</span>
          <span class="font-medium">{{ orderDetail.pay_type === 'Alipay' ? '支付宝' : '微信' }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-500">支付时间</span>
          <span class="font-medium">{{ orderDetail.pay_date && formatDate(orderDetail.pay_date) }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-500">订单金额</span>
          <span class="font-medium text-green-600">¥{{ orderDetail.total_price }}</span>
        </div>
        <div class="border-t border-gray-100 pt-3 mt-3">
          <div class="text-gray-500 mb-2">收货信息</div>
          <div class="space-y-2">
            <div class="flex justify-between items-center">
              <span class="text-gray-500">姓名</span>
              <span class="font-medium">{{ orderDetail.receive_name }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">手机</span>
              <span class="font-medium">{{ orderDetail.receive_phone }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">邮箱</span>
              <span class="font-medium">{{ orderDetail.receive_email }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">地址</span>
              <span class="font-medium">{{ orderDetail.receive_address }}</span>
            </div>
          </div>
        </div>
        <div v-if="orderDetail.note" class="border-t border-gray-100 pt-3">
          <div class="text-gray-500 mb-2">备注</div>
          <div class="text-sm">{{ orderDetail.note }}</div>
        </div>
      </div>
    </van-dialog>

    <!-- 支付弹窗 -->
    <van-popup
      v-model:show="showPaymentPopup"
      position="bottom"
      round
      :style="{ height: '50%' }"
    >
      <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
        <WechatPayment
          v-if="showPaymentPopup && currentOrder"
          :order-id="currentOrder.id"
          :order-status="currentOrder.status"
          @success="handlePaymentSuccess"
          @failed="handlePaymentFailed"
          @processing="handlePaymentProcessing"
        >
          <template #failed-action>
            <button
              @click="showPaymentPopup = false"
              class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
            >
              关闭
            </button>
          </template>
        </WechatPayment>
      </div>
    </van-popup>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import WechatPayment from '@/components/payment/WechatPayment.vue'
import { useTitle } from '@vueuse/core';
import { showConfirmDialog, showToast, Dialog } from 'vant';
import { formatDate } from '@/utils/tools';

// 导入接口
import { getOrderListAPI, cancelOrderAPI, getOrderInfoAPI } from "@/api/order";

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const router = useRouter()

const loading = ref(false)
const finished = ref(false)
const limit = ref(10)
const page = ref(0)
const orders = ref([])
const showDetailDialog = ref(false)
const orderDetail = ref(null)
// 订单状态映射
const statusMap = {
  NOT_PAY: { text: '待支付', color: 'text-orange-500' },
  PAY: { text: '已支付', color: 'text-green-500' },
  CANCEL: { text: '已取消', color: 'text-gray-500' },
  APPLY_REFUND: { text: '申请退款', color: 'text-red-500' },
  REFUND: { text: '已退款', color: 'text-red-500' },
  REFUND_ERROR: { text: '退款失败', color: 'text-red-500' },
}

// 订单审批状态映射
const approvalStatusMap = {
  APPLY: { text: '待审批', color: '#1989f1' },
  ENABLE: { text: '审批通过', color: '#07c160' },
  DISABLE: { text: '审批不通过', color: '#ff976a' },
  null: { text: '未审批', color: '#909399' },
}

// 初始化加载订单列表
// 加载更多
// 状态筛选相关
const showStatusPicker = ref(false)
const selectedStatus = ref('')
const selectedStatusText = ref('全部')

// 构建状态选项
const statusColumns = [
  { text: '全部', value: '' },
  ...Object.entries(statusMap).map(([key, value]) => ({
    text: value.text,
    value: key
  }))
]

// 获取当前状态在选项中的索引
const currentStatusIndex = computed(() => {
  return statusColumns.findIndex(item => item.value === selectedStatus.value)
})

// 状态选择确认
const onStatusConfirm = ({ selectedValues, selectedOptions }) => {
  selectedStatus.value = selectedValues[0]
  selectedStatusText.value = selectedOptions[0].text
  showStatusPicker.value = false
  // 重置分页参数
  page.value = 0
  orders.value = []
  finished.value = false
  // 重新加载数据
  onLoad()
}

// 修改加载更多函数
const onLoad = async () => {
  const nextPage = page.value;
  const res = await getOrderListAPI({
    limit: limit.value,
    page: nextPage,
    status: selectedStatus.value
  });
  if (res.code) {
    // 待支付订单倒计时
    res.data.forEach(order => {
      if (order.status === 'NOT_PAY') {
        startCountdown(order);
      }
    })
    orders.value = [...orders.value, ...res.data];
    finished.value = res.data.length < limit.value;
    page.value = nextPage + 1;
  }
  loading.value = false;
};

// 支付订单
// 支付相关状态
const showPaymentPopup = ref(false)
const currentOrder = ref(null)

// 处理支付
const handlePay = (order) => {
  currentOrder.value = order
  showPaymentPopup.value = true
}

// 处理支付成功
const handlePaymentSuccess = () => {
  showPaymentPopup.value = false
  showToast('支付成功')
  // 刷新订单列表
  page.value = 0
  orders.value = []
  finished.value = false
  onLoad()
}

// 处理支付失败
const handlePaymentFailed = (error) => {
  // showToast(error || '支付失败')
}

// 处理支付处理中
const handlePaymentProcessing = () => {
  showToast('支付处理中...')
}

// 查看订单详情
const handleViewDetail = async (order) => {
  try {
    const { code, data } = await getOrderInfoAPI({ i: order.id });
    if (code) {
      orderDetail.value = data;
      showDetailDialog.value = true;
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    showToast('获取订单详情失败');
  }
};

// 取消订单
const handleCancel = async (order) => {
  showConfirmDialog({
    title: '温馨提示',
    message: '您是否确定要取消该订单？',
    confirmButtonColor: '#4caf50',
    })
      .then(async() => {
        try {
          const { code } = await cancelOrderAPI({ i: order.id });
          if (code) {
            const index = orders.value.findIndex((item) => item.id === order.id);
            // 更新订单状态为已取消
            orders.value[index].status = 'CANCEL';
            orders.value[index].statusText = '已取消';
            orders.value[index].statusColor = 'text-gray-500';
            // 显示提示信息
            showToast('订单已取消');
          }
        } catch (error) {
          console.error('取消订单失败:', error);
        }
      })
      .catch(() => {
        // on cancel
      });
};

/**
 * 待支付订单的支付倒计时功能
 * @param {Object} order - 订单对象
 */
const startCountdown = (order) => {
  // 清除可能存在的旧定时器
  if (order._countdownTimer) {
    clearInterval(order._countdownTimer);
    order._countdownTimer = null;
  }

  // 计算剩余时间（毫秒）
  const current_date = new Date(order.server_time);
  const end_date = new Date(order.pay_deadline_time);
  let time_left = end_date - current_date;

  // 检查是否已过期
  if (time_left <= 0) {
    // 使用Vue的响应式API更新对象属性
    order.status = 'CANCEL';
    order.statusText = '已取消';
    order.statusColor = 'text-gray-500';
    order.countdown = '';
    // 强制触发视图更新
    orders.value = [...orders.value];
    return;
  }

  // 更新倒计时显示
  const updateCountdown = () => {
    // 计算时、分、秒
    const hours = Math.floor(time_left / 3600000);
    const minutes = Math.floor((time_left % 3600000) / 60000);
    const seconds = Math.floor((time_left % 60000) / 1000);

    // 格式化显示
    order.countdown = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    // 强制触发视图更新
    orders.value = [...orders.value];

    // 减少剩余时间
    time_left -= 1000;

    // 检查是否已到期
    if (time_left < 0) {
      clearInterval(order._countdownTimer);
      order._countdownTimer = null;

      order.status = 'CANCEL';
      order.statusText = '已取消';
      order.statusColor = 'text-gray-500';
      order.countdown = '';

      // 强制触发视图更新
      orders.value = [...orders.value];
    }
  };

  // 立即执行一次更新
  updateCountdown();

  // 设置定时器，每秒更新一次
  order._countdownTimer = setInterval(updateCountdown, 1000);

  // 组件卸载时清除定时器
  onUnmounted(() => {
    if (order._countdownTimer) {
      clearInterval(order._countdownTimer);
      order._countdownTimer = null;
    }
  });
};
</script>