<template>
	<view class="amms-page">
		<cu-custom :isBack="true" :showUser="false" :showChange="false">
			<block v-slot:content>信息资讯</block>
		</cu-custom>
		<!-- 索引栏 -->
		<view class="heads">
			<view class="container">
				<view class="index_bar">
					<view class="item" :class="{'active': barIndex == item.code}" v-for="item in indexDarList"
						:key="item.code" @click="barClick(item)">
						<view class="title">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<!-- 搜索栏 -->
			<view class="container">
				<view class="searchs">
					<view class="search">
						<image :src="searchImg" class="pic"></image>
						<view class="content">
							<input class="uni-input" type="text" v-model="searchText" @confirm="searchConfirm"
								confirm-type="search" placeholder="请输入内容" />
						</view>
					</view>
					<button v-if="searchText != ''" @tap="searchConfirm" class="searchBtn">搜索</button>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view class="placeholder"></view>
		<view class="refresh-cover" v-if="detList.length > 0">
			<!-- 安全周报 -->
			<view class="refresh-block" v-show="barIndex == 0">
				<t-refresh ref="refresh" class="refresh-cover" height="100%" @refresh="refreshEvent" @loadMore="loadMore"
					:loadingType="loadingType" :loadingText="loadingText" >
					<template v-slot:content>
						<view class="details_list" v-show="barIndex == 0">
							<view class="container">
								<view class="ul">
									<view class="li" @click="detClick(item)" v-for="(item,index) in detList" :key="index">
										<view class="picimg0">
											<image v-show="item.filetype == '.pdf'" :src="pdfImg" class="pic"></image>
											<image v-show="item.filetype == '.pptx'" :src="pptImg" class="pic"></image>
										</view>
										<view class="content">
											<view class="title">{{ item.uploadname }}</view>
											<view class="cont">{{ item.uploadtime }}</view>
										</view>
									</view>
									<!-- <view class="isOver" v-if="isOver">------ 数据已全部加载完成 ------</view> -->
								</view>
							</view>
						</view>
					</template>
					<!-- 新闻管理 -->
					<!-- <view class="details_list" v-show="barIndex == 2">
						<view class="container">
							<scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y" scroll-with-animation="true"
								lower-threshold="200" @scrolltolower="lower">
								<view class="ul">
									<view class="li" @click="detClick(item)" v-for="(item,index) in detList.value" :key="index">
										<view class="picimg">
											<image :src="item.fileurl" class="pic"></image>
										</view>
										<view class="content">
											<view class="title">{{ item.title }}</view>
											<view class="cont">{{ item.newsDesc }}</view>
											<view class="time">{{ item.datePosted }}</view>
										</view>
									</view>
									<view class="isOver" v-if="isOver">------ 数据已全部加载完成 ------</view>
								</view>
							</scroll-view>
						</view>
					</view> -->
				</t-refresh>
				<!-- <web-view src="https://bi.hnatechnic.com/webroot/decision/view/form?op=h5&viewlet=%25E8%25B4%25A8%25E9%2587%258F%25E7%25AE%25A1%25E7%2590%2586%25E9%2583%25A8%252F%25E6%25A1%2588%25E4%25BE%258B%25E6%258F%2590%25E7%25A4%25BA%25E6%2580%25BB%25E8%25A1%25A8_%25E7%25A7%25BB%25E5%258A%25A8%25E7%25AB%25AF.frm&ref_t=design&ref_c=013c0d02-a48a-4b73-92cb-037a10c45092#/form" style="width: 100%;"></web-view> -->
			</view>
		</view>
		<errorInfo v-else-if="errorText != ''" :errorInfo="errorText" @recall="listenToChild"></errorInfo>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	// import { uuid } from '../../utils';
	import { ref, reactive, getCurrentInstance, inject, computed } from 'vue';
	import { request } from '@/utils/request';
	import tRefresh from '@/components/t-refresh/t-refresh.vue';
	import errorInfo from '@/pages/components/errorInfo.vue';
	// import {
	// 	fileDownload
	// } from '@/common/appUpdate.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const { proxy } = getCurrentInstance();
	const customBar:any = inject('CustomBar');
	const searchImg = ref('../../../static/img/ammsHome/search.png');
	const searchText = ref('');
	let page = 1;
	let totalPage = 0;
	const isOver = ref(false);
	const barIndex = ref(0);
	const pdfImg = ref('../../../static/img/ammsHome/pdf.png');
	const pptImg = ref('../../../static/img/ammsHome/ppt.png');
	const errorText = ref('');
	const detList = ref([]);
	const indexDarList = reactive([
		{ title: '安全周报', code: 0 },
		// { title: '案例提示', code: 1 }
		// { title: '新闻管理', code: 2 }
	]);
	const loadingType = ref(3); // 0.上拉加载更多 1.加载全部 2.上拉加载中 3.不展示
	const loadingText = ref(['上拉或点击加载更多', '已加载全部数据', '加载中', '']);

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

	function init() {
		setTimeout(() => {
			isOver.value = false;
			page = 1;
			detList.value = [];
			if (barIndex.value == 0) {
				getselectappnewspage();
			}
		}, 500)
	}

	//上拉加载更多
	function loadMore() {
		if (totalPage > page) {
			page++;
			getselectappnewspage();
		} else {
			loadingType.value = 1;
			endLoad();
		}
	}
	function endLoad() {
		setTimeout(() => {
			loadingType.value = 3;
		}, 1000);
	}
	//下拉刷新
	function refreshEvent() {
		detList.value = [];
		page = 1;
		getselectappnewspage();
		proxy.$refs.refresh.endRefresh() //结束刷新
	}

	// 安全周报
	function getselectappnewspage() {
		proxy.$refs.loading.open();
		loadingType.value = 2
		request({
			method: 'post',
			url: 'news-selectQualitySafetyPage',
			data: {
				page: page,
				length: 10,
				content: searchText.value ? searchText.value : ''
			},
		}, false, true).then((res : any) => {
			proxy.$refs.loading.close()
			if (res.code == 0) {
				let arr = res.data.records;
				totalPage = res.data.pages;
				if (arr.length == 0) {
					isOver.value = true;
					errorText.value = '暂无数据，请点击图片重试'
				}
				let initData : any = [];
				arr?.map((item : any) => {
					initData.push({
						uploadname: item.uploadname,
						uploadtime: item.uploadtime,
						filetype: item.filetype,
						fileUrl: item.fileUrl
					})
				});

				detList.value = detList.value.concat(initData);
				endLoad();
			}
		}).catch((err : any) => {
			console.log(err)
			proxy.$refs.loading.close()
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
			endLoad();
			errorText.value = typeof(err.errMsg) == 'undefined' ? '系统繁忙，请稍后点击重试' : `${err.errMsg},请点击图片重试。`;
			uni.stopPullDownRefresh();
		});
	}
	// 新闻管理
	function getselectappnewspage1() {
		request({
			method: 'post',
			url: 'news-selectappnewspage',
			data: {
				page: page,
				length: 10,
				content: searchText.value ? searchText.value : ''
			},
		}, false, true).then((res: any) => {
			if (res.code == 0) {
				let arr = res.data.records;

				if (arr.length == 0) {
					isOver.value = true;
				}
				let initData : any = [];
				arr?.map((item : any) => {
					initData.push({
						title: item.title,
						newsDesc: item.newsDesc,
						datePosted: item.datePosted,
						fileurl: item.appNewsFileRecordList.length > 0 ? item.appNewsFileRecordList[0].fileurl : '',
						content: item.content,
						id: item.id,
					})
				});

				detList.value.push(...initData);
			}
			uni.stopPullDownRefresh();
		}).catch((err : any) => {
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
			
			uni.stopPullDownRefresh();
		});
	}
	
	function listenToChild (val: boolean) {
		if (val) {
			getselectappnewspage();
		}
	}

	function searchConfirm() {
		init();
	}

	function detClick(_val : any) {
		if (barIndex.value == 0) {
			proxy.$refs.loading.open();
			if (_val.fileUrl) {
				uni.downloadFile({
					url: _val.fileUrl,
					success: (res) => {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							complete: () => {
								proxy.$refs.loading.close();
							},
							success: (res) => {
								console.log('打开文档成功', res);
							},
							fail: (err) => {
								uni.showToast({
									title: '质量安全周报仅支持在集团内网环境进行下载查看',
									icon: 'none',
									duration: 2500
								});
								console.log(err)
							}
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '质量安全周报仅支持在集团内网环境进行下载查看',
							icon: 'none',
							duration: 2500
						});
						console.log(err);
						proxy.$refs.loading.close();
					}
				});
			}
		} else if (barIndex.value == 2) {
			uni.navigateTo({
				url: `/pages/components/newsDetails?id=${_val.id}`
			})
		}
	}

	function openFn(url : any) {
		window.open(url)
	}

	// function throttle(fn, delay) {
	// 	let timer = null;
	// 	return function () {
	// 		let context = this;
	// 		let args = arguments;
	// 		if (!timer) {
	// 			timer = setTimeout(function () {
	// 				fn.apply(context, args);
	// 				timer = null;
	// 			}, delay);
	// 		}
	// 	}
	// }

	function barClick(_val : any) {
		barIndex.value = _val.code;
	}

