<template>
	<view>
		<u-sticky>
			<HeaderNav title="功能"></HeaderNav>
		</u-sticky>
		<view class="apply-page">
			<!--		<view class="card-common">-->
			<!--			<view class="card-title">-->
			<!--				<text class="title">常用菜单</text>-->
			<!--			</view>-->
			<!--			<view class="card-body">-->
			<!-- <view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/delayApply')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">延期申请</text>
					</view>
				</view> -->

			<!--				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/FM/scheduling')">-->
			<!--					<image src="/static/encrypted.png"></image>-->
			<!--					<view>-->
			<!--						<text class="text">排班</text>-->
			<!--					</view>-->
			<!--				</view>-->
			<!--<view class="item" @click="handleNavigateTo('/pages/apply/subPages/riskReport')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">隐患上报</text>
					</view>
				</view> -->
			<!-- <view class="item">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">隐患整改通知</text>
					</view>
				</view>
				<view class="item">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">整改记录</text>
					</view>
				</view> -->
			<!--				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/riskReportRecord')">-->
			<!--					<image src="/static/encrypted.png"></image>-->
			<!--					<view>-->
			<!--						<text class="text">隐患上报记录</text>-->
			<!--					</view>-->
			<!--				</view>-->
			<!--				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/FO/4teamActivityEdit?isAdd=1')">-->
			<!--					<image src="/static/encrypted.png"></image>-->
			<!--					<view>-->
			<!--						<text class="text">安全活动记录</text>-->
			<!--					</view>-->
			<!--				</view>-->
			<!-- <view class="item" @click="handleNavigateTo('/pages/apply/subPages/HM2/preOperSchEdit')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">作业方案讨论记录</text>
					</view>
				</view> -->
			<!-- <view class="item" @click="handleNavigateTo('/pages/apply/subPages/HM2/jobEdit')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">工作票发起</text>
					</view>
				</view> -->
			<!--			</view>-->
			<!--		</view>-->

			<!-- <view class="card-common">
			<view class="card-title">
				<text class="title">安全检查</text>
			</view>
			<view class="card-body">
				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/checkPlanNoticeIndex')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">检查任务</text>
					</view>
				</view>
				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/safeCheckIndex')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">检查记录</text>
					</view>
				</view>
				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/riskSumbitNoticePersonIndex')">
					<image src="/static/encrypted.png"></image>
					<view>
						<text class="text">隐患整改通知</text>
					</view>
				</view>
				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/riskSumbitDealIndex')">
					<image src="/static/encrypted.png"></image>
					<view class="item-name">
						<text class="text">隐患整改记录</text>
					</view>
				</view>
				<view class="item" @click="handleNavigateTo('/pages/apply/subPages/BS/delayApplyIndex')">
					<image src="/static/encrypted.png"></image>
					<view class="item-name">
						<text class="text">申请延期记录</text>
					</view>
				</view>
			</view>
		</view> -->


			<view class="card-common" v-for="(menu, index) in menus" :style="{height:'auto'}">
				<view class="card-title">
					<text class="title">{{menu.Node.NAME}}</text>
					<!-- <view class="action" v-show="menu.Children.length > 8" @click="handleExpand(index)">
					<text class="text">{{collapse.includes(index) ? '更多展开' : '收起'}}</text>
					<uni-icons type="bottom" color="#999" />
				</view> -->
				</view>
				<view class="card-body">
					<!-- <view class="item" @click="handleNavigateTo('/pages/apply/subPages/OG/contact016')">
						<image src="/static/logo_40_40.png"> </image>
						<view class="item-name">
							<text class="text">手动测试</text>
						</view>
					</view> -->

					<view class="item" v-for="subMenu in menu.Children"
						@click="handleNavigateTo(subMenu.Node.MENU_FORM_PARAMS)">
						<image
							:src="`${(subMenu.Node.ICON&&isOnline) ? sourceUrl+'/icon/' + subMenu.Node.ICON : '/static/logo_40_40.png'}`">
						</image>
						<view class="item-name">
							<text class="text">{{subMenu.Node.NAME}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import HeaderNav from '@/components/custom/head-nav.vue';
	import config from '../../config/common'
	export default {
		components: {
			HeaderNav
		},
		data() {
			return {
				menus: [],
				collapse: [],
				sourceUrl: config.uni_app_web_source_url,
				isOnline: (getApp().globalData.isOnline == null || getApp().globalData.isOnline)
			}
		},
		onShow() {
			const appInfoData = uni.getStorageSync('appInfo')
			if (appInfoData && appInfoData.Menus) {
				const applys = appInfoData.Menus.filter(i => i.Node.NAME === '功能')
				this.menus = applys[0] ? applys[0].Children : []
				// this.menus.forEach((item, index) => {
				// 	if (item.Children.length > 8) {
				// 		this.collapse.push(index)
				// 	}
				// })
			}
		},
		methods: {
			handleNavigateTo(url) {
				uni.navigateTo({
					url: url // url: '/pages/my/subPagesSafe/checkplanindex'
				})
			},
			// handleExpand(index) {
			// 	if (this.collapse.includes(index)) {
			// 		const at = this.collapse.indexOf(index)
			// 		this.collapse.splice(at, 1)
			// 	} else {
			// 		this.collapse.push(index)
			// 	}
			// }
		},
		computed: {

		},
	}
</script>

<style>
	.apply-page {
		padding: 16px;
	}

	.card-common {
		border-radius: 8px;
		box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 16px;
		overflow: hidden;
		padding-bottom: 2px;
	}

	.card-common .card-title {
		display: flex;
		flex-direction: row;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		padding: 16px 16px 12px;
	}

	.card-common .card-title .title {
		color: #333;
		font-size: 16px;
		line-height: 20px;
		font-weight: 700;
	}

	.card-common .card-title .action .text {
		font-size: 14px;
		color: #999;
		line-height: 20px;
		margin-right: 8px;
	}

	.card-common .card-body {
		display: flex;
		/*justify-content: space-between;*/
		flex-wrap: wrap;
		flex-direction: row;
		font-size: 13px;
	}

	.card-common .card-body .item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 14px;
	}

	/*.card-common .card-body .item:last-child:nth-child(4n - 1) {*/
	/*  margin-right: calc(24% + 4% / 3);*/
	/*}*/
	/*.card-common .card-body .item:last-child:nth-child(4n - 2) {*/
	/*  margin-right: calc(48% + 8% / 3);*/
	/*}*/
	.card-common .card-body .item image {
		width: 40px;
		height: 40px;
		margin-bottom: 6px;
	}

	.card-common .card-body .item .item-name {
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		white-space: nowrap;
	}

	.card-common .card-body .item .text {
		font-size: 14px;
		line-height: 20px;
		font-weight: 500;
		color: #333;
	}
</style>