<template>
    <up-tabs
        :list="list"
        :lineColor="lineColor"
        :activeStyle="activeStyle"
        :inactiveStyle="inactiveStyle"
        :lineWidth="lineWidth"
        :lineHeight="lineHeight"
        :itemStyle="itemStyle"
        :current="current"
        :keyName="keyName"
        @click="handleClick"
        @change="handleChange"
    >
        <template #right>
            <slot name="right"></slot>
        </template>
    </up-tabs>
</template>

<script setup>
const es = defineEmits(['handleClick', 'handleChange'])
const ps = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    lineColor: {
        type: String,
        default: '#165dff'
    },
    activeStyle: {
        type: [String, Object],
        default: () => {
            return {
                color: '#165dff'
            }
        }
    },
    inactiveStyle: {
        type: [String, Object],
        default: () => {
            return {
                color: '#000000'
            }
        }
    },
    lineWidth: {
        type: [Number, String],
        default: 20
    },
    lineHeight: {
        type: [Number, String],
        default: 3
    },
    itemStyle: {
        type: [String, Object],
        default: () => {
            return { height: '88rpx' }
        }
    },
    current: {
        type: [Number, String],
        default: 0
    },
    keyName: {
        type: String,
        default: 'name'
    }
})

const handleClick = (item, index) => {
    es('handleClick', item, index)
}
const handleChange = (tabItem) => {
    es('handleChange', tabItem)
}
</script>
<style lang="scss" scoped></style>
