<template>
	<view class="content">
		<!-- 合同信息 -->
		<view class="block">
			<view class="block-flex">
				<label>合同ID</label>
				<view class="block-val">{{id}}</view>
			</view>
			<view class="block-flex">
				<label>合同数量</label>
				<view class="nowrap block-val">{{files.length}}</view>
			</view>
			<view class="block-flex">
				<label>附件数量</label>
				<view class="nowrap block-val">{{attachments.length}}</view>
			</view>
			<view class="block-flex">
				<label>创建时间</label>
				<view class="nowrap block-val">{{created_at || '-'}}</view>
			</view>
			<view class="block-flex">
				<label>更新时间</label>
				<view class="nowrap block-val">{{updated_at || '-'}}</view>
			</view>
		</view>
		<!-- 合同文件 -->
		<view class="files-title">合同文件列表</view>
		<view class="files">
			<view class="files-flex" v-for="(item, index) in files" :key="index" @click="onPdf(item.fileName, item.downloadUrl)">
				<view class="files-flex-title">{{item.fileName}}</view>
				<view class="files-flex-id">{{item.fileId}}</view>
				<image src="@/static/imgs/payArrow.png" class="files-flex-icon" mode="widthFix"></image>
			</view>
		</view>
		<!-- 附件文件 -->
		<view class="files-title">附件文件列表</view>
		<view class="files">
			<view class="files-flex" v-for="(item, index) in attachments" :key="index" @click="onPdf(item.fileName, item.downloadUrl)">
				<view class="files-flex-title">{{item.fileName}}</view>
				<view class="files-flex-id">{{item.fileId}}</view>
				<image src="@/static/imgs/payArrow.png" class="files-flex-icon" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import { getFlows } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				user		: { name: '', mobile: '' },
				id			: '',
				created_at	: '',
				updated_at	: '',
				files		: [],
				attachments	: [],
				urlGo         : ''
			};
		},
		onLoad() {},
		created() {
			// 获取合同数据
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			getFlows(this.$Route.query.id).then(res => {
				const { sign_flow_id, files, attachments, created_at, updated_at, user } = res
				this.user		 = user
				this.id			 = sign_flow_id
				this.created_at	 = created_at
				this.updated_at	 = updated_at
				this.files		 = files
				this.attachments = attachments
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			onPdf(name, url){
				uni.downloadFile({
					url: url,
					success: res => {
						uni.navigateTo({
							url: '/pages/filePreview?url=' + encodeURIComponent(res.tempFilePath)
						})
					}
				})
				
				
				// uni.navigateTo({
				// 	url: '/pages/filePreview?url=' + encodeURIComponent(url)
				// })
				
				// uni.navigateTo({
				// 	url: '/pages/filePreview?url=' + encodeURIComponent(url)
				// })
				// this.$Router.push({
				// 	url: "/pages/filePreview",
				// 	params: {
				// 	   url: url
				// 	},
				// })
				// this.$Router.push({name: 'FilePreview', params: {url: url}})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		background-color: #f7f9fa;
		overflow-y: scroll;
		height: 100%;
		position: absolute;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	// 合同信息统计
	.block {
		background: white;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		border-radius: $radius;
		&-flex{
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 60rpx;
			label{ color: gray; }
			.block-val{ width: calc(100% - 200rpx); text-align: right; word-break:break-all; word-wrap: break-word; }
		}
	}
	
	// 合同列表
	.files{
		background: white;
		margin-bottom: 30rpx;
		padding: 30rpx;
		border-radius: $radius;
		&-flex{
			position: relative;
			padding-right: 40rpx;
			.files-flex-title{ font-weight: bold; font-size: 32rpx; }
			.files-flex-id{ font-size: 28rpx; color: gray; }
			.files-flex-icon{ position: absolute; right: 0; top: 50%; margin-top: -14rpx; width: 16rpx;}
		}
	}
	.files-title{ padding-bottom: 20rpx; color: gray; font-size: 28rpx; }
</style>