<template>
	<niu-page>
		<niu-navbar fixed color="white" middleLayout='left' bg="#39b54a">
			Tabs
		</niu-navbar>
		<view style="font-size: 35rpx;">
			<niu-tabs :list="colorList" @change="change" v-model="active"></niu-tabs>
		</view>
		<niu-tabs :list="colorList" @change="change" capsule v-model="active"></niu-tabs>
		<niu-tabs :list="colorList" :bar="false" @change="change" v-model="active">
			<template #bar="{show, barLeft, barWidth, anim, props}">
				<view v-if="show" :style="[
					{
						transition: anim?'left .3s ease':'',
						position: 'absolute',
						top: '50%',
						transform: 'translateY(-50%)',
						left: (barLeft+barWidth/4-9) + 'px',
						height: '55%',
						border: `1px solid ${props.activeColor}`,
						borderRadius: '100rpx',
						bottom: 0,
						width: (barWidth/2 + 18) + 'px',
					}
				]"></view>
			</template>
		</niu-tabs>
		<niu-tabs :list="fiveList" full :barPer=".8" @change="change" v-model="active"></niu-tabs>
		<niu-tabs :list="fiveList" full :barPer=".8" @change="change" capsule v-model="active"></niu-tabs>
		<niu-tabs :list="colorList" :active-color="colorList[active]&&colorList[active].color" :bar="false"
			@change="change" v-model="active">
			<template #bar="{show, barLeft, barWidth, anim, props, item}">
				<view v-if="show" :style="[
					{
						transition: anim?'left .3s ease':'',
						position: 'absolute',
						top: '50%',
						transform: 'translateY(-50%)',
						left: (barLeft+barWidth/4-9) + 'px',
						height: '55%',
						border: `1px solid ${item.color || props.activeColor}`,
						borderRadius: '100rpx',
						bottom: 0,
						width: (barWidth/2 + 18) + 'px',
					}
				]"></view>
			</template>
		</niu-tabs>
		<niu-tabs :list="fiveList" @change="change" v-model="active"></niu-tabs>
		<button type="default" @click="cilck">点击</button>
		<view>{{$n.data.navbarTop}}px</view>
		<!-- <cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell> -->
	</niu-page>
</template>

<script>
	import cell from "./cell.vue"
	export default {
		components: {
			cell
		},
		data() {
			return {
				formData: {
					buildingArea: ''
				},
				active: 2,
				fiveList: [{
						text: "金吒"
					},
					{
						text: "木吒"
					},
					{
						text: "水吒"
					},
					{
						text: "火吒"
					},
					{
						text: "土吒"
					}
				],
				colorList: [{
						text: "嫣红",
						color: "#e54d42"
					},
					{
						text: "桔橙",
						color: "#f37b1d"
					},
					{
						text: "明黄",
						color: "#fbbd08"
					},
					{
						text: "橄榄",
						color: "#8dc63f"
					},
					{
						text: "森绿",
						color: "#39b54a"
					},
					{
						text: "天青",
						color: "#1cbbb4"
					},
					{
						text: "海蓝",
						color: "#0081ff"
					},
					{
						text: "姹紫",
						color: "#6739b6"
					},
					{
						text: "木槿",
						color: "#9c26b0"
					},
					{
						text: "桃粉",
						color: "#e03997"
					},
					{
						text: "棕褐",
						color: "#a5673f"
					},
					{
						text: "玄灰",
						color: "#8799a3"
					},
					{
						text: "草灰",
						color: "#aaaaaa"
					},
					{
						text: "墨黑",
						color: "#333333"
					},
					{
						text: "雅白",
						color: "#ffffff"
					},
				]
			};
		},
		methods: {
			cilck() {
				this.fiveList = [{
						text: "金吒"
					},
					{
						text: "木吒"
					},
					{
						text: "土吒"
					},
					{
						text: "土吒"
					},
					{
						text: "土吒"
					},
					{
						text: "土吒22222"
					},
					{
						text: "土吒"
					},
					{
						text: "土吒"
					},
					{
						text: "土吒"
					},
				]
			},
			change(index) {
				console.log(index);
			}
		},
	}
</script>

<style lang="scss">

</style>
