<template>
	<div class="tabs">
		<div class="tab cur" :class="{active:item.checked}" @click="getactive(index)" v-for="(item,index) in list"
			:key="index">
			<div class="dian"></div><span>{{ item.name }}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "tabs",
		components: {},
		props: {
			id: {
				type: String,
				default () {
					return '';
				}
			}
		},
		data() {
			return {
				list: [{
					name: '包住',
					checked: false
				}, {
					name: '包吃',
					checked: false
				}],
			}
		},
		watch: {},
		mounted() {},
		methods: {
			getactive(e) {
				this.list[e].checked = !this.list[e].checked
				this.$emit('getactive', this.list)
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		.tab {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			margin-right: 10px;
			margin-left: 10px;

			.dian {
				width: 22rpx;
				height: 22rpx;
				background: rgba(229, 164, 20, 0);
				border: 1rpx solid #757575;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			span {
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 300;
				color: #666666;
			}
		}

		.tab.active {
			.dian {
				background: #E5A414;
				border: 1rpx solid #E5A414;
			}
		}
	}
</style>