<!-- 默认复制 -->

<template>
	<view class="content">
		<u-loading-page style="z-index: 999" bg-color="#e8e8e8" loading-mode="semicircle"
			:loading="isLoading"></u-loading-page>
		<VNavigationBar style="position: relative;z-index: 99;" homeHeaderPaddingTop="0" backgroundColor="#fff"
			title-color="#000" title="资料管理" :onBack="getback"></VNavigationBar>

		<view class="searchContent">
			<view class="t-input">
				<uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
				<input type="text" v-model="fileName" placeholder="请输入文件名称.....">
			</view>
			<view class="sou" @click="getlist()">搜索</view>
		</view>
		<view class="c-box" @click="addwenjian()" v-if="isHasRole">
			<!-- <view class="">
          <image src="../../static/imgs/wenjianjia.png" mode=""></image>
        </view> -->
			<view style="width: 100%; display: flex;justify-content: center;">
				<text> + 新增文件</text>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 210px)" @refresherrefresh="refreshList"
			:refresher-triggered="refresherTriggered" refresher-enabled>
			<view class="cont">
				<view class="bjimg" v-if="arrlist == ''">
					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
				</view>
				<view class="wrap-box">

					<view class="w-box" v-for="(item,index) in arrlist" :key="index">
						<view class=" wimg" v-if="item.type=='1'" @click="enrtryFile(item.id)">
							<image src="/static/icons/internal/file/folder.png" mode=""></image>
						</view>
						<view class="wimg" v-else>
							<image src="/static/icons/internal/file/file.png" mode="" v-if="!item.isImage"></image>
							<!--            <image :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else></image>-->
							<image :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
								v-else>
							</image>
						</view>
						<view class="file-name">{{ item.fileName }}</view>
						<view class="" v-if="item.warnTime">{{ item.warnTime }}</view>
						<view class="" v-if="!item.warnTime" style=" visibility: hidden;">{{ '1' }}</view>
						<!--          <view class="" v-if="item.count">文件数:{{ item.count }}</view>-->
						<view class="" v-if="!item.count" style=" visibility: hidden;">{{ '1' }}</view>
						<view class="bsd-dis">
							<view class="bianji" v-if="item.type == '2'" @click="viewFile(item.filePath)">预览</view>
							<view class="bianji" @click="editFile(item.id)" v-if="isHasRole">编辑</view>
							<view class="bianji" @click="showHistory(item.id)">历史</view>
							<view class="sanchu" @click="delFile(item.id)" v-if="!item.defaultKey && isHasRole">删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<u-popup :show="isShow" mode="bottom" @close="isShow = false">
			<view>
				<!-- 弹出层 -->
				<view v-if="isShow" class="popup">
					<view class="popup-content">
						<view class="popup-title">修改记录</view>

						<!-- 步骤条 -->
						<view class="steps" v-if="drawerData.length > 0">
							<view v-for="(item, index) in drawerData" :key="index" class="step">
								<view class="step-index">{{ index + 1 }}</view>
								<view class="step-content">
									<text class="step-file-name">📄 文件名称：{{ item.fileName }}</text>
									<text class="step-time">🕒 修改时间：{{ formatDate(item.createTime) }}</text>
									<text class="step-time">🕒
										提醒时间：{{ item.warnTime != null ? formatDate(item.warnTime) : '' }}</text>
									<text class="step-download" @click="viewFile(item.filePath)"
										v-if="item.type == '2'">📂
										预览文件</text>
								</view>
							</view>
						</view>
						<view v-else>
							暂无历史记录
						</view>

						<!--            <button class="close-btn" @click="isShow = false">关闭</button>-->
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import request from "@/utils/request";
	import {
		formatDate
	} from "@/utils/utils";
	import VNavigationBar from "@/components/VNavigationBar.vue";

	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
				arrlist: [],
				fileId: null,
				pageNum: 1, //第几页
				pageSize: 20, //一页多少张
				totalPages: 0, //总数
				nowFile: {},
				fileName: null,
				isShow: false,
				drawerData: [],
				isLoading: false,
				imageUrl: config.imagesUrl + '/',
				isHasRole: false,
				dictType: 'drive_file_role',
				refresherTriggered: false,
			}
		},

		onLoad(data) {
			console.log('传递进来的数据', data)
			if (data.folderId) {
				this.fileId = data.folderId
				this.getlist()
			}
		},
		onShow() {
			this.getlist()
			this.ifHasRole()
		},
		// onBackPress(options) {
		// 	// 点击虚拟键或者侧滑的时候触发（不允许返回）
		// 	if (options.from === 'backbutton') {
		// 		this.getback()
		// 		return true
		// 	}
		// 	// 否则则允许返回
		// 	return false;
		// },

		onReachBottom() {
			// if (this.pageNum >= this.totalPages) {
			//   uni.showToast({
			//     title: '没有下一页数据',
			//     icon: 'none'
			//   })
			//
			// } else {
			//   this.pageNum++
			//   this.getlist()
			// }
		},
		methods: {
			formatDate,
			async getlist(flag) {
				this.isLoading = true
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					fatherId: this.fileId,
					fileName: this.fileName,
					servicePackageId: 'weixiu',
					dictType: 'repair_file_role'
				}
				if (flag) {
					data.fileName = null
				}
				let res = await request({
					url: '/admin-api/inspectionFile/inspectionFile/listByPermission',
					method: 'get',
					data: data
				})
				if (this.pageNum != 1) {
					this.arrlist = this.arrlist.concat(res.data)
				} else {
					this.arrlist = res.data
				}
				let total = res.total
				this.totalPages = Math.ceil(total / this.pageSize);
				this.isLoading = false
				// this.getCountByDirectory()
			},
			ifHasRole() {
				request({
					url: '/admin-api/partnerOwn/partner/ifHasRole',
					method: 'get',
					params: {
						dictType: this.dictType
					}
				}).then((res) => {
					this.isHasRole = res.data
				})
			},
			showHistory(id) {
				this.isShow = true
				this.isShow = true
				request({
					url: '/admin-api/system/fileRecord/get/' + id,
					method: 'get',
				}).then(res => {
					if (res && res.data) {
						this.drawerData = res.data
					}
				})
			},
			getCountByDirectory() {
				if (this.arrlist && this.arrlist.length > 0) {
					const ids = this.arrlist.filter(item => (item.type === '1' && !item.count)).map(item => item.id)
					if (ids && ids.length > 0) {
						request({
							url: '/admin-api/inspectionFile/inspectionFile/getCountByIds?ids=' + ids,
							method: 'get',
						}).then(res => {
							if (res && res.data) {
								const map = new Map(Object.entries(res.data))
								this.arrlist.filter(item => (item.type === '1' && !item.count)).forEach(item => {
									this.$set(item, 'count', map.get(item.id + ''))
								})
							}
						})
					}
				}
			},
			async getback() {
				if (!this.fileId) {
					uni.navigateBack()
				} else {
					let res = await request({
						url: '/admin-api/inspectionFile/inspectionFile/' + this.fileId,
						method: 'get',
					})
					this.nowFile = res.data
					this.arrlist = []
					this.pageNum = 1
					this.fileId = this.nowFile.fatherId
					this.getlist()


				}

			},
			addwenjian() {
				uni.navigateTo({
					url: '/pages-internal/dataManagement/deviceAdd?fileId=' + this.fileId + '&type=add'
					// url: '/pages/internalManagement/dataManagement/deviceAdd?fileId=' + this.fileId + '&type=add'
				})
			},
			enrtryFile(fileId) {
				this.fileId = fileId
				this.arrlist = []
				this.pageNum = 1
				this.getlist(true)
			},
			viewFile(filePath) {
				this.isLoading = true;

				let url = ''
				//判断地址是否包含http如果包含就不拼接前缀
				if (filePath.indexOf('http') === -1) {
					url = this.$baseImageUrl + '/' + filePath
				} else {
					url = filePath
				}
				uni.downloadFile({
					url: url,
					success: (res) => { // 使用箭头函数
						var filePath = res.tempFilePath;
						this.isLoading = false;

						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: (res) => {
								console.log("文件打开成功");
							},
							fail: (err) => {
								console.error("文件打开失败", err);
								uni.showToast({
									title: '文件打开失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error("文件下载失败", err);
					}
				});
			},
			editFile(fileId) {
				uni.navigateTo({
					url: '/pages-internal/dataManagement/deviceAdd?fileId=' + fileId + '&type=edit'
				})
			},
			delFile(fileId) {
				let that = this
				uni.showModal({
					title: '确认',
					content: '是否确认删除',
					success: function(res) {
						if (res.confirm) {
							request({
								url: '/admin-api/inspectionFile/inspectionFile/del/' + fileId,
								method: 'post'
							}).then(res => {
								that.getlist()
							})
						}
					}
				});

			},

			gostaff() {
				uni.navigateTo({
					url: '/pages/manage/staffManage'
				})
			},
			goinformation() {
				uni.navigateTo({
					url: '/pages/manage/informationManage'
				})
			},
			godevice() {
				uni.navigateTo({
					url: '/pages/manage/deviceManage'
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},

			/* async refreshList() {
				if (this.isLoading) return;

				this.pageNum = 1;
				this.refresherTriggered = true;

				try {
					await this.getlist();
				} finally {
					// 关闭刷新状态
					this.refresherTriggered = false;
				}
			}, */
			async refreshList() {
				this.refresherTriggered = true;
				await this.getlist();
				this.refresherTriggered = false;
			}


		},


	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: white;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.top-icon {
		margin-bottom: 45px;
	}

	.q-fab {
		position: fixed;
		bottom: 50px;
		right: 15px;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.fab-z1 {
		position: fixed;
		bottom: 115px;
		right: 15px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.fab-z2 {
		position: fixed;
		bottom: 50px;
		right: 80px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.c-tap {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		background-color: white;
		align-items: center;
	}

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

	.c-title {
		font-size: 18px;
		font-weight: bold
	}

	.cont {
		width: 100%;
		padding: 15px;
		padding-top: 0px;
		box-sizing: border-box;
		background-color: white;

	}

	.hongdian {
		width: 15px;
		height: 15px;
		background-color: crimson;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 5px;
		right: 5px;
		z-index: 9999;
	}

	.c-box {
		width: 90%;
		box-sizing: border-box;
		padding: 10px;
		margin: 10px auto;
		border-radius: 10px;
		display: flex;
		color: white;
		align-items: flex-start;
		color: #0174F6;
		border: 2rpx solid #0174F6;

		font-size: 18px;
		font-weight: bold;

		image {
			width: 30px;
			height: 30px;
			margin-right: 10px;
		}
	}

	.c-b-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.t-left {
		width: 40%;
		height: 100px;
		border-radius: 7px;
		margin-right: 10px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.t-right {
		width: 60%;
	}

	.t-tilte {
		font-size: 20px;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.tw-tilte {
		width: 100%;
		text-align: right;
		font-size: 16px;
		font-weight: bold;
		color: #5e5e5e;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.t-zi {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;

	}

	.bjimg {
		width: 255px;
		height: 236px;
		margin: 0px auto;
		margin-top: 100px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.c-b-bom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
	}

	.b-left {
		color: #0D2E8D;
		font-size: 14px;
	}

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

	.z-lv {
		display: flex;
		align-items: center;
		color: #0D2E8D;
		font-size: 15px;
		margin-right: 10px;
	}

	.y-hong {
		display: flex;
		align-items: center;
		color: #fa3534;
		font-size: 15px;
		margin-right: 15px;
	}

	.z-img {
		width: 20px;
		height: 15px;

		image {
			width: 100%;
			height: 100%;
		}

		margin-right: 2px;
	}

	.tap-box {
		width: 30%;
		text-align: center;
	}

	.gang {
		height: 4px;
		background: #0D2E8D;
		width: 80%;
		margin: 0px auto;
	}

	.lan {
		color: #0D2E8D;
	}

	.top-heder {
		width: 100%;
		height: 98px;
		//background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 15px;
		color: white;
		//margin-top: 2rem;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
	}

	.t-title {
		font-size: 17px;
		font-weight: bold;
		color: white;
	}

	.t-left {
		width: 20%;
		height: 20px;
	}

	.t-you {
		width: 20%;
		height: 20px;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.w-box {
		width: 48%;
		background-color: #F7F8FC;
		margin-top: 10px;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		text-align: center;

	}

	.wimg {
		width: 100%;
		height: 120px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bsd-dis {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}

	.bianji {
		width: 50px;
		height: 24px;
		color: #0D2E8D;

		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}

	.sanchu {
		width: 50px;
		height: 24px;
		color: #FF571A;

		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}

	.t-input {
		width: 75%;
		height: 36px;
		background: #F0F0F0;
		border-radius: 50px;
		box-sizing: border-box;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}

	.sou {
		width: 10%;
		margin-left: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchContent {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	/* 弹出层背景 */
	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	/* 弹出层内容 */
	.popup-content {
		width: 90%;
		background: #fff;
		border-radius: 10px 10px 0 0;
		padding: 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	/* 标题 */
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 15px;
	}

	/* 步骤条 */
	.steps {
		padding: 10px;
	}

	/* 单个步骤 */
	.step {
		display: flex;
		align-items: flex-start;
		margin-bottom: 15px;
	}

	/* 序号样式 */
	.step-index {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		background: #007aff;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		margin-right: 10px;
	}

	/* 步骤内容 */
	.step-content {
		flex: 1;
		background: #f8f8f8;
		padding: 10px;
		border-radius: 5px;
	}

	/* 文字样式 */
	.step-file-name {
		font-size: 16px;
		font-weight: bold;
		display: block;
	}

	.step-time {
		font-size: 14px;
		color: #666;
		display: block;
		margin: 5px 0;
	}

	.step-download {
		font-size: 14px;
		color: #007aff;
		text-decoration: underline;
		cursor: pointer;
	}

	/* 关闭按钮 */
	.close-btn {
		width: 100%;
		padding: 10px;
		background: #007aff;
		color: white;
		text-align: center;
		border-radius: 5px;
		margin-top: 10px;
	}

	.file-name {
		width: 100%;
		/* 重要：需要固定宽度 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 5px;
		/* 根据实际布局调整 */
	}

	.header {
		display: flex;
		padding-top: var(--status-bar-height); //给组件加个上边距
		font-size: 36rpx;
		font-weight: bold;
	}
</style>