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

<script setup>
import { computed } from 'vue'

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
    },
    width: {
        type: [Number, String],
        default: 'auto'
    },
    height: {
        type: [Number, String],
        default: 88
    },
    itemStyle: {
        type: [String, Object],
        default: () => {}
    },
    current: {
        type: [Number, String],
        default: 0
    },
    keyName: {
        type: String,
        default: 'name'
    },
    scrollable: {
        type: Boolean,
        default: true
    }
})

const getItemStyle = computed(() => {
    return {
        boxSizing: 'border-box',
        ...ps.itemStyle,
        width: typeof ps.width == 'number' ? ps.width + 'rpx' : ps.width,
        height: typeof ps.height == 'number' ? ps.height + 'rpx' : ps.height
    }
})
const handleClick = (item, index) => {
    es('handleClick', item, index)
}
const handleChange = (tabItem) => {
    es('handleChange', tabItem)
}
</script>
<style lang="scss" scoped></style>
