<template>
	<view>
		<view class="bj">
			<view class="container">
				<!--  -->
				<view class="searchs">
					<view class="s_le">
						<view class="title">
							<view class="ti1">AMMS</view>
							<view class="ti2">AMMS</view>
						</view>
						<!-- <view class="flex justify-center margin-top-sm" style="width: 100%;"
							v-show="urlPrefix.indexOf('amms.hnatechnic.com') < 0">
							
						</view> -->
						<view class="subtitle">海航技术移动生产门户平台<text v-if="urlPrefix.indexOf('amms.hnatechnic.com') < 0"
								class="text-bold amms-error-font-color">测试环境</text></view>
						<view class="search" @tap="path_url('/pages/home/components/menuList')">
							<image src="../../../static/img/ammsHome/search.png" class="pic"></image>
							<view class="content">请输入菜单名</view>
						</view>
					</view>
					<view class="s_ri">
						<image src="../../../static/img/ammsHome/bj1.png" class="pic"></image>
					</view>
				</view>
				<!-- 热门菜单  -->
				<view class="navs">
					<view class="popTit">
						<text class="main-tit">热门菜单</text>
						<text class="sub-tit" @tap="toMenuList">更多</text>
					</view>
					<view class="ul-grid">
						<view class="li-item" v-for="(item,index) in navList" :key="index" @tap="menu_jump(item)">
							<view class="imges">
								<view class="img_item">
									<image :src="item.imgs" class="pic"></image>
								</view>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 安全周报 -->
		<view class="details_list">
			<view class="container">
				<view class="top">
					<view class="t_title">安全周报</view>
					<view class="t_more" @tap="path_url('/pages/home/components/newsList')">更多</view>
				</view>
				<view class="ul" v-if="detList.length > 0">
					<view class="li" @tap="listClick(item)" v-for="(item,index) in detList" :key="index">
						<view class="picimg0">
							<image v-show="item.filetype == '.pdf'" src="../../../static/img/ammsHome/pdf.png"
								class="pic">
							</image>
							<image v-show="item.filetype == '.pptx'" src="../../../static/img/ammsHome/ppt.png"
								class="pic">
							</image>
						</view>
						<view class="content">
							<view class="title">{{ item.uploadname }}</view>
							<view class="cont">{{ item.uploadtime.split('.')[0] }}</view>
						</view>
					</view>
					<view class="isOver" v-if="isOver">------ 数据已全部加载完成 ------</view>
				</view>
				<errorInfo v-else-if="errorText != ''" :errorInfo="errorText" @recall="listenToChild"></errorInfo>
			</view>
		</view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance, onMounted } from 'vue';
	import { request, loginRequest, ipConfig } from '@/utils/request';
	import errorInfo from '@/pages/components/errorInfo.vue';
	// import {
	// 	onReachBottom,
	// 	onShow,
	// 	onLoad
	// 	// onPullDownRefresh,
	// } from '@dcloudio/uni-app';
	// import {
	// 	fileDownload
	// } from '@/common/appUpdate.js';
	const page = ref(1);
	const isOver = ref(false);
	const { proxy } = getCurrentInstance();
	const errorText = ref('');
	const navList = ref([]);
	const detList = ref([]);
	const urlPrefix = ref('');

	onMounted(() => {
		urlPrefix.value = uni.getStorageSync('urlPrefix') ? uni.getStorageSync('urlPrefix') : ipConfig;
	});

	function init() {
		// 热门菜单
		if (navList.value.length == 0) {
			proxy.$emit('recall', 'open');
			getPopular()
		}
		setTimeout(() => {
			isOver.value = false;
			page.value = 1;
			detList.value = [];
			getselectappnewspage('');
		}, 500)

	}

	function getPopular() {
		request({
			method: 'post',
			url: 'appmenu-selectHotMenuCollectsWithTen',
			// data: {}
			data: {
				parentid: uni.getStorageSync('_PARAMETERS_') || '10076'
			},
		}).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				if (res.code == 0) {
					let arr = res.data;
					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
							})
						});
						navList.value = initData;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
		})
	}
	defineExpose({ init })

	function path_url(_url : any) {
		uni.navigateTo({
			url: _url
		});
	}

	function listenToChild(val : boolean) {
		if (val) {
			proxy.$emit('recall', 'open');
			getselectappnewspage('');
		}
	}

	function listClick(_val : any) {
		if (_val.fileUrl) {
			proxy.$emit('recall', 'open');
			uni.downloadFile({
				url: _val.fileUrl,
				success: (res) => {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						complete: () => {
							proxy.$emit('recall', 'close');
						},
						success: (res) => {
							console.log('打开文档成功');
						},
						fail: (err) => {
							uni.showToast({
								title: '质量安全周报仅支持在集团内网环境进行下载查看',
								icon: 'none',
								duration: 2500
							});
							console.log(err)
						}
					});
				},
				fail: (err) => {
					console.log(err);
					uni.showToast({
						title: '质量安全周报仅支持在集团内网环境进行下载查看',
						icon: 'none',
						duration: 2500
					});
					proxy.$emit('recall', 'close');
				}
			});
		}
	}

	function getselectappnewspage(co : any) {
		request({
			method: 'post',
			url: 'news-selectQualitySafetyPage',
			data: {
				page: page.value,
				length: 5,
				content: co ? co : ''
			},
		}, false, true).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				let arr = res.data.records;

				if (arr.length == 0) {
					isOver.value = true;
				}
				let initData : any = [];
				arr?.map((item : any, index : number) => {
					if (index < 3) {
						initData.push({
							uploadname: item.uploadname,
							uploadtime: item.uploadtime,
							filetype: item.filetype,
							fileUrl: item.fileUrl
						})
					}
				});

				detList.value = initData;
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}

		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			console.log(err)
			errorText.value = typeof (err.errMsg) == 'undefined' ? '系统繁忙，请稍后点击重试' : `${err.errMsg},请点击图片重试。`;
		});
	}

	function menu_jump(row : any) {
		hits(row.menuId);
		if (row.path.indexOf('/index') > -1) {
			uni.navigateTo({
				url: `/pages/modules/${row.path}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/modules/${row.path}/index`
			});
		}
	}

	function toMenuList() {
		uni.navigateTo({
			url: `/pages/home/components/menuList`
		});
	}

	function hits(menuId : any) {
		let obj : any = {};
		obj['menuId'] = menuId;

		request({
			method: 'post',
			url: 'appmenu-saveClick',
			data: obj,
		})
	}
