<template>
	<view class="agreemen_detail">
		
		<view v-if="id">
			<view class="box">
				<view class="title">{{detail.title}}</view>
				<view class="item">
					<text>创建时间</text>
					<text>{{timeFormat(detail.createdTime)}}</text>
				</view>
			</view>
			
			<view class="list_box">
				<view class="item">
					<view class="company">
						<text>实习单号</text>
						<text @click="handelDetail" :style="{color:'#06B079'}">{{detail.formNumber || '--'}}</text>
					</view>
					<view class="company">
						<text>学生姓名</text>
						<text>{{detail.studentName|| '--'}}</text>
					</view>
					<view class="company">
						<text>课程名称</text>
						<text>{{detail.courseName|| '--'}}</text>
					</view>
					<view class="company">
						<text>项目名称</text>
						<text>{{detail.projectName|| '--'}}</text>
					</view>
					<view class="company">
						<text>三方协议</text>
						<view class="item_box">
							<text :style="{color:'#06B079'}" v-for="(item,index) in attachments" :key="index"
								@click="openLink(item)">{{item.filename}}</text>
						</view>
			
					</view>
			
				</view>
			</view>
		</view>
		
		<view v-else class="no_data">
			<c-no-data></c-no-data>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	import listMixin from "@/common/mixins/list-mixin.js";

	import {
		getImgUrlApi,
		getAgreementDetailApi,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				id: '',
				detail: {},
				attachments: [],
			}
		},

		onLoad(option) {
			
			this.id = option.id;
			
			if(!option.id) {
				return;
			}

			getAgreementDetailApi(option.id).then(data => {
				if (data) {
					this.detail = data;
					this.attachments = data.attachments ? JSON.parse(data.attachments) : [];
				}
			})
		},

		methods: {
			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},
			
			handelDetail(record) {
				this.$u.route({
					url: `pages/main/internship/intershipInfo/intershipInfo?id=${this.detail.formId}`
				})
			},
			
			openLink(e) {
				var _this = this
				this.mFileDir = e.filename.substring(0, e.filename.lastIndexOf('.'))
				this.mFileType = e.filename.substring(e.filename.lastIndexOf('.'), e.filename.length)
				getImgUrlApi({
					bucket: e.bucket,
					filePath: e.object
				}).then(data => {
					console.log("data...", data)
					if (e.mime_type.indexOf("image") != -1) {
						_this.openImage(data.url)
					} else {
						uni.downloadFile({
							url: data.url,
							filePath: wx.env.USER_DATA_PATH + '/' + _this.mFileDir + this.mFileType,
							success: (res) => {
								if (res.statusCode === 200) {
									uni.showLoading();
									console.log('download succ', res)
									let fileMgr = wx.getFileSystemManager();
									let filePath = res.filePath
									uni.saveFile({
										tempFilePath: filePath,
										success: function(res) {
											var savedFilePath = res.savedFilePath;
											/* 删除缓存 */
											fileMgr.unlink({
												filePath: wx.env.USER_DATA_PATH +
													'/' +
													_this.mFileDir + _this
													.mFileType,
												success: function(res) {
													console.log(
														'unlink success:',
														res);
												}
											})
											_this.openDoc()
										},
										fail: function(res) {
											console.log('save fail', res);
											_this.createFile()
										}
									})
								}
							}
						});
					}
				})
			},
			
			createFile() {
				let fileMgr = wx.getFileSystemManager();
				var _this = this
				//利用access方法判断文件是否可用
				fileMgr.access({
					path: wx.env.USER_DATA_PATH + '/' + _this.mFileDir,
					success: (res) => {
						console.log('check success:', res);
						_this.openDoc()
					},
					fail: (res) => {
						console.log('check fail.', res);
						fileMgr.mkdir({
							dirPath: wx.env.USER_DATA_PATH + '/' + _this.mFileDir,
							success: (res) => {
								console.log('mk dir success:', res);
								_this.openDoc()
							},
							fail: (res) => {
								console.log('mk dir fail:', res);
								uni.hideLoading();
							}
						});
					}
				});
			},
			
			openDoc() {
				uni.openDocument({
					filePath: wx.env.USER_DATA_PATH + '/' + this.mFileDir + this.mFileType,
					showMenu: true,
					success: function(res) {
						uni.hideLoading();
						console.log('openDoc succ');
					}
				});
			},
			
			openImage(imgPath) {
				let array = new Array(1).fill(imgPath);
				uni.previewImage({
					urls: array,
					success(res) {
						console.log('openImage success');
					},
					fail(res) {
						console.log('openImage fail:', res);
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.agreemen_detail {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #F7F7F7;
		padding: 20rpx 0 0 0;

		.box {
			width: 630rpx;
			margin: 0 auto 20rpx;
			padding: 30rpx 30rpx 12rpx 30rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;

			.title {
				font-size: 32rpx;
				line-height: 32rpx;
				color: #202131;
				margin: 0 0 30rpx 0;
			}

			.title::before {
				content: "";
				display: inline-block;
				width: 6rpx;
				height: 32rpx;
				background-color: #06B079;
				margin: 0 12rpx 0 0;
				position: relative;
				top: 4rpx;
				border-radius: 8rpx;
			}



			.item {
				margin: 0 0 24rpx 0;

				text:first-child {
					display: inline-block;
					width: 112rpx;
					text-align: justify;
					text-align-last: justify;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #909097;
					vertical-align: top;
				}

				text:last-child {
					display: inline-block;
					width: 440rpx;
					word-break: break-word;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #202131;
					margin: 0 0 0 30rpx;
				}
			}
		}

		.list_box {
			padding: 0 0 50rpx 0;

			.item {
				position: relative;
				width: 630rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;

				.company {
					display: flex;
					flex-flow: row nowrap;
					margin: 0 0 30rpx 0;

					text {
						width: 120rpx;
						font-size: 28rpx;
						line-height: 32rpx;
						color: #909097;
						margin: 0 0 0 16rpx;
					}

					text:last-child {
						width: 450rpx;
						color: #202131;
						margin: 0 0 0 30rpx;
					}

					.item_box {
						width: 450rpx;
						margin: 0 0 0 30rpx;
						text {
							display: inline-block;
							width: 450rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin: 0;

						}
					}
				}

			}
		}
	}
</style>