<template>
	<view class="w-process">
		<view
			:class="{'w-process-node': true, 'w-cmt-node': (node.comment && node.comment.length > 0) || node.signature}"
			v-for="(node, index) in (progress || [])" :key="index">
			<view class="w-process-item-line"></view>
			<view class="w-process-item">
				<view class="w-process-item-avatar">
					<avatar :size="42" :status="getStatus(node)" :name="node.user.name" :src="getRes(node.user.avatar)"
						:showName="false"></avatar>
				</view>

				<view class="w-p-text-info">
					<view>{{node.name}} <text
							v-show="(node.comment && node.comment.length > 0) || node.signature">（添加了评论）</text></view>
					<view>{{node.user.name}}</view>
				</view>
				<text class="w-p-time">
					{{ node.isFuture ? '等待中' : getFinishTime(node.finishTime) }}
				</text>
			</view>
			<view class="w-process-node-content">
				<view class="w-comments" v-show="(node.comment && node.comment.length > 0) || node.signature">
					<view v-if="(node.signature || '') !== ''"
						style="display: flex; align-items: flex-start; margin-bottom: 10rpx;">
						<text>签字：</text>
						<image mode="aspectFit" :src="node.signature" style="width: 150rpx; height: 100rpx;"></image>
					</view>
					<view v-for="cmt in node.comment" :key="cmt.id" class="w-comment">
						<view>{{cmt.text}}</view>
						<template v-if="cmt.attachments.length > 0">
							<view>
								<image mode="aspectFit" :src="img" v-for="(img, i) in filterImages(cmt.attachments)"
									:key="img" @click="previewImg(img, cmt.attachments)"></image>
							</view>
							<view>
								<view class="ellipsis" v-for="(file, i) in filterFiles(cmt.attachments)" :key="file.id">
									<view style="color: #4C87F3;" @click="downloadFile(file.url)">{{file.name}}</view>
								</view>
								<!-- <text v-for="(file, i) in filterFiles(cmt.attachments)" :key="file.id">
									<text v-if="typeIsImg(file.name)" style="color: #4C87F3;"
										@click="previewImgOne(file)">{{file.name}}</text>
									<uni-link v-else :showUnderLine="false" color="#4C87F3" :download="file.name"
										:href="file.url" :text="file.name"></uni-link>
								</text> -->
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="w-process-end w-process-item">
			<view :style="{width: 50 / 16 + 'rem', height: 50 / 16 * 0.8 + 'rem'}">
				<uni-icons :size="30" type="more-filled" color="#8b8b8b" class="w-pr-running"
					v-if="result === 'RUNNING'"></uni-icons>
				<uni-icons :size="30" type="checkbox-filled" color="#5FB685" class="w-pr-status"
					v-else-if="result === 'PASS'"></uni-icons>
				<uni-icons :size="30" type="clear" color="#CE5266" class="w-pr-status"
					v-else-if="result === 'REFUSE'"></uni-icons>
				<uni-icons :size="30" type="close" color="#8b8b8b" class="w-pr-status"
					v-else-if="result === 'CANCEL'"></uni-icons>
			</view>
			<view>{{status}}</view>
		</view>
		<view class="fixed" :class="{show:showIframe}" v-if="show" @click="show=false">
			<view class="iframeMain" @click.stop="show=true">
				<video v-if="getType(iframeUrl) == 'video'" class="iframe" :src="iframeUrl"></video>
				<image v-else-if="getType(iframeUrl) == 'image'" class="iframe" :src="iframeUrl" mode="aspectFill"></image>
				<iframe v-else class="iframe" ref="iframe" :src="iframeUrl" frameborder="0"></iframe>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Avatar from '@/components/Avatar.vue'
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		getRes,
		getFileSize,
		isVideoLink,
		isImageLink
	} from '@/utils/tool.js'
	import {
		Log
	} from '@icon-park/vue-next';

	const props = defineProps(['progress', 'status', 'result'])

	const imgViews = ref([])
	const showIframe = ref(false)
	const show = ref(false)
	const iframeUrl = ref("")
	const iframe = ref()


	function getFinishTime(time) {
		if (time) {
			return time.substring(5, 16)
		}
		return '处理中'
	}

	function filterImages(attachments) {
		return (attachments || []).filter(f => f.isImage).map(f => {
			console.log(f.url);
			return getRes(f.url)
		})
	}

	function filterFiles(attachments) {
		return (attachments || []).filter(f => !f.isImage).map(f => {
			return {
				...f,
				url: getRes(f.url)
			}
		})
	}

	function previewImg(img, attachments) {
		console.log(img, attachments);
		const imgs = filterImages(attachments)
		console.log(imgs);
		uni.previewImage({
			current: imgs.indexOf(img),
			urls: imgs,
			longPressActions: true
		})
	}
	
	function getType(url){
		if(isImageLink(url)){
			return "image"
		}else if(isVideoLink(url)){
			return "video"
		}else{
			return ''
		}
	}

	function downloadFile(url) {
		// 下载所有的文件
		let name = url.substring(url.lastIndexOf('/') + 1);
		console.log(name, "文件名称");
		if (isVideoLink(url) || isImageLink(url)) {
			// 是图片和视频
			show.value = true;
			showIframe.value = true;
			iframeUrl.value = url;
		} else {
			show.value = true;
			showIframe.value = false;
			iframeUrl.value = url;
		}

		return;
	}

	function previewImgOne(img) {
		console.log(img);
		downloadFile(img.url, Date.now() + ".jpg")
		// uni.previewImage({
		// 	current: 0,
		// 	urls: [img.url],
		// 	longPressActions: true
		// })
	}

	function typeIsImg(filename) {
		// 获取文件名称是否为图片
		const imageExtensions = /\.(jpg|jpeg|png|gif|bmp)$/i;
		return imageExtensions.test(filename);
	}

	function getStatus(item) {
		if (item.isFuture) {
			return 'waiting'
		} else if (item.finishTime === null) {
			return 'pending'
		} else if (item.nodeType === 'CC') {
			return 'cc'
		} else if (item.result === 'agree') {
			return 'success'
		} else if (item.result === 'refuse') {
			return 'error'
		} else if (item.result === 'comment') {
			return 'comment'
		} else if (item.result === 'transfer') {
			return 'transfer'
		} else if (item.result === 'recall') {
			return 'recall'
		} else if (item.nodeType === 'cancel') {
			return 'cancel'
		} else {
			return undefined
		}
	}