</script>

<style lang="less" scoped>
	.refresh-cover {
		position: relative;
		width: 100%;
		height: 80vh;
		.refresh-block {
			width: 100%;
			position: absolute;
			top: 0rpx;
			left: 0;
			bottom: 0px;
			box-sizing: border-box;
			z-index: 50;
			transition: all 0.5s linear;
		
			.refresh-cover {
				height: 100%;
				width: 100%;
			}
		}
	}
	

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

	.container {
		padding: 0rpx 32rpx;
	}

	.head {
		.container {
			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 10rpx 32rpx;
			background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);

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

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

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

			.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;
		}
	}

	.navs {
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		margin-top: 32rpx;
		position: absolute;
		width: 686rpx;

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

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

			.imges {
				width: 88rpx;
				height: 88rpx;
				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: 48rpx;
						height: 48rpx;
					}
				}
			}

			.name {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #444D54;
				margin-top: 18rpx;
			}

		}
	}


	.scroll-Y {
		height: 100%;
	}

	.details_list {
		background: #ffffff;
		padding: 20rpx 0rpx;
		padding-bottom: 100rpx;
		.ul {
			.li {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #DDDDDD;
				padding-bottom: 32rpx;
				margin-bottom: 31rpx;

				.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;
	}

	.index_bar {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 32rpx;
		border-bottom: 2rpx solid #cccccc;
		padding-bottom: 10rpx;

		.item {
			margin-right: 40rpx;
			padding-bottom: 10rpx;
			border-bottom: 4rpx solid transparent;
		}

		.active {
			padding-bottom: 10rpx;
			border-bottom: 4rpx solid #0E57FF !important;
		}
	}

	.heads {

		background: #F2F6F9;
		position: fixed;
		z-index: 1;
		left: var(--window-left);
		right: var(--window-right);
	}

	.placeholder {
		height: 7rem;
	}
</style>