<template>
	<view class="desc-dialog">
		<view class="desc-content">
			<view class="title">设备上架操作说明</view>
			<view class="tips">请参考下图进行拍摄设备上架照片</view>
			<view class="flex">
				<view class="text-center">
					<image src="@/static/img/add-img/desc1.png" class="image" style="margin-bottom:6.4px"></image>
					设备所在机柜正面照片
				</view>
				<view class="text-center">
					<image src="@/static/img/add-img/desc2.png" class="image" style="margin: 0 6.4px 6.4px 6.4px;"></image>
					设备所在机柜背面照片
				</view>
				<view class="text-center">
					<image src="@/static/img/add-img/desc3.png" class="image" style="margin-bottom:6.4px"></image>
					设备大图(含资产标识)
				</view>

			</view>
			<view class="subtitle">操作说明：</view>
			<view class="subitem">
				<view>1、设备完成上架后，请按下列示例图要求对上架没备进行拍照操作;</view>
				<view>2、拍照完成后，将PAD连接至专网电脑，进行照片同步;</view>
				<view>3、进入专网侧进行设备上架执行，选择本次上架的设备申请单，将照片与设备进行关联。";</view>
			</view>
			<view class="row-item bottom-row">
				<button class="button" :loading="loading" @click="close('photo')">
					设备上架拍照
				</button>
			</view>

			<!-- 关闭按钮 -->
			<div class="close-button">
				<text class="iconfont icon-shibai1" @click="close('close')"></text>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		SYNCHRONIZE_DATA_PAD,
		checkAndCreateDirectory,
		createFileWithPlusIO,
		setSm2,
		USER_FILE_NAME,
		getUserList,
	} from "@/utils/systemCofig";

	import {
		copyDirectory,
		deleteAllFilesInDirectory,
		addLog,
		getLogContent,
		LOG_TYPE_ENUM,
		writeDeviceData,
		copyImagesToFolder,
	} from "@/utils/IoReadingAndWriting.js";
	import moment from "moment";
	import {
		Base64
	} from "js-base64";

	export default {
		props: {

		},
		components: {},
		data() {
			return {
				loading: false,
			};
		},

		mounted() {},
		watch: {

		},
		methods: {
			close(key) {
					this.$emit("close",key);
			},
			getDetails() {
				this.$emit("getDetails");
			},

			/**
			 * 1.生成两个文件. 机房文件 和  井道文件
			 * 2. 更新巡检数据状态   synchronization 置为 1
			 * 3. 写入数据
			 *  读取上一次打包的文件, 复制到 [ history ] 文件夹中
			 */
			clickHandle() {
				if (this.loading) return;
				this.coverData();
			},
			// 保存图片到指定地址
			copyImages(imagePaths, userName) {
				const targetPath = `${SYNCHRONIZE_DATA_PAD}/设备上架照片/${userName}`;
				console.log("imagePath打包", imagePaths);
				//请空文件夹
				deleteAllFilesInDirectory(targetPath).then(() => {
					// 复制
					copyImagesToFolder(imagePaths, targetPath).then((res) => {
						uni.showToast({
							title: "打包成功",
							icon: "none",
							duration: 1000,
						});
						setTimeout(() => {
							this.loading = false;
							this.close();
							uni.navigateTo({
								url: "/pages/listingManagement/index?backValue=home",
							});
						}, 1000);
					});
				});
			},
			// 处理数据
			coverData() {
				const userName = this.$store.state.now_user.user;
				let syncedData = this.list;
				let imagePaths = this.list.map((user) => user.imgPath);
				// 保存照片
				let timeStr = moment().format("yyyy_MM_DD_hh_mm_ss");
				syncedData.forEach((item) => {
					item.synchronization = true;
					item.selected = false;
					item.status = "已同步";
				});
				console.log("syncedData", syncedData);
				this.loading = true;
				let SBSJ_DATA_FILE_NAME = `${userName}_SBSJ_${timeStr}.txt`;
				const tmepList = this.packedData(syncedData, SBSJ_DATA_FILE_NAME);

				let arr = this.photos.map((item) => {
					// 查找 B 数组中是否有对应的对象
					const updatedItem = syncedData.find((bItem) => bItem.id === item.id);
					// 如果有，则返回 B 数组中的对象，否则返回原对象
					return updatedItem ? updatedItem : item;
				});
				// writeDeviceData(tmepList, userName)
				//   .then((res) => {
				//     console.log("tmepList", tmepList);
				this.$store.commit("SET_DEVICEDATA", arr);
				setTimeout(
					() => {
						let length = arr.length;
						// 生成日志
						const logContent = getLogContent(
							LOG_TYPE_ENUM.sys,
							`${length}张照同步`,
							"同步"
						);
						this.$logApi.addlog(logContent)
						const log_list = this.$store.state.log_list;
						log_list.push(logContent);
						this.$store.commit("SET_LOG_LIST", log_list);
						addLog(log_list).then(() => {});

						// 更新同步时间
						this.updateSysTime();
						this.copyImages(imagePaths, userName);
						// this.getDetails();
					},
					2 * 1000
					// uni.navigateTo({
					//   url: "/pages/listingManagement/index?backValue=home",
					// })
				);
				// })
				//     .catch((error) => {
				//       this.loading = false;

				//       uni.showToast({
				//         title: error,
				//         icon: "none",
				//         duration: 2000,
				//       });
				//     })
				//     .catch(() => {
				//       setTimeout(() => {
				//         uni.showToast({
				//           title: "打包失败",
				//           icon: "none",
				//           duration: 2000,
				//         });
				//         this.loading = false;
				//       }, 2 * 1000);
				//     });
			},

			// 打包文件
			packedData(content, fileName) {
				const fileContent = setSm2(content);

				return createFileWithPlusIO(
					`${SYNCHRONIZE_DATA_PAD}/发送数据`,
					fileName,
					fileContent
				);
			},

			// 更新最近一次同步时间
			updateSysTime() {
				getUserList().then((personList) => {
					const now_user = this.$store.state.now_user;
					const key = personList.findIndex(
						(item) => item.userId == now_user.userId
					);
					// 更新用户同步时间
					const userInfo = personList[key];
					const LastSynchronizationTime = moment().format("yyyy-MM-DD HH:mm");
					personList[key].LastSynchronizationTime = LastSynchronizationTime;
					userInfo.LastSynchronizationTime = LastSynchronizationTime;

					this.$store.commit("SET_USER", userInfo);
					uni.setStorageSync("last_time", userInfo.LastSynchronizationTime || "");

					// 更新用户数据
					const fileContent = JSON.stringify(
						Base64.encode(JSON.stringify(personList))
					);
					uni.setStorage({
						key: "user_data",
						data: JSON.stringify(personList),
						fail: (error) => {
							console.log("APP.vue 存储数据失败", error);
						},
					});
					createFileWithPlusIO(SYNCHRONIZE_DATA_PAD, USER_FILE_NAME, fileContent)
						.then(() => {
							console.log("---用户数据更新成功");
						})
						.catch((error) => {
							console.log("---用户数据更新失败", error);
						});
				});
			},
		},
	};