</script>

<style lang="less" scoped>
	.fixed {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;

		&.show {
			display: initial;
		}
	}

	.iframeMain {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 650rpx;
		font-size: 0;

		.iframe {
			width: 100%;
			height: 500rpx;
		}
	}


	.w-process {
		font-size: 32rpx;

		.w-process-node {
			position: relative;
			padding-bottom: 64rpx;

			//连接线
			.w-process-item-line {
				background-color: #E4E4E4;
				position: absolute;
				width: 6rpx;
				height: 100%;
				left: 40rpx;
			}

			//节点体
			.w-process-node-content {
				margin-left: 96rpx;
			}
		}

		.w-process-item {
			display: flex;
			position: relative;

			.w-process-item-avatar {
				padding: 10rpx 0;
				background-color: white;
				border-radius: 50%;
			}

			.w-p-text-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 16rpx;

				&>view:first-child {
					font-size: 29rpx;
					color: #8C8C8C;
				}

				&>view {
					padding: 3rpx;
				}
			}

			.w-p-time {
				position: absolute;
				color: #8C8C8C;
				font-size: 30rpx;
				top: 10rpx;
				right: 0;
			}
		}

		.w-process-end {
			display: flex;
			align-items: center;
			padding: 3rpx;

			&>view:first-child {
				display: flex;
				background-color: white;
			}

			.w-pr-running {
				width: 80%;
				height: 100%;
				background-color: #E4E4E4;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.w-pr-status {
				width: 80%;
				height: 100%;
			}
		}
	}

	.w-comments {
		margin-top: 10rpx;
		padding: 16rpx;
		background-color: #F4F5F7;
		border-radius: 0 16rpx 16rpx 16rpx;

		.w-comment {
			image {
				margin: 4rpx;
				width: 112rpx;
				height: 112rpx;
			}

			&>view:first-child {
				font-size: 29rpx;
				color: #515151;
				margin-bottom: 6rpx;
			}

			.ellipsis {
				overflow: hidden;

				>view {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

		}
	}

	.w-cmt-node {
		padding-bottom: 16rpx !important;
	}
</style>