<script setup lang="ts">
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const tab = ref<number>(0)
const tabsList = ref(['全部', '成功', '失败'])
</script>

<template>
  <view class="video-rights-order-page">
    <wd-navbar
      title="订单" custom-style="background-color:#FFF" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <wd-tabs v-model="tab" animated>
      <block v-for="item in tabsList" :key="item">
        <wd-tab :title="item">
          <view class="box-border bg-#f6f6f6 px24rpx">
            <view class="h-28rpx" />
            <view class="rounded-16rpx bg-#FFF p-24rpx">
              <view class="flex items-center justify-between">
                <view class="text-28rpx">
                  2024-12-13 11：12：30
                </view>
                <view class="text-28rpx font-bold">
                  充值成功
                </view>
              </view>
              <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
              <view class="mt-24rpx flex items-center justify-between">
                <view class="flex items-center gap-20rpx">
                  <view class="h-160rpx w-160rpx">
                    image
                  </view>
                  <view>
                    <view class="text-32rpx font-bold">
                      网易云黑胶VIP月卡
                    </view>
                    <view class="mt-16rpx text-#FF4D3A">
                      <text class="text-22rpx font-500">
                        ￥
                      </text>
                      <text class="text-36rpx font-800">
                        18
                      </text>
                    </view>
                    <view class="mt-16rpx text-24rpx">
                      XN123458625484359845
                    </view>
                  </view>
                </view>
                <wd-icon name="chevron-right" size="22px" color="#222222" />
              </view>
            </view>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

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