<template>
    <tabs
        :current="current"
        height="80"
        bar-width="60"
        :auth="true"
        activeColor="#F36161"
        inactiveColor="#666"
        :is-scroll="false"
        @change="(e) => (current = e)"
    >
        <tab v-for="(item, i) in tabList" :key="i" :name="item.name" />
        <view class="List px-[30rpx]">
            <list :status="current + 1" />
        </view>

        <view class="footer-box">
            <button class="footer-btn" @click.stop="toReceiveCoupon">获取更多好券 ></button>
        </view>
    </tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import list from './components/list.vue'

const tabList = ref<any>([
    {
        name: '未使用',
        status: 1
    },
    {
        name: '已使用',
        status: 2
    },
    {
        name: '已过期',
        status: 3
    }
])
const current = ref(0)

const toReceiveCoupon = () => {
    uni.navigateTo({
        url: '/bundle/pages/receive_coupon/receive_coupon'
    })
}
</script>
<style lang="scss" scoped>
.List {
    position: relative;
    height: calc(100vh - 44px - env(safe-area-inset-bottom));
    padding-bottom: 100rpx;
}

.footer-box {
    position: absolute;
    z-index: 999;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    background: #fff;
    padding: 10rpx 20rpx;
    .footer-btn {
        @apply bg-primary text-lg text-white leading-[82rpx] h-[82rpx] rounded-full;
    }
}
</style>
