<template>
	<view class="content">
		<view class="" v-for="(item, index) in list" :key="item.id">
			<view class="g_bg_ed" :class="item.open ? '' : ''" @click="triggerCollapse(index, item.id)">
				<text class="">{{ item.name }}</text>
			</view>
			<view class="" v-if="item.open">
				<view :class="{ 'left-win-active': leftWinActive === (item2.url ? item2.url.split('/')[3] : item2) && hasLeftWin }" class="" v-for="(item2, key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">
					<text class="">{{ item2.name ? item2.name : item2 }}</text>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: "form",
					name: "表单组件",
					open: false,
					pages: ["button", "checkbox", "form", "input", "label", "picker", "picker-view", "radio", "slider", "switch", "textarea"],
				},
			],
		};
	},
	onLoad() {},
	methods: {
		triggerCollapse(e, id) {
			if (!this.list[e].pages) {
				this.goDetailPage("", this.list[e].url);
				return;
			}
			for (var i = 0; i < this.list.length; ++i) {
				if (e === i) {
					this.list[i].open = !this.list[i].open;
				} else {
					this.list[i].open = false;
				}
			}
		},
		goDetailPage(panel, e) {
			if (typeof e === "string") {
				const url = "/pages/component/" + e + "/" + e;
				if (this.hasLeftWin) {
					uni.reLaunch({
						url: url,
					});
				} else {
					uni.navigateTo({
						url: url,
					});
				}
			} else {
				if (this.hasLeftWin) {
					uni.reLaunch({
						url: e.url,
					});
				} else {
					uni.navigateTo({
						url: e.url,
					});
				}
			}
		},
	},
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