</script>

<style lang="less" scoped>
	.bj {
		background: linear-gradient(-90deg, #168AFF 0%, #0E57FF 100%);
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		padding-bottom: 165rpx;
		// padding-top: 80rpx;
		position: relative;
		box-sizing: border-box;

		.container {
			padding: 0rpx 32rpx;
			box-sizing: border-box;
			position: relative;
		}
	}

	.head {
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding: 10rpx 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background: linear-gradient(-90deg, #168AFF 0%, #0E57FF 100%);

		.pic {
			width: 44rpx;
			height: 44rpx;
			margin: 0 !important;
		}
	}

	.searchs {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.s_le {
			margin-right: 19rpx;

			.title {
				position: relative;

				.ti1 {
					font-size: 80rpx;
					font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
					font-weight: bold;
					color: #FFFFFF;
					position: absolute;
					top: 14rpx;
					left: 20rpx;
				}

				.ti2 {
					font-size: 98rpx;
					font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
					-webkit-text-fill-color: transparent;
					-webkit-text-stroke: 1rpx rgba(255, 255, 255, 0.3);
					font-weight: normal;
					color: rgba(255, 255, 255, 0.5);
				}
			}

			.subtitle {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.search {
				width: 400rpx;
				background: #FFFFFF;
				border-radius: 40px;
				display: flex;
				align-items: center;
				padding: 20rpx 32rpx;
				margin-top: 32rpx;

				.content {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CCCCCC;
					margin-left: 16rpx;
				}

				.pic {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.s_ri {
			.pic {
				width: 267rpx;
				height: 286rpx;
			}
		}
	}

	.navs {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		top: 332rpx;
		position: absolute;
		left: 32rpx;
		right: 32rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		.popTit {
			width: 100%;
			display: flex;
			font-weight: 400;
			align-items: flex-end;
			justify-content: space-between;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;

			.main-tit {
				color: #444D54;
				font-size: 30rpx;
			}

			.sub-tit {
				color: #808080;
				font-size: 28rpx;
			}
		}

		.ul-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-row-gap: 20rpx;
			grid-auto-flow: row;
			width: 100%;
			margin-top: 20rpx;

			.li-item {
				align-items: center;
				align-self: center;
				text-align: center;
				width: 100%;
				margin-bottom: 20rpx;

				.imges {
					width: 98rpx;
					height: 98rpx;
					display: inline-block;
					background: linear-gradient(180deg, rgb(156, 202, 238) 0%, rgb(255, 255, 255) 100%);
					box-shadow: 0rpx 8rpx 20rpx 0rpx #a8bcea;
					border: .2rpx solid #ffffff;
					border-radius: 50%;
					padding: 20rpx;

					.img_item {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.pic {
							width: 58rpx;
							height: 58rpx;
							margin: 0 !important;
						}
					}
				}

				.name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444D54;
					margin-top: 18rpx;
					overflow: hidden;
					white-space: nowrap;
					display: block;
					text-overflow: ellipsis;
				}

			}
		}

		.ul {
			display: flex;
			justify-content: flex-start;
			align-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
			margin-top: 20rpx;
		}

		.li {
			text-align: center;
			width: 20%;
			margin-bottom: 20rpx;

			.imges {
				width: 98rpx;
				height: 98rpx;
				display: inline-block;
				background: linear-gradient(180deg, rgb(156, 202, 238) 0%, rgb(255, 255, 255) 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx #a8bcea;
				border: .2rpx solid #ffffff;
				border-radius: 50%;
				padding: 20rpx;

				.img_item {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.pic {
						width: 58rpx;
						height: 58rpx;
						margin: 0 !important;
					}
				}
			}

			.name {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #444D54;
				margin-top: 18rpx;
				overflow: hidden;
				white-space: nowrap;
				display: block;
				text-overflow: ellipsis;
			}

		}
	}

	.details_list {
		margin-top: 370rpx;
		background: #ffffff;
		padding: 20rpx 0rpx;
		padding-bottom: 100rpx;
		height: calc(100vh - 1100rpx);
		box-sizing: border-box;

		.container {
			padding: 0rpx 32rpx;
			width: 100%;
			height: 100%;

			.top {
				margin-bottom: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;

				.t_title {
					font-size: 32rpx;
					font-weight: 500;
					color: #444D54;
				}
			}

			.ul {
				overflow-y: scroll;
				height: 100%;

				.li {
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #DDDDDD;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;

					&:last-child {
						border-bottom: 0px;
						margin-bottom: 0rpx;
						padding-bottom: 0rpx;
					}

					.picimg {
						margin-right: 24rpx;

						.pic {
							width: 227rpx;
							height: 128rpx;
						}
					}

					.picimg0 {
						margin-right: 24rpx;

						.pic {
							width: 70rpx;
							height: 70rpx;
						}
					}

					.content {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;

						.title,
						.cont {
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.title,
						.titles {
							font-size: 30rpx;
							font-weight: 500;
							color: #444D54;
							margin-bottom: 8rpx;
						}

						.titles {
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.cont {
							margin-bottom: 8rpx;
						}
					}

					.icon {
						margin-left: 66rpx;

						.pic {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}

	.isOver {
		margin-bottom: 33rpx;
		text-align: center;
	}
</style>