<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.keyword == null ? '无' : info.keyword}}</view>
			</view>
			<view class="box_item">
				<view class="f1">故障代码</view>
				<view class="f2">{{info.code}}</view>
			</view>
			<view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">故障描述：</view>
				<view class="f2" v-html="info.description"></view>
			</view>
			<view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">中文报警文本：</view>
				<view class="f2" v-html="info.zwbjwb || '无'" style="width: 100%;word-wrap: break-word;overflow-wrap: break-word;line-height: 1.6;"></view>
			</view>
			<view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">外部简单描述：</view>
				<view class="f2" v-html="info.wbjdm || '无'" style="width: 100%;word-wrap: break-word;overflow-wrap: break-word;line-height: 1.6;"></view>
			</view>
			<view class="box_item">
				<view class="f1">严重程度</view>
				<view class="f2">
					<view :class="['severity-pill', severityClass(info.yzdcd)]">
						{{ info.yzdcd == null ? '无' : info.yzdcd }}
					</view>
				</view>
			</view>
			<view class="box_item">
				<view class="f1">所属设备</view>
				<view class="f2">{{info.sbmc == null || info.sbmc == '' ? (info.sssb == null ? '无' : info.sssb) : info.sbmc}}</view>
			</view>
			<!-- 隐藏故障核对字段 -->
			<!-- <view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">故障核对：</view>
				<view class="" style="width: 100%;display: flex;gap: 10px;flex-wrap: wrap;">
					<image @click="cktp(item.url)" style="width: 30%;margin-bottom: 10px;height: 100px;border: 1px solid #eaeaea;border-radius: 3px;" v-for="item in info.gztp" :src="base_url + item.url" mode="aspectFill" ></image>
				</view>
			</view> -->
			<view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">故障原因：</view>
				<view class="f2" v-html="info.gzyy || '无'"></view>
			</view>
			<view class="box_item" v-if="current == 0" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="f1" style="margin-bottom: 10px;">解决办法：</view>
				<view class="f2" v-html="info.jjbf || '无'"></view>
			</view>
			<!-- <view class="box_item" v-if="current == 0 ">
				<view class="f1">故障信息核对：</view>
				<view class="f2" v-if="info.gztp == null || info.gztp.length <= 0">无</view>
				<view class="f3" v-else @click="cktp">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</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 in info.attachements">
				<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-12 12:09:21
						</view>
					</view>

				</view>
				<view class="right" @click="ylwj(item.url,item.type)">
					<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">
				<view class="left">
					<view class="left_image">
						<image src='../../../static/sp.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="cksp">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view>
			<view class="" style="margin-top: 20px;" v-if="show">
				<video style="width: 100%;"
					src="https://jp.lvhenongmu.com/profile/upload/2024/10/08/compress_video_1010982350_20241008194210A019.mp4"
					class="my-Video"></video>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['故障信息', '故障排查'],
				current: 0,
				show: false,
				info: {},
				base_url:'https://hhjj.antissoft.com'
			}
		},
		onLoad() {
			var info = JSON.parse(uni.getStorageSync("detail") || '{}')
			if (!info || !info.id) {
				uni.showToast({ title: '缺少故障信息', icon: 'none' })
				setTimeout(() => uni.navigateBack(), 1500)
				return
			}
			this.gzpcxq(info)
		},
		methods: {
			severityClass(val){
				const s = String(val == null ? '' : val).replace(/\s+/g,'');
				if(s.includes('轻微') || s.includes('蓝色')) return 'sev-light';
				if(s.includes('一般') || s.includes('黄色')) return 'sev-medium';
				if(s.includes('严重') || s.includes('红色')) return 'sev-high';
				return 'sev-none';
			},
			gzpcxq(data) {
				this.API.gzpcxq({ id: data.id }).then(res => {
					if (res && res.data) {
						if(res.data.attachements != null && res.data.attachements != ''){
							if (res.data.attachements.length > 0) {
								for (let i = 0; i < res.data.attachements.length; i++)(
									res.data.attachements[i].type = res.data.attachements[i].url.substring(res.data
										.attachements[i].url.lastIndexOf('.') + 1)
								)
							}
						}
						this.info = res.data
					}
				}).catch(err => {
					uni.showToast({ title: err.msg || err.message || '无权限查看或加载失败', icon: 'none' })
					setTimeout(() => uni.navigateBack(), 1500)
				})
			},
			cksp() {
				this.show = !this.show
			},
			change(e) {
				this.current = e
			},
			ht() {
				const pages = getCurrentPages();
				if (pages.length === 1) {
					// 如果当前页面是栈中唯一的页面，导航到故障列表页
					uni.navigateTo({
						url: '/pages/new/gzpc/gzpc'
					});
				} else {
					// 否则返回上一页
					uni.navigateBack({
						delta: 1
					});
				}
			},
			cktp(data) {
				var base_url = 'https://hhjj.antissoft.com';
				var arr = []
				// for(let i = 0;i < this.info.fj1.length;i++){
				arr.push(base_url + data)
				// }
				uni.previewImage({
					urls: arr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '0', // 当前显示图片的http链接，默认是第一个
				})
			},
			// 判断是否为视频类型
			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';
			},
			// 统一文件预览方法（在线预览，不支持下载）
			ylwj(url, type) {
				const fileUrl = 'https://hhjj.antissoft.com' + url;
				const fileType = (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', '视频');
					uni.navigateTo({
						url: '/pages/new/zlgl/video-preview'
					});
					return;
				}
				
				// 其他文件类型（Word、Excel等）提示不支持在线预览
				uni.showToast({
					title: '该文件类型暂不支持在线预览',
					icon: 'none',
					duration: 2000
				});
			},
		}
	}
</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;

					.left_image {
						margin-right: 15px;

						image {
							width: 40px;
							height: 40px;
						}
					}

					.l_title {
						.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;
						}
					}
				}
			}
		}
	}

  // 严重程度胶囊样式，与列表页保持一致
  .severity-pill{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    margin-left: 8px;
  }
  .sev-light{ background-color: #3A7AFE; }
  .sev-medium{ background-color: #FFB020; }
  .sev-high{ background-color: #E34D59; }
  .sev-none{ background-color: #C0C4CC; }
</style>