<template>
	<view class="agreemen_detail" :style="vuex_theme">
		
		<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:'var(--primary-color)'}">{{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:'var(--primary-color)'}" 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
			
				uni.showLoading({
					title: '努力加载中~',
					mask: true
				})
			
				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,
							success: function(res) {
								var filePath = res.tempFilePath;
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功');
									},
									complete: function() {
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			
			openImage(imgPath) {
				let array = new Array(1).fill(imgPath);
				uni.previewImage({
					urls: array,
					success(res) {
						uni.hideLoading();
						console.log('openImage success');
					},
					fail(res) {
						uni.hideLoading();
						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: var(--primary-color);
				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>