<template>
    <view class="workbench">
        <!-- 123456 -->
        <up-sticky>
            <u-tabs :list="tabsList" :activeStyle="{ color: '#2B69F8' }" lineWidth="30" :current="current" @click="switchTab"></u-tabs>
        </up-sticky>
        <CustomerManage v-if="current === 0"/>
        <ProjectManage v-if="current === 1"/>
        <ServiceProviderManage v-if="current === 2"/>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomerManage from './customer-manage/index.vue'
import ProjectManage from './project-manage/index.vue'
import ServiceProviderManage from './service-provider-manage/index.vue'
/* tab */
const current = ref(0);

const tabsList = [
    {
        name: '客户管理',
        value: 0,
    },
    {
        name: '项目管理',
        value: 1,
    },
    {
        name: '服务商管理',
        value: 2,
    },
];
function switchTab(item) {
    const {index,name,value} =item
    current.value = index
}
/* 状态栏高度 */
const statusBarHeight = ref(0)

onLoad(() => {
    statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight + 'px'
    console.log(statusBarHeight.value);
})

</script>
<style lang="scss" scoped>
.workbench {
    background-color: #F4F5F9;
    margin-top: v-bind(statusBarHeight);
    padding: 0 16rpx;

}
</style>