<template>
    <view class="main">
        <tabs
            :current="current"
            height="80"
            bar-width="60"
            :auth="true"
            bgColor="#fff"
            activeColor="#F36161"
            inactiveColor="#666"
            :itemWidth="150"
            :is-scroll="false"
            @change="onChange"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name" />
        </tabs>
        <view class="list pt-[20rpx]">
            <list :status="status" :index="current" />
        </view>
    </view>
</template>

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

const tabList = ref<any>([
    {
        name: '全部',
        status: ''
    },
    {
        name: '收入',
        status: 1
    },
    {
        name: '支出',
        status: 0
    }
])
const current = ref<number>(0)
const status = ref<number | string>()
const onChange = (index: number) => {
    current.value = index
    status.value = tabList.value[index].status
}
</script>

<style lang="scss" scoped>
.list {
    height: calc(100vh - 44px - env(safe-area-inset-bottom));
}
</style>
