<template>
	<div>
		<van-nav-bar title="宗谱"/>
		<van-tabs v-model:active="activeName">
			<van-tab title="曾祖辈" name="a">

				<van-row justify="center" align="center" style="text-align: center;">
					<van-col span="6">
						<van-image style="width: 60rpx; height: 60rpx;background-color: #e2f2f2;"
							:src="getImageUrl(addimage)" @click="viewClick('/genealogyAdd')" />
					</van-col>
					<van-col span="6">
						<div class="demo-uni-col dark content" style="color: red;">{{content[0]}}</div>
					</van-col>
					<van-col span="6">
						<div class="demo-uni-col dark content">{{content[1]}}</div>
					</van-col>
					<van-col span="6">
						<div class="demo-uni-col dark content">{{content[2]}}</div>
					</van-col>
				</van-row>
			</van-tab>
			<van-tab title="祖父辈" name="b">内容 2</van-tab>
			<van-tab title="父辈" name="c">内容 3</van-tab>
			<van-tab title="平辈" name="d">内容 4</van-tab>
		</van-tabs>
	</div>

	<!-- 	<view>
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)">
				<view :class="[act==index?'name':'']">
					{{item.name}}
				</view>
			</view>

		</view>
		<view class="flex-item" style="text-align: left;margin-left: 20rpx;margin-top:20rpx;height: 60rpx;">
			<image style="width: 60rpx; height: 60rpx;" :src="addimage" @click="viewClick('/pages/sacrifice/genealogy/add')">
			</image>
		</view>
		<view class="content">
			<uni-row class="demo-uni-row">
				<uni-col :span="8">
					<view class="demo-uni-col dark content" style="color: red;">{{content[0]}}</view>
				</uni-col>
				<uni-col :span="8">
					<view class="demo-uni-col dark content">{{content[1]}}</view>
				</uni-col>
				<uni-col :span="8">
					<view class="demo-uni-col dark content">{{content[2]}}</view>
				</uni-col>
			</uni-row>
		</view>
	</view> -->

</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();
	
	const activeName = ref('a');

	const addimage = ref("image/ancestralHall2.png");
	// 默认激活样式是第一个
	const act = ref(0);

	const list = ref([{
			id: 0,
			name: '曾祖辈'
		},
		{
			id: 1,
			name: '祖父辈'
		},
		{
			id: 2,
			name: '父辈'
		},
		{
			id: 3,
			name: '平辈'
		}

	]);
	const content = ref([]);

	function changeAct(item) {
		// 激活样式是当前点击的对应下标--list中对应id
		act.value = item.id;

		// 可以根据点击事件改变内容
		// content.value = item;
		content.value.push("钱文忠");
		content.value.push("钱文浩");
		content.value.push("钱文义");
	}

	changeAct(list.value[0]);

	function viewClick(url) { //点击事件
		router.push(url);
	}

	const getImageUrl = (name) => {
		return new URL(`/src/assets/${name}`, import.meta.url).href
	}
</script>

<style lang="scss">
	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #e2f2f2;
		font-size: 30rpx;
		// color: orange;
		letter-spacing: 2.14rpx;
	}

	.nav-list {
		width: 100rpx;
		height: 100%;
		margin-top: 40rpx;
		opacity: .9;
	}

	.nav-list .name {
		color: blue;
	}

	.nav-list .line {
		margin-top: 10rpx;
		width: 100rpx;
		height: 4rpx;
		background-color: blue;
	}

	/* 内容 */
	.content {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 30rpx;
	}
</style>