<template>
    <tabs
        :current="setTabIndex"
        v-bind="tabStyle"
        :is-scroll="false"
        :auth="true"
        @change="handleChangeTab"
    >
        <tab v-for="(item, i) in optionMap.couponStatus" :key="i" :name="item.name" />
        <view class="List">
            <list />
        </view>
        <view class="header-box">
            <button class="header-btn" @click.stop="handleNavigateCouponCenter">
                <u-icon name="coupon" size="36" color="text-content" class="mr-2"></u-icon>
                获取更多好券 >
            </button>
        </view>
    </tabs>
</template>

<script lang="ts" setup>
import { provide, computed } from 'vue'
import list from './components/list.vue'
import { useTabs } from '@/hooks/useCoupon'
import { COUPON_INJECTION_KEY } from '@/config/symbol'
import { optionMap } from '@/config'
import { router } from '@/utils/util'

const { tabStatus, setTabIndex, handleChangeTab } = useTabs()

const tabStyle = computed(() => {
    return {
        height: 80,
        barWidth: 60,
        bgColor: '#06a9ff',
        inactiveColor: '#fff',
        activeColor: '#fff'
    }
})

/**点击获取更多好券跳转 */
const handleNavigateCouponCenter = () => {
    router('/bundle/pages/coupon/index')
}

provide(COUPON_INJECTION_KEY, {
    tabStatus
})
</script>

<style lang="scss" scoped>
.List {
    position: relative;
    height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
    padding-bottom: 15rpx;
    padding-top: 100rpx;
}

.header-box {
    position: absolute;
    z-index: 999;
    top: 80rpx;
    left: 0;
    right: 0;
    background: $white;
    padding: 20rpx 20rpx 0;

    .header-btn {
        @apply bg-[#FAE8E7] text-lg text-[#D83D3B] leading-[82rpx] h-[82rpx] rounded-xl font-bold flex justify-center;
    }
}
</style>
