<template>
	<view class="fullHeight">
		<headers class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				方案详情
			</view>
		</headers>
		<view class="sp-menu">
			<view class="items-box">
				<view class="item-box">
					<view>
						装置/单元工程：
					</view>
					<view>
						{{constructionInfo.deviceUnitName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						装置/单元号：
					</view>
					<view>
						{{constructionInfo.deviceUnitNo}}
					</view>
				</view>
				<view class="item-box">
					<view>
						方案名称：
					</view>
					<view>
						{{constructionInfo.constructionName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						承包方式：
					</view>
					<view>
						{{constructionInfo.contractingType ? contractingTypeList[constructionInfo.contractingType - 1].contractingName : '--' }}
					</view>
				</view>
				<view class="item-box">
					<view>
						区域项目组：
					</view>
					<view>
						{{constructionInfo.projectGroupName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						工程监理单位：
					</view>
					<view>
						{{constructionInfo.supervisingUnitName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						工程承包商：
					</view>
					<view>
						{{constructionInfo.epcContractorName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						工程分包商：
					</view>
					<view>
						{{constructionInfo.constructionUnitName}}
					</view>
				</view>
				<view class="item-box">
					<view>
						技术文件类型：
					</view>
					<view>
						{{constructionInfo.technicalDocumentType ?
                                    techniqueFileTypeList[constructionInfo.technicalDocumentType - 1].fileName : '--'}}
					</view>
				</view>
				<view class="item-box">
					<view>
						方案类型：
					</view>
					<view>
						{{ constructionInfo.schemeType ? schemeTypeList[constructionInfo.schemeType - 1].title : '--'}}
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;" class="headerName">
				方案附件
			</view>
			<view class="rules-box" v-for="(item,index) in dataList" :key="item.url">
				<image :src="item.url" v-if="fileTypeCondition(item.url)"></image>
				<image src="@/static/images.png" v-else></image>
				<view>
					<view class="rules-text1">
						<text>{{item.name}}</text>
						<!-- <text>{{item.name}}</text> -->
					</view>
					<view class="rules-text2">
						<view v-if="constructionInfo.isReview == 1" @click="downLoadFile(item,2,index)">
							<image class="scheme_icon" src="@/static/preview.png"></image>
							预览
						</view>
						<view v-if="constructionInfo.isDownload == 1" @click="downLoadFile(item,1,index)">
							<image class="scheme_icon" src="@/static/download2.png"></image>
							下载
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isJSON
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				dataList: [],
				projectSn: "",
				userInfo: "",
				options: {
					id: "",
					deviceUnitId: "",
				},
				constructionInfo: {},
				contractingTypeList: [{
					id: 1,
					contractingName: "EPC",
				}, {
					id: 2,
					contractingName: "E+P+C",
				}], // 承包方式
				techniqueFileTypeList: [{
					id: 1,
					fileName: "一般施工技术方案",
				}, {
					id: 2,
					fileName: "施工技术措施",
				}], // 技术文件类型
				schemeTypeList: [{
					id: 1,
					title: "施工组织设计或重大施工方案",
				}, {
					id: 2,
					title: "一般性施工方案",
				}], // 方案类型
			}
		},
		onLoad(option) {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.options = option;
			console.log(option)
			this.getConstructionPlanLedgerQueryById();
		},
		methods: {
			getConstructionPlanLedgerQueryById() {
				let that = this;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/constructionPlanLedger/queryById',
					method: 'get',
					data: {
						projectSn: this.projectSn,
						id: this.options.id,
						deviceUnitId: this.options.deviceUnitId,
					},
					success: res => {
						console.log(res.result);
						that.constructionInfo = res.result;
						that.dataList= isJSON(res.result.schemeAttachment) ? JSON.parse(res.result.schemeAttachment) : [];
					}
				})
			},
			fileTypeCondition(file) {
				// 获取文件后缀名
				const extension = file.substring(file.lastIndexOf('.') + 1).toLowerCase();

				// 常见的图片文件后缀名
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];

				// 检查文件后缀名是否在图片后缀名数组中
				return imageExtensions.includes(extension);
			},
			downLoadFile(val, type, index) {
				// let url = this.url_config + 'image/' + val.logoUrl
				let that = this;
				let url = val.url
				console.log(val)
				uni.showLoading({
					icon: 'loading',
					title: type == 1 ? '下载中...' : '预览中...'
				});
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						if (type == 1) {
							//文件保存到本地
							// console.log(navigator && navigator.userAgent && /Mobi|Android|iPhone/i.test(navigator.userAgent))
							uni.hideLoading();
							if (navigator && navigator.userAgent && /Mobi|Android|iPhone/i.test(navigator
									.userAgent)) {
								console.log("111")
								window.open(filePath, "_blank");
								return
							}
							console.log("222")
							uni.saveFile({
								tempFilePath: filePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									// setTimeout(() => {
									// 	//打开文档查看
									// 	uni.openDocument({
									// 		filePath: res.savedFilePath,
									// 		success: function(res) {
									// 			// console.log('打开文档成功');
									// 		}
									// 	});
									// }, 3000)
								}
							});
						}
						if (type == 2) {
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log('打开文档成功');
									uni.hideLoading();
									that.dataList[index].isFileOver = true;
									console.log(that.dataList);
								}
							});
						}
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.headerName {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background-color: #2B8DF3;
		color: white;
		font-size: 32rpx;
	}
	.scheme_icon:first-child {
		margin-right: 4rpx;
	}

	.scheme_icon {
		width: 44rpx !important;
		height: 44rpx !important;
	}

	.rules-box {
		display: flex;
		margin-top: 10rpx;
		padding: 13.46rpx 28.85rpx 17.31rpx 23.08rpx;
		border-top: 2rpx solid #D8DBE8;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(81, 129, 246, 0.12);
	}

	.rules-box image {
		width: 61.15rpx;
		height: 70.77rpx;
	}

	.rules-box>view {
		display: flex;
		justify-content: space-between;
		flex: 1;
	}

	.rules-text1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 13.46rpx;
		width: 400rpx;
	}

	.rules-text1>text {
		font-size: 25rpx;
		line-height: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.rules-text2 {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #5181F6;
		font-size: 24rpx;
		white-space: nowrap;

		>view {
			display: flex;
			align-items: center;
		}

		>view:last-child {
			margin-left: 10rpx;
		}
	}

	.fullHeight {
		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;
		}

		.sp-menu {
			padding-top: 100rpx;

			.items-box {
				display: flex;
				flex-direction: column;

				.item-box {
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #F6F6F6;
					padding: 20rpx 0;

					>view:first-child {
						margin-left: 38rpx;
					}

					>view:last-child {
						margin-right: 38rpx;
					}
				}
			}
		}
	}
</style>