<template>
	<view class="content">
		<view class="g_border_e g_w_all" v-for="(item, index) in list" :key="item.id">
			<view class="g_bg_f_5 g_p_12 g_flex_row_between flex_center" :class="item.open ? '' : ''" @click="triggerCollapse(index, item.id)">
				<text class="">{{ item.name }}</text>
				<i class="iconfont icon-zhankai" :style="{ transform: item.open ? 'rotate(180deg)' : '' }"></i>
			</view>
			<view class="" v-if="item.open">
				<view class="g_border_e_b g_p_12 g_flex_row_between flex_center" v-for="(item2, key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">
					<text class="">{{ item2.name ? item2.name : item2 }}</text>
					<i class="iconfont icon-gengduo11"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: "form",
					name: "表单组件",
					open: false,
					pages: ["button"],
				},
				{
					id: "form",
					name: "列表样式",
					open: false,
					pages: [
						{
							name: "职位列表",
							url: "/pages/component/listItem/jobList",
						},
						{
							name: "工单列表",
							url: "/pages/component/listItem/applyList",
						},
						{
							name: "发单号列表",
							url: "/pages/component/listItem/orderList",
						},
					],
				},
			],
		};
	},
	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;
				uni.navigateTo({
					url: url,
				});
			} else {
				uni.navigateTo({
					url: e.url,
				});
			}
		},
	},
};
</script>

<style>
.content {
	padding: 10px 0;
	width: calc(100vw - 20px);
	margin: 0 auto;
}
</style>
