<template>
	<view class="pull-nav-btns" :class="type=='radio'?'search-btns':''">
		<view @tap="chooseEv(index,item.id)" :class="currentIndex==index?'radio-btn active':'radio-btn'" v-for="(item,index) in list" v-if="type=='radio'">
			<view class="radio"></view>
			<text>{{item.name}}</text>
		</view>
		<view @tap="chooseEv(index,item.id)" :class="currentIndex==index?'btn active':'btn'" v-for="(item,index) in list" v-if="type=='list' && index<=maxNum">{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		name:'nav-tab',
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			},
			type:{
				type:String,
				default:'list'
			}, //展现方式
			maxNum:{
				type:String,
				default:2
			}
		},
		data(){
			return {
				currentIndex:0, //当前位置
			}
		},
		methods:{
			// 导航选择事件
			chooseEv(index,id) {
				if(this.currentIndex !== index){
					this.currentIndex = index;
					// 抛出事件
					this.$emit('chooseEv',index,id)
				}
			}
		}
	}
</script>

<style scoped>
	.pull-nav-btns {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 25rpx 0;
	}
	
	.pull-nav-btns .btn {
		width: 220rpx;
		height: 66rpx;
		margin: 0 25rpx;
		border-radius: 10rpx;
		line-height: 66rpx;
		text-align: center;
		font-size: 30rpx;
		color: #000000;
	}
	
	.pull-nav-btns .btn:first-child{
		margin-left: 0;
	}
	
	.pull-nav-btns .btn:last-child{
		margin-right: 0;
	}
	
	.pull-nav-btns .btn.active {
		background-color: #0073bc;
		color: #FFFFFF;
	}
	.pull-nav-btns.search-btns{
		justify-content: flex-start;
		padding: 8rpx 0 20rpx;
	}
	.pull-nav-btns .radio-btn {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #000000;
	}
	.pull-nav-btns .radio-btn .radio{
		box-sizing: border-box;
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
		border: 2rpx solid #333333;
		border-radius: 100%;
	}
	.pull-nav-btns .radio-btn:first-child{
		margin-left: 0;
	}	
	
	.pull-nav-btns .radio-btn.active .radio{
		border: 8rpx solid #0073bc;
	}
</style>