<template>
	<view class="card-group">
		<u-popup :show="showEquip" mode="bottom" :closeable="closeableEquip" @open="openPopupEquip"
			@close="closePopupEquip">
			<ly-tree :tree-data="treeData" :ready="ready" node-key="id" :props="props"
				:expandOnClickNode="expandOnClickNode" @node-click="handleNodeClick"></ly-tree>
		</u-popup>
		<u-popup :show="showDrawing" mode="bottom" :closeable="closeableDrawing" @open="openPopupDrawing"
			@close="closePopupDrawing">
			<u-collapse style="margin-top: 40px;">
				<u-collapse-item :title="item.fileName" :isLink="isLink" :disabled="disabled"
					v-for="(item,index) in itemDrawingList">
					<text v-if="!item.localHave" style="color: #1771f7;" slot="value"
						class="u-page__item__title__slot-title"
						@click="downloadDrawing(item.fileName,item.url,index)">下载</text>
					<text v-if="item.localHave" style="color: #1771f7;" slot="value" @click="openDrawing(item.fileName)"
						class="u-page__item__title__slot-title">打开</text>
				</u-collapse-item>
			</u-collapse>
		</u-popup>
		<u-button :disabled="isJump" @click="showEquip = true">{{equipName}}</u-button>
		<view class="card-group" v-if="total === 0">
			<leruge-empty text="暂无数据" type="minus"></leruge-empty>
		</view>
		<view class="cu-card dynamic" v-if="total != 0" v-for="(item,index) in drawingList" :key="index">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub card-title">
							<view>{{item.drawingName}}</view>
							<button @click="clickDownload(item.equipDrawingPath)" class="label-btn" size="mini"
								style="background: #1771f7;color: #FFF;">下载图纸</button>
						</view>
					</view>
				</view>
				<view class="content-container">
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">图纸编号: {{item.drawingNum}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">所属设备: {{item.equipName}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">上传时间: {{item.createTime}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">备注: {{item.remark}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="finished == true" class="loading-tip">{{ tipText }}</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl

	import {
		getEquipTree
	} from "@/api/equip/equip.js"

	import {
		listDrawing
	} from "@/api/drawing/drawing.js"

	export default {
		data() {
			return {
				isJump: false,
				disabled: true,
				isLink: false,
				showDrawing: false,
				//是否显示关闭按钮
				closeableDrawing: true,
				expandOnClickNode: false,
				//是否显示关闭按钮
				closeableEquip: true,
				//是否显示弹窗
				showEquip: false,
				//树形结构数据
				treeData: [],
				ready: false,
				//加载到最后一条
				finished: false,
				tipText: "正在加载...",
				total: 0,
				drawingList: [],
				props: function() {
					return {
						label: 'equipName',
						children: 'childList'
					}
				},
				equipId: null,
				equipName: "选择设备",
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				itemDrawingList: [],
			}
		},
		onShow() {
			this.drawingList = [];
			this.queryParams = {
				pageNum: 1,
				pageSize: 10
			};
			this.getDrawingList();
		},
		onLoad(opts) {
			if (opts.equipId != null && opts.equipId != '') {
				this.equipId = opts.equipId;
				this.equipName = opts.equipName;
				this.isJump = true;
			}
		},
		onReachBottom() {
			const allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
			if (allTotal < this.total) {
				this.queryParams.pageNum += 1;
				this.getDrawingList();
			} else {
				this.finished = true;
				this.tipText = "已加载完成";
			}
		},
		methods: {
			//打开文件
			openDrawing(fileName) {
				// 判断当前环境是否为App环境
				if (this.$scope.$mp && this.$scope.$mp.runtime && this.$scope.$mp.runtime === 'app-plus') {
					// 在App环境中调用plus.io.getRoot()获取根目录
					plus.io.getRoot((root) => {
						console.log('App根目录：' + root);
					});
				} else {
					console.log('当前不是App环境，无法获取根目录');
				}
				console.log(fileName)
				let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
				console.log(fileType)
				uni.openDocument({
					showMenu: true,
					fileType: fileType,
					filePath: 'file://storage/emulated/0/Android/data/com.inspur.ipcApp/apps/__UNI__B298C37/downloads/storage/ipcApp/' +
						fileName,
					success: function(res) {
						console.log(res, "打开文件成功");
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							title: "打开文件失败请重试",
							icon: "none",
						});
					},
				});
			},
			//本地无文件--下载并打开文件
			downloadDrawing(name, url, index) {
				let progressVal = 0;
				let that = this
				uni.showLoading({
					title: '正在下载……'
				});
				let dtask = plus.downloader.createDownload(url, {
					// filename: 'file://storage/ipcApp/' + name
					filename: 'file://storage/ipcApp/' + name
				}, function(d, status) {
					uni.hideLoading();
					if (status == 200) {
						uni.$u.toast('下载成功')
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						console.log(fileSaveUrl)
						that.itemDrawingList[index].localHave = true;
					} else {
						uni.$u.toast('下载失败')
						plus.downloader.clear();
					}
				});
				dtask.start();
			},
			clickDownload(paths) {
				this.itemDrawingList = [];
				if (paths != null && paths != '') {
					let list = paths.split(",");
					list.forEach((item, index) => {
						let fileName = item.substring(item.lastIndexOf("/") + 1)
						const self = this;
						// // 假设你想检查的文件路径是_local://hello.txt_
						// let filePath = 'file://storage/ipcApp/' + fileName;
						// // 使用plus.io的resolveLocalFileSystemURL方法
						// plus.io.resolveLocalFileSystemURL(filePath,
						// 	function(entry) {
						// 		// 文件存在的回调
						// 		console.log("文件存在: " + entry.fullPath);
						// 		let drawing = {
						// 			url: baseUrl + item,
						// 			fileName: fileName,
						// 			localHave: true
						// 		}
						// 		self.itemDrawingList.push(drawing)
						// 	},
						// 	function(error) {
						// 		// 文件不存在的回调
						// 		console.log("文件不存在: " + filePath);
						// 		let drawing = {
						// 			url: baseUrl + item,
						// 			fileName: fileName,
						// 			localHave: false
						// 		}
						// 		self.itemDrawingList.push(drawing)
						// 	}
						// );
						uni.getFileInfo({
							filePath: 'file://storage/emulated/0/Android/data/com.inspur.ipcApp/apps/__UNI__B298C37/downloads/storage/ipcApp/' +
								fileName,
							success(res) {
								let drawing = {
									url: baseUrl + item,
									fileName: fileName,
									localHave: true
								}
								self.itemDrawingList.push(drawing)
							},
							fail(err) {
								let drawing = {
									url: baseUrl + item,
									fileName: fileName,
									localHave: false
								}
								self.itemDrawingList.push(drawing)
							}
						})
					})
				}
				this.showDrawing = true;
			},
			openPopupDrawing() {

			},
			closePopupDrawing() {
				this.showDrawing = false;
				this.itemDrawingList = []
			},
			openPopupEquip() {
				this.getEquipList();
			},
			closePopupEquip() {
				this.showEquip = false;
			},
			getEquipList() {
				this.ready = false;
				this.treeData = [{
					"id": null,
					"equipName": "所有设备"
				}];
				getEquipTree().then((res) => {
					this.treeData = this.treeData.concat(res);
					this.ready = true;
				})
			},
			handleNodeClick(obj) {
				this.equipName = obj.label;
				this.equipId = obj.key;
				this.showEquip = false;
				this.drawingList = [];
				this.getDrawingList();
			},
			getDrawingList() {
				this.finished = true;
				this.queryParams.equipId = this.equipId;
				listDrawing(this.queryParams).then((res) => {
					this.finished = false;
					this.drawingList = this.drawingList.concat(res.rows);
					this.total = res.total;
				})
			},
		}
	}
</script>

<style>
	/* 卡片的样式 start */
	.card-group .cu-card .cu-item {
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.card-group .card-title {
		left: 20px !important;
		color: #333;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		width: calc(100% - 20px) !important;
	}

	.card-group .card-title .label-btn {
		margin: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		letter-spacing: 1px;
	}

	.card-group .cu-list.menu-avatar>.cu-item {
		height: 50px;
	}

	.card-group .cu-list.menu-avatar>.cu-item:after {
		border-bottom: none !important;
	}

	.card-group .content-container {
		padding-left: 20px;
		color: #909399;
		margin-bottom: 6px;
	}

	.card-group .content-container .text-content .iconfont {
		font-size: 16px;
		margin-right: 4px;
	}

	.card-group .content-container .text-content .text-description {
		font-size: 14px;
	}

	.card-group .text-bottom {
		margin: 0 20px;
		border-top: 1px dotted #aaa;
		padding: 6px 0;
	}

	/* 卡片的样式 end */

	/* 下拉加载提示字的样式 end */
	.loading-tip {
		font-size: 12px;
		color: #666;
		padding-bottom: 12px;
		text-align: center;
	}
</style>