<template>
	<view class="main">
		<view class="" style="padding: 10px;background-color: #fff;margin-bottom: 5px;border-radius: 5px;">
			<u-subsection :list="list" :current="current" @change="change"></u-subsection>
		</view>
		<view class="box">
			<view class="box_item" v-if="current == 0">
				<view class="f1">设备名：</view>
				<view class="f2">安全阀</view>
			</view>
			<view class="box_item" v-if="current == 0">
				<view class="f1">设备编号：</view>
				<view class="f2">001</view>
			</view>
			<view class="box_item" v-if="current == 0">
				<view class="f1">故障描述：</view>
				<view class="f2">有一些松动</view>
			</view>
			<view class="box_item" v-if="current == 0">
				<view class="f1">图片、图纸：</view>
				<view class="f3" @click="cktp">
					图片名
				</view>
			</view>
			<view class="box_item" v-if="current == 2">
				<view class="f1">视频教程：</view>
				<view class="f3" @click="cksp">
					视频名
				</view>
			</view>
			<view class="box_item" v-if="current == 1">
				<view class="f1">案例分析：</view>
				<view class="f3" @click="ylwj">
					案例名
				</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 {
				show: false,
				list: ['故障信息', '案件分析', '视频教程'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0
			}
		},
		methods: {
			change(e){
				this.current = e
			},
			cksp() {
				this.show = !this.show
			},
			cktp() {
				uni.previewImage({
					urls: [
					"http://115.29.210.249/tggPic/content/2021-09/1630475389708.jpg"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
				})
			},
			ylwj() {
				uni.downloadFile({
					url: 'https://jp.lvhenongmu.com/profile/upload/2024/10/25/竞价成交结果_20241025184648.xlsx',
					success: function(res1) {
						console.log("res", res1);
						var filePath = res1.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res2) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding: 7px;
		background-color: #F8F8F8;
		min-height: 100vh;

		.title {
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 10px;
			background-color: #fff;
		}

		.box {
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 10px;
			background-color: #fff;

			.box_item {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				border-bottom: 1px dashed #ccc;
				align-items: center;

				.f1 {}

				.f3 {
					color: #38beff;
					border-bottom: 1px solid #38beff;
				}
			}
		}
	}
</style>