<template>
	<view class="amms-page">
		<cu-custom :isBack="true" :showChange="false" :footIs="false" :showSure="false">
			<block v-slot:content>应用菜单</block>
		</cu-custom>
		<view class="container">
			<view class="searchs">
				<view class="search">
					<image :src="searchImg" class="pic"></image>
					<view class="content">
						<input class="uni-input" v-model="searchText" @blur="searchConfirm" @confirm="searchConfirm" placeholder="请输入应用菜单名" />
					</view>
				</view>
				<button v-if="searchText != ''" @tap="searchConfirm" class="searchBtn">搜索</button>
			</view>
		</view>
		<!--  -->
		<view class="container containers" style="padding-right: 12rpx;" :style="containStyle">
			<view class="work_nav" v-if="workList.length != 0">
				<view class="title">
					<view class="left">航材类</view>
				</view>
				<view class="ul">
					<view class="li" v-for="(item,index) in workList" :key="index">
						<view class="na" @tap.stop="path_url(item.path, item.menuId)">
							<image :src="item.imgs" class="pic"></image>
							<view class="n">{{ item.name }}</view>
						</view>
						<image @tap.stop="workClick(index)" v-show="item.ifUserCollect == '2'" :src="addImg" class="icon"></image>
						<image @tap.stop="workClick(index)" v-show="item.ifUserCollect == '1'" :src="addActiveImg" class="icon"></image>
					</view>
				</view>
			</view>
			<view class="work_nav" v-if="workList1.length != 0">
				<view class="title">
					<view class="left">机务维修类</view>
				</view>
				<view class="ul">
					<view class="li" v-for="(item,index) in workList1" :key="index">
						<view class="na" @tap.stop="path_url(item.path, item.menuId)">
							<image :src="item.imgs" class="pic"></image>
							<view class="n">{{ item.name }}</view>
						</view>
						<image @tap.stop="workClick1(index)" v-show="item.ifUserCollect == '2'" :src="addImg" class="icon"></image>
						<image @tap.stop="workClick1(index)" v-show="item.ifUserCollect == '1'" :src="addActiveImg" class="icon"></image>
					</view>
				</view>
			</view>
			<view class="work_nav" v-if="workList2.length != 0">
				<view class="title">
					<view class="left">其他类</view>
				</view>
				<view class="ul">
					<view class="li" v-for="(item,index) in workList2" :key="index">
						<view class="na" @tap.stop="path_url(item.path, item.menuId)">
							<image :src="item.imgs" class="pic"></image>
							<view class="n">{{ item.name }}</view>
						</view>
						<image @tap.stop="workClick2(index)" v-show="item.ifUserCollect == '2'" :src="addImg" class="icon"></image>
						<image @tap.stop="workClick2(index)" v-show="item.ifUserCollect == '1'" :src="addActiveImg" class="icon"></image>
					</view>
				</view>
			</view>
		</view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, getCurrentInstance, computed, inject } from 'vue';
	import { request } from '@/utils/request';
	import {
		onLoad,
		onShow,
		onBackPress
	} from '@dcloudio/uni-app';
	
	const { proxy } = getCurrentInstance();
	const customBar:any = inject('CustomBar');
	const searchImg = ref('../../../static/img/ammsHome/search.png');
	const addImg = ref('../../../static/img/ammsHome/add.png');
	const addActiveImg = ref('../../../static/img/ammsHome/add_active.png');
	const searchText = ref('');

	const workList = ref([]);
	const workList1 = ref([]);
	const workList2 = ref([]);
	const containStyle = computed(() => {
		return `height: calc(100vh - ${customBar+94}px);`
	})

	onMounted(() => {
		init();
	});

	onShow(() => {
	})
	
	onBackPress(() => {
		uni.$emit('menuList', null);
	})

	function init() {
		proxy.$refs.loading.open();
		request({
			method: 'post',
			url: 'appmenu-selectMenu',
			data: {
				name: searchText.value,
				parentid: uni.getStorageSync('_PARAMETERS_') || '10076'
			},
		}).then((res: any) => {
			proxy.$refs.loading.close();
				if (res.code == 0) {
					let { aviationList, maintenanceList, othersList } = res.data;
					if (aviationList.length == 0 && maintenanceList.length == 0 && othersList.length == 0) {
						uni.showToast({
							title: '暂无该应用菜单，请重新输入',
							icon: 'none',
							duration: 2000
						});
					} else {
						dataStructure(aviationList, 1);
						dataStructure(maintenanceList, 2);
						dataStructure(othersList, 3);
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
		}).catch((err: any) => {
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
			proxy.$refs.loading.close();
		});
	}

	function path_url(path : any, menuId: any) {
		hits(menuId)
		if (path.indexOf('elb') > -1) {
			plus.runtime.openURL('elb://', (res: any) => {
				console.log(res)
			})
			return false;
		}
		if (path.indexOf('/index') > -1) {
			uni.navigateTo({
				url: `/pages/modules/${path}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/modules/${path}/index`
			});
		}
		
	}
	
	// 记录点击菜单点击量
	function hits(menuId : any) {
		let obj : any = {};
		obj['menuId'] = menuId;
		request({
			method: 'post',
			url: 'appmenu-saveClick',
			data: obj,
		})
	}

	function workClick(val : any) {
		if (workList.value[val].ifUserCollect == 2) {
			addCollect(workList.value[val], 'workList', val);
		}
	}

	function workClick1(val : any) {
		if (workList1.value[val].ifUserCollect == 2) {
			addCollect(workList1.value[val], 'workList1', val);
		}
	}

	function workClick2(val : any) {
		// workList2.value[val].active = !workList2.value[val].active
		if (workList2.value[val].ifUserCollect == 2) {
			addCollect(workList2.value[val], 'workList2', val);
		}
	}
	// 添加收藏
	function addCollect(item: any, listType: string, index: any) {
	    proxy.$refs.loading.open();
		request({
			method: 'post',
			url: 'appmenu-saveMenuCollect',
			data: [{menuId: item.menuId}],
		}).then((res: any) => {
			proxy.$refs.loading.close();
			if (res.code == 0) {
				uni.showToast({
					title: '已成功添加至工作台！',
					icon: 'none'
				});
				
				if (listType == 'workList') {
					workList.value[index].ifUserCollect = 1;
				}
				if (listType == 'workList1') {
					workList1.value[index].ifUserCollect = 1;
				}
				if (listType == 'workList2') {
					workList2.value[index].ifUserCollect = 1;
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		}).catch((err: any) => {
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
			proxy.$refs.loading.close();
		});
	}

	function searchConfirm() {
		init();
	}

	function dataStructure(arr : any, val : any) {
		if (arr.length > 0) {
			let initData: any = [];
			arr?.map((item: any) => {
				initData.push({
					active: false,
					name: item.name,
					imgs: 'data:image/png;base64,' + item.iconFileUrl,
					menuId: item.menuId,
					parentId: item.parentId,
					path: item.path,
					ifUserCollect: item.ifUserCollect
				})
			});

			if (val == 1) {
				workList.value = initData;
				findIndexById(workList.value);
			} else if (val == 2) {
				workList1.value = initData;
				findIndexById(workList1.value);
			} else {
				workList2.value = initData;
				findIndexById(workList2.value);
			}


		} else {
			if (val == 1) {
				workList.value = [];
			} else if (val == 2) {
				workList1.value = [];
			} else {
				workList2.value = [];
			}
		}
	}

	function highlightFun(arr : any, menuId : any) {
		arr.map((t : any) => {
			if (t.menuId == menuId) {
				return t.active = true;
			}
		})
	}

	function findIndexById(arr : any) {
		let highlightState = uni.getStorageSync('workListData') || [];
		highlightState.map((t : any) => {
			highlightFun(arr, t.menuId);
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #F2F6F9;
		height: 100%;
	}

	.bj {
		background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		padding-bottom: 125rpx;
	}

	.container {
		padding: 0rpx 32rpx;
		background-color: #F2F6F9;
	}

	.containers {
		// padding-bottom: 100rpx;
		// height: calc(100vh - 20rpx);
		box-sizing: border-box;
		overflow-y: auto;
	}

	.searchs {
		padding: 24rpx 0rpx;
		display: flex;
		align-items: center;

		.search {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 32rpx;

			.content {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				width: 100%;

				input {
					font-size: 28rpx;
				}

				.uni-input-placeholder {
					font-size: 28rpx;
				}
			}

			.pic {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.searchBtn {
			height: 70rpx;
			line-height: 70rpx;
			margin-left: 20rpx;
			text-align: center;
			border-radius: 16rpx;
			font-size: 24rpx;
			flex-shrink: 0;
			color: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #166ce5;
		}
	}

	.work_nav {
		margin-top: 40rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #444D54;
		}

		.ul {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-top: 32rpx;

			.li {
				margin-right: 20rpx;
				width: 156rpx;
				height: 168rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.na {
					text-align: center;

					.pic {
						width: 58rpx;
						height: 58rpx;
						margin: 0;
						margin-top: 20rpx;
					}

					.n {
						display: flex;
						align-items: flex-start;
						height: 60rpx;
						margin-top: 16rpx;
						font-size: 24rpx;
						padding: 0 10rpx;
						line-height: 30rpx;
						box-sizing: border-box;
					}
				}

				.icon {
					width: 48rpx;
					height: 52rpx;
					position: absolute;
					top: 0;
					right: 0;
					margin: 0;
				}
			}
		}

	}
</style>