</script>
<style scoped lang="less">
	.desc-dialog {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.desc-content {
			padding: 3% 20px 32px 24px;
			width: 674px;
			min-height: 515px;
			box-sizing: border-box;
			background-image: linear-gradient(-6deg,
					#f9ffe7 0%,
					#ffffff 12%,
					#fcfeff 73%,
					#ccf1ff 100%);
			border: 0.4px solid rgba(224, 224, 224, 1);
			border-radius: 12px;
			position: relative;

			.image {
				width: 202px;
				height: 186px;
			}

			.title {
				font-family: PingFangSC-Medium;
				font-size: 14.4px;
				color: #000000;
				text-align: center;
				line-height: 26px;
				font-weight: bold;
			}

			.tips {
				font-family: PingFangSC-Regular;
				font-size: 12.8px;
				color: #4A4A4A;
				text-align: center;
				line-height: 19.2px;
				font-weight: 400;
				margin: 12.8px 0 9.6px
			}
			.subtitle{
				font-family: PingFangSC-Medium;
				font-size: 16px;
				color: #4A4A4A;
				line-height: 24px;
				font-weight: 500;
				margin:26px 0 9.6px
				
			}
			.subitem{
				font-family: PingFangSC-Regular;
				font-size: 11.2px;
				color: #7C7C7C;
				line-height: 22px;
				font-weight: 400;
			}
			// 打包按钮
			.bottom-row {
				position: absolute;
				bottom: 24px;
				left: 50%;
				transform: translateX(-50%);

				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
					box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
					border-radius: 27px;
					width: 160px;
					height: 40px;
					color: #fff;
				}
			}

			// 关闭按钮
			.close-button {
				position: absolute;
				bottom: -40px;
				left: 50%;
				transform: translateX(-50%);

				.iconfont {
					font-size: 24px;
				}
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.text-center {
		text-align: center;
	}
</style>