<template>
	<view class="main">
		<view class="toptitle">
			<view class="toptitle_left" @click="ht">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="toptitle_title">
				设备资料
			</view>
		</view>
		<view class="" style="padding: 10px;background-color: #fff;border-radius: 5px;margin-bottom: 15px;">
			<u-subsection :list="list" fontSize="14" activeColor="#0052D8" :current="current" @change='change'></u-subsection>
		</view>
		<view class="box" v-if="current == 0">
			<view class="tips">
				<view class="tip">
				</view>
				<view class="tiptitle">
					基础资料
				</view>
			</view>
			<view class="box_item">
				<view class="f1">设备名称</view>
				<view class="f2">{{info.zlm}}</view>
			</view>
			<view class="box_item" >
				<view class="f1">资产编码</view>
				<view class="f2">{{info.sbbh == null ? '' : info.sbbh}}</view>
			</view>
			<view class="box_item">
				<view class="f1">出厂编号</view>
				<view class="f2">{{info.ccbh == null ? '' : info.ccbh}}</view>
			</view>
			<view class="box_item">
				<view class="f1">出厂日期</view>
				<view class="f2">{{info.ccrq == null ? '' : timestampToTime(info.ccrq)}}</view>
			</view>
			<view class="box_item">
				<view class="f1">规格型号</view>
				<view class="f2">{{info.gg == null ? '' : info.gg}}</view>
			</view>
			<view class="box_item">
				<view class="f1">所属设备</view>
				<view class="f2">{{info.zlm == null ? '' : info.zlm}}</view>
			</view>
			<view class="box_item">
				<view class="f1">设备分类</view>
				<view class="f2">{{info.fl1 == null ? '' : info.fl1}}</view>
			</view>
			<view class="box_item" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 15px;">设备信息</view>
				<view class="f2" v-if="getDeviceInfo()" v-html="getDeviceInfo()" style="width: 100%;word-wrap: break-word;overflow-wrap: break-word;line-height: 1.6;">
				</view>
				<view class="f2" v-else style="color: #969696;">
					无
				</view>
			</view>
			<view class="box_item">
				<view class="f1">设备图号</view>
				<view class="f2">{{info.th == null ? '' : info.th}}</view>
			</view>
			<view class="box_item" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 15px;">设备图片</view>
			</view>
			<view class="f2" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: -50rpx;padding: 20rpx;">
				<image style="width: 100%;margin-bottom: 20rpx;" v-for="item in info.xctp" :src="base_url + item.url" mode="widthFix"></image>
			</view>
		</view>
		<view class="box1" v-if="current == 1">
			<view class="tips">
				<view class="tip">
				</view>
				<view class="tiptitle">
					技术资料
				</view>
			</view>
			<view class="box_item1" v-for="(item, index) in info.jszl" :key="index">
				<view class="left">
					<view class="left_image">
						<image v-if="item.type == 'pdf'" src='../../../static/PDF.png' mode=""></image>
						<image v-if="item.type == 'doc' || item.type == 'docx'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'xlsx' || item.type == 'xls'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg'" src='../../../static/img/picture.png' mode=""></image>
						<u-icon v-if="isVideoType(item.type)" name="play-circle-fill" color="#0052D8" size="40"></u-icon>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							{{item.name}}
						</view>
						<!-- <view class="l_title_f2">
							2024-11-13 12:09:21
						</view> -->
					</view>
					
				</view>
				<view class="right">
					<view @click="previewFile(item)">
						<u-button size="small" type="primary" text="查看"></u-button>
					</view>
				</view>
			</view>
			
			<!-- <view class="box_item1">
				<view class="left">
					<view class="left_image">
						<image src='../../../static/PDF.png' mode=""></image>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							用户手册
						</view>
						<view class="l_title_f2">
							2024-11-07 12:09:21
						</view>
					</view>
					
				</view>
				<view class="right" @click="ylwj">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view> -->
			<!-- <view class="box_item1">
				<view class="left">
					<view class="left_image">
						<image src='../../../static/WORD.png' mode=""></image>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							说明书
						</view>
						<view class="l_title_f2">
							2024-11-07 12:09:21
						</view>
					</view>
					
				</view>
				<view class="right" @click="ylwj">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view> -->
			<!-- <view class="box_item1">
				<view class="left">
					<view class="left_image">
						<image src='../../../static/PDF.png' mode=""></image>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							领备清单
						</view>
						<view class="l_title_f2">
							2024-11-07 12:09:21
						</view>
					</view>
					
				</view>
				<view class="right" @click="ylwj">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view> -->
			<!-- <view class="box_item1">
				<view class="left">
					<view class="left_image">
						<image src='../../../static/WORD.png' mode=""></image>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							工具清单
						</view>
						<view class="l_title_f2">
							2024-11-07 12:09:21
						</view>
					</view>
					
				</view>
				<view class="right" @click="ylwj">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view> -->
		</view>
		<view class="box1" v-if="current == 2">
			<view class="tips">
				<view class="tip">
				</view>
				<view class="tiptitle">
					质量资料
				</view>
			</view>
			<view class="box_item1" v-for="(item, index) in info.zlzl" :key="index">
				<view class="left">
					<view class="left_image">
						<image v-if="item.type == 'pdf'" src='../../../static/PDF.png' mode=""></image>
						<image v-if="item.type == 'doc' || item.type == 'docx'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'xlsx' || item.type == 'xls'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg'" src='../../../static/img/picture.png' mode=""></image>
						<u-icon v-if="isVideoType(item.type)" name="play-circle-fill" color="#0052D8" size="40"></u-icon>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							{{item.name}}
						</view>
						<!-- <view class="l_title_f2">
							2024-11-13 12:09:21
						</view> -->
					</view>
					
				</view>
				<view class="right">
					<view @click="previewFile(item)">
						<u-button size="small" type="primary" text="查看"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="box1" v-if="current == 3">
			<view class="tips">
				<view class="tip">
				</view>
				<view class="tiptitle">
					其他资料
				</view>
			</view>
			<view class="box_item1" v-for="(item, index) in info.qtzl" :key="index">
				<view class="left">
					<view class="left_image">
						<image v-if="item.type == 'pdf'" src='../../../static/PDF.png' mode=""></image>
						<image v-if="item.type == 'doc' || item.type == 'docx'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'xlsx' || item.type == 'xls'" src='../../../static/WORD.png' mode=""></image>
						<image v-if="item.type == 'png' || item.type == 'jpg' || item.type == 'jpeg'" src='../../../static/img/picture.png' mode=""></image>
						<u-icon v-if="isVideoType(item.type)" name="play-circle-fill" color="#0052D8" size="40"></u-icon>
					</view>
					<view class="l_title">
						<view class="l_title_f1">
							{{item.name}}
						</view>
						<!-- <view class="l_title_f2">
							2024-11-13 12:09:21
						</view> -->
					</view>
					
				</view>
				<view class="right">
					<view @click="previewFile(item)">
						<u-button size="small" type="primary" text="查看"></u-button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import viewRecordMixin from '@/common/mixins/viewRecordMixin.js'
	export default {
		mixins: [viewRecordMixin],
		data() {
			return {
				list: ['基础资料','技术资料', '质量资料','其他资料'],
				current: 0,
				info:{},
				base_url:"https://hhjj.antissoft.com"
			}
		},
		onLoad() {
			// 先从存储中获取基本信息
			const storedInfo = JSON.parse(uni.getStorageSync('zlxx'))
			this.info = storedInfo || {}
			
			// 通过 API 获取完整数据（包含设备信息 sbjs 字段）
			if(this.info.id){
				this.API.hqzlglxq({id: this.info.id}).then(res => {
					if(res && res.data){
						// 合并数据，优先使用 API 返回的完整数据
						this.info = res.data
						// 处理附件字段
						this.processAttachments()
						this.startViewTracking(this.info.id, '资料管理', this.info.zlm, this.info.zlm)
					}
				}).catch(err => {
					console.error('获取资料管理详情失败:', err)
					// API 失败时使用存储的数据
					this.processAttachments()
				})
			} else {
				// 如果没有 id，直接处理存储的数据
				this.processAttachments()
				if (this.info.id) this.startViewTracking(this.info.id, '资料管理', this.info.zlm, this.info.zlm)
			}
		},
		methods: {
			// 判断是否为视频类型
			isVideoType(type) {
				const videoTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm', 'mpeg', 'mpg', 'flv', '3gp'];
				return videoTypes.includes((type || '').toLowerCase());
			},
			// 判断是否为图片类型
			isImageType(type) {
				const imageTypes = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
				return imageTypes.includes((type || '').toLowerCase());
			},
			// 判断是否为PDF类型
			isPdfType(type) {
				return (type || '').toLowerCase() === 'pdf';
			},
			// 统一文件预览方法
			previewFile(item) {
				const fileUrl = this.base_url + item.url;
				const fileType = (item.type || '').toLowerCase();
				
				// 图片预览
				if (this.isImageType(fileType)) {
					uni.previewImage({
						current: 0,
						urls: [fileUrl]
					});
					return;
				}
				
				// PDF预览
				if (this.isPdfType(fileType)) {
					uni.setStorageSync('wjurl', fileUrl);
					uni.navigateTo({
						url: '/pages/pdf/pdf'
					});
					return;
				}
				
				// 视频预览
				if (this.isVideoType(fileType)) {
					uni.setStorageSync('videoUrl', fileUrl);
					uni.setStorageSync('videoName', item.name || '视频');
					uni.navigateTo({
						url: '/pages/new/zlgl/video-preview'
					});
					return;
				}
				
				// 其他文件类型（Word、Excel等）提示不支持在线预览
				uni.showToast({
					title: '该文件类型暂不支持在线预览',
					icon: 'none',
					duration: 2000
				});
			},
			processAttachments() {
				// 统一处理字段名大小写问题（后端可能返回大写开头的字段）
				if(this.info.Sbjs && !this.info.sbjs){
					this.info.sbjs = this.info.Sbjs
				}
				
				if(this.info.Fj2 != null && this.info.Fj2 != '' && this.info.Fj2 != undefined){
					if(typeof this.info.Fj2 === 'string'){
						this.info.Fj2 = JSON.parse(this.info.Fj2)
					}
					if(Array.isArray(this.info.Fj2) && this.info.Fj2.length > 0){
						for(let i = 0;i < this.info.Fj2.length;i++){
							if(this.info.Fj2[i].url){
								this.info.Fj2[i].type = this.info.Fj2[i].url.substring(this.info.Fj2[i].url.lastIndexOf('.') + 1)
							}
						}
					}
				}
				
				if(this.info.jszl != null && this.info.jszl != '' && this.info.jszl != undefined){
					if(typeof this.info.jszl === 'string'){
						this.info.jszl = JSON.parse(this.info.jszl)
					}
					if(Array.isArray(this.info.jszl) && this.info.jszl.length > 0){
						for(let i = 0;i < this.info.jszl.length;i++){
							if(this.info.jszl[i].url){
								this.info.jszl[i].type = this.info.jszl[i].url.substring(this.info.jszl[i].url.lastIndexOf('.') + 1)
							}
						}
					}
				}
				
				if(this.info.qtzl != null && this.info.qtzl != '' && this.info.qtzl != undefined){
					if(typeof this.info.qtzl === 'string'){
						this.info.qtzl = JSON.parse(this.info.qtzl)
					}
					if(Array.isArray(this.info.qtzl) && this.info.qtzl.length > 0){
						for(let i = 0;i < this.info.qtzl.length;i++){
							if(this.info.qtzl[i].url){
								this.info.qtzl[i].type = this.info.qtzl[i].url.substring(this.info.qtzl[i].url.lastIndexOf('.') + 1)
							}
						}
					}
				}
				
				if(this.info.zlzl != null && this.info.zlzl != '' && this.info.zlzl != undefined){
					if(typeof this.info.zlzl === 'string'){
						this.info.zlzl = JSON.parse(this.info.zlzl)
					}
					if(Array.isArray(this.info.zlzl) && this.info.zlzl.length > 0){
						for(let i = 0;i < this.info.zlzl.length;i++){
							if(this.info.zlzl[i].url){
								this.info.zlzl[i].type = this.info.zlzl[i].url.substring(this.info.zlzl[i].url.lastIndexOf('.') + 1)
							}
						}
					}
				}
				
				if(this.info.xctp != null && this.info.xctp != '' && this.info.xctp != undefined){
					if(typeof this.info.xctp === 'string'){
						this.info.xctp = JSON.parse(this.info.xctp)
					}
					if(Array.isArray(this.info.xctp) && this.info.xctp.length > 0){
						for(let i = 0;i < this.info.xctp.length;i++){
							if(this.info.xctp[i].url){
								this.info.xctp[i].type = this.info.xctp[i].url.substring(this.info.xctp[i].url.lastIndexOf('.') + 1)
							}
						}
					}
				}
				
				console.log("info",this.info);
				console.log('设备信息字段 sbjs:', this.info.sbjs);
			},
			getDeviceInfo() {
				// 获取设备信息，支持大小写兼容
				const sbjs = this.info.sbjs || this.info.Sbjs;
				if (sbjs != null && sbjs != '' && sbjs != undefined) {
					return sbjs;
				}
				return null;
			},
			timestampToTime(timestamp) {
				console.log("timestamp",timestamp);
			    const date = new Date(timestamp); //时间戳为10位需*1000，13位不需乘
			    const Y = date.getFullYear() + '-';
			    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			    
			    return Y + M + D + h + m + s;
			},
			change(e){
				console.log(e);
				this.current = e
			},
			ht(){
				uni.navigateBack({
				    delta: 1
				});
			},
			cktp() {
				uni.previewImage({
					urls: ["http://115.29.210.249/tggPic/content/2021-09/1630475389708.jpg"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-subsection--button{
		height: 50px;
	}
	.main {
		padding-top: 87px; // 标题栏80px + 间距7px
		background-color: #F8F8F8;
		min-height: 100vh;
		.toptitle{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #0052D8;
			display: flex;
			height: 80px;
			justify-content: center;
			align-items: center;
			z-index: 200;
			.toptitle_left{
				padding-top: 20px;
				position: absolute;
				left: 10px;
				z-index: 1000;
			}
			.toptitle_title{
				color: #fff;
				font-size: 14px;
				padding-top: 20px;
			}
		}
		.title {
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 10px;
			background-color: #fff;
		}

		.box {
			border-radius: 5px;
			margin-bottom: 10px;
			background-color: #fff;
			
			.tips{
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				border-bottom: 1px solid #E9E9E9;
				padding: 15px 10px;
				
				.tip{
					width: 7px;
					height: 20px;
					background-color: #0052D8;
					margin-right: 10px;
				}
				.tiptitle{
					font-size: 17px;
				}
			}
			
			.box_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				margin-bottom: 20px;
				// border-bottom: 1px dashed #ccc;
				.f1 {
					font-size: 16px;
				}
				.f2{
					color:#969696;
					font-size: 16px;
				}
				.f3{
					color: #38beff;
					border-bottom: 1px solid #38beff;
				}
			}
		}
		.box1{
			background-color: #fff;
			.tips{
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				border-bottom: 1px solid #E9E9E9;
				padding: 15px 10px;
				
				.tip{
					width: 7px;
					height: 20px;
					background-color: #0052D8;
					margin-right: 10px;
				}
				.tiptitle{
					font-size: 17px;
				}
			}
			.box_item1{
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
				.left{
					display: flex;
					align-items: center;
					flex: 1;
					.left_image{
						margin-right: 15px;
						image{
							width: 40px;
							height: 40px;
						}
					}
					.l_title{
						flex: 1;
						.l_title_f1{
							font-size: 15px;
							margin-bottom: 5px;
							width: 50vw;
							overflow:hidden; //超出的文本隐藏
							text-overflow:ellipsis; //溢出用省略号显示
							white-space:nowrap; //溢出不换行
						}
						.l_title_f2{
							font-size: 13px;
							color: #969696;
						}
					}
				}
				.right{
					min-width: 80px;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}
</style>