<template>
  <view class="page-shell success-page">
    <PageHero title="提交成功" subtitle="订单已提交，可前往订单详情继续查看" badge="订单已创建" />

    <view class="surface-card success-page__card">
      <text class="success-page__icon">✓</text>
      <text class="section-title">订单已提交</text>
      <text class="section-subtitle">订单号：{{ orderNo || '-' }}</text>
      <view class="success-page__actions">
        <NutButton type="primary" block @click="goOrderDetail">查看订单</NutButton>
        <NutButton block plain @click="goOrders">订单列表</NutButton>
        <NutButton block plain @click="goMenu">继续点餐</NutButton>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { Button as NutButton } from '@nutui/nutui-taro'
import PageHero from '@/components/page-hero/index.vue'
import { useTradeSuccessPage } from './composables/useTradeSuccessPage'

const { goMenu, goOrderDetail, goOrders, orderNo } = useTradeSuccessPage()
</script>

<style lang="scss">
@use './styles/index.scss';
</style>

