<template>
    <div class="navBox">
        <ul
        :class="['nav',isFixed?'isFixed':'']">
            <li
                v-for="(item,index) in navTab"
                :key="index"
                :class="active == (index) ? 'navactive' : '' "
                @click="switchtab(index, item)">
                <div class="tab_body">
                    <span class="tab_title" >{{ $util.isEmpty(item)?'' : item.text }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
	name: 'AppHeaderNav',
	props: {
		navTab: {
			type: Array,
			default: () => []
		},
		value: {
			type: [Number, String],
			default: 0
		},
		isFixed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			active: 0
		}
	},
	created() {
		this.active = +this.value
	},
	methods: {
		switchtab(index, selector) {
			this.active = index
			this.$emit('sliderClick', {
				...selector,
				idx: index
			})
		}
	},
	watch: {
		value(val) {
			this.active = val
			this.$emit('input', val)
		},
		active(val) {
			this.$emit('input', val)
		}
	}
}
</script>

<style lang="scss" scoped>
	 .navBox {
		  height: 90px;
		  width: 100%;
          box-sizing: border-box;
            background: #FFFFFF;
            position: relative;
	 }
     .nav {
            height: 90px;
            width: 100%;
            position: fixed;
            z-index: 9;
            background: #FFFFFF;
            border-bottom: 1px solid #dddddd;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 90px;
            &.isFixed{
                position: relative;
            }
            li {
                text-align: center;
                flex: 1;
                font-size: 30px;
                color: #999999;
                position: relative;
                height: 100%;
            }
            .navactive {
                font-size: 34px;
				color: #333333;
            }
            .navactive::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 60px;
                height: 6px;
                border-radius: 2.5px;
				background-color: #ffd11a;
				transform: translate(-50%, 0);
            }
        }
</style>
