<!-- 添加协作 -->
<template>
    <div class="main_nav flex">
        <template v-for="(item, index) in navList" v-key="item">
            <div v-if="item.show" :class="['item', item.value == navValue ? 'on' : '']" @click="changeTab(item.value)">
                <span>{{ item.label }}</span>
                <i></i>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">

const emit = defineEmits(['change'])

// 10:客户、11线索、20:联系人、30:商机、40:订单、50:回款、60:退款、70:费用、80:任务、90:跟进、100:工单（对应ResourceTypeEnum）
const props = defineProps({
    navList: {
        type: Array as PropType<{ value: string, show: boolean, label: string }[]>,
        required: true
    }
})
const resetNavList = () => {
    navValue.value = props?.navList[0]?.value
    emit('change', props?.navList[0]?.value)
}
const navValue = ref<string>('')

const changeTab = (value: string) => {
    navValue.value = value
    emit('change', value)
}
onMounted(() => {
    if(props.navList && props.navList.length > 0) {
        navValue.value = props?.navList[0]?.value
    }
})
defineExpose({
    resetNavList
})
</script>

<style lang="scss" scoped>
.tips {
    padding-left: 120px;
    margin-bottom: 2px;
}
</style>
