<template>
	<view class="registration_detail" :style="vuex_theme">

		<view class="box student_info">
			<view class="title">学生信息</view>
			<view class="item">
				<text>学生姓名</text>
				<text>{{registrationDetail.studentName}}</text>
			</view>
			<view class="item">
				<text>手机号</text>
				<text>{{registrationDetail.studentPhone}}</text>
			</view>
			<view class="item">
				<text>学号</text>
				<text>{{registrationDetail.studentNumber}}</text>
			</view>
			<view class="item">
				<text>班级</text>
				<text>{{registrationDetail.classInfo}}</text>
			</view>

			<view class="icon_item">
				<u-icon size="32rpx" label="实习项目" labelSize="28rpx" labelColor="#909097"
					name="/static/img/home/internshipProgramIcon.png"></u-icon>
				<text>{{registrationDetail.projectName}}</text>
			</view>

			<view class="border_top item">
				<text>申请时间</text>
				<text>{{timeFormat(registrationDetail.applyTime, 'yyyy-mm-dd hh:MM')}}</text>
			</view>
		</view>

		<view class="box company_info">
			<view class="title">单位信息</view>
			<view class="icon_item">
				<u-icon size="32rpx" label="实习单位" labelSize="28rpx" labelColor="#909097"
					name="/static/img/home/internshipUnitIcon.png"></u-icon>
				<text>{{registrationDetail.companyName}}</text>
			</view>
			<view class="icon_item">
				<u-icon size="32rpx" label="实习岗位" labelSize="28rpx" labelColor="#909097"
					name="/static/img/home/internshipJobIcon.png"></u-icon>
				<text>{{registrationDetail.jobName}}</text>
			</view>
			<view class="border_top item">
				<text>联系人</text>
				<text>{{jobDetail.contactName}}</text>
			</view>
			<view class="item">
				<text>联系电话</text>
				<text>{{jobDetail.contactPhone}}</text>
			</view>
			<view class="item">
				<text>所在地区</text>
				<text>{{address}}</text>
			</view>
			<view class="item">
				<text>详细地址</text>
				<text>{{jobDetail.workSite}}</text>
			</view>
		</view>

		<view v-if="registrationDetail.entryAttachments" class="box">
			<view class="title">报名材料</view>
			<view class="time">
				{{timeFormat(registrationDetail.entryAttachments.createdTime, 'yyyy-mm-dd hh:MM')}} 上传
			</view>
			<view class="marks">
				{{registrationDetail.entryAttachments.remarks}}
			</view>
			<view class="cl">
				<view v-if="attachments&&attachments.length>0" class="fj">
					<view v-for="(item,index) in attachments " @click="openLink(item)">
						<view class="fj_item">
							<image class="img" src="/static/img/internship/link.png"></image>
							<text class="look">{{item.filename}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box status">
			<view class="title">状态</view>
			<view class="item">
				<text>审核状态</text>
				<text>{{reviewStatus}}</text>
			</view>
			<view class="item">
				<text>审核人</text>
				<text>{{registrationDetail.auditTeacherName}}</text>
			</view>
			<view class="item">
				<text>接受状态</text>
				<text>{{receiveStatus}}</text>
			</view>
		</view>

		<view class="footer" v-if="registrationDetail.status == 'wait'">
			<view class="left_btn">
				<c-button type="cancel" text="审核拒绝" @click="handelCancel">
				</c-button>
			</view>
			<view class="right_btn">
				<c-button type="confirm" text="审核通过" @click="hancelSubmit">
				</c-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRegistrationDetailApi,
		putRegistrationReviewApi,
		getImgUrlApi,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				registrationDetail: {},
				attachments: [],
				attachmentsFile: [],
			}
		},

		onLoad(option) {
			getRegistrationDetailApi(option.id).then(data => {
				if (data) {
					console.log(data)
					this.registrationDetail = data
					
					this.handleAttachments()
				}
			})

		},

		onShow(options) {

		},

		computed: {
			jobDetail: function() {
				let {
					jobDetail = {}
				} = this.registrationDetail
				return jobDetail;
			},

			address: function() {
				return this.jobDetail && this.jobDetail.province ?
					`${this.jobDetail.province}/${this.jobDetail.city}/${this.jobDetail.district}` : '';

			},

			reviewStatus: function() {
				return this.registrationDetail.status == 'apply' ? '待报名' :
					this.registrationDetail.status == 'wait' ? '待审核' :
					this.registrationDetail.status == 'pass' ? '已审核' :
					this.registrationDetail.status == 'reject' ? '已拒绝' : '';
			},

			receiveStatus: function() {
				return this.registrationDetail.receiveStatus == 'received' ? '已接收' :
					this.registrationDetail.receiveStatus == 'wait' ? '待处理' :
					this.registrationDetail.receiveStatus == 'reject' ? '已拒绝' :
					'';
			},
		},

		methods: {
			handleAttachments() {
				if (this.registrationDetail.entryAttachments) {
					if (this.registrationDetail.entryAttachments.attachments) {
						this.attachments = JSON.parse(this.registrationDetail.entryAttachments.attachments)
					}
					if (this.registrationDetail.entryAttachments.attachmentsFile) {
						this.attachmentsFile = JSON.parse(this.registrationDetail.entryAttachments.attachmentsFile)
					}
					this.attachments = this.attachments.concat(this.attachmentsFile)
					console.log(this.attachments)
				}
			},
			
			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},

			handelCancel() {
				putRegistrationReviewApi({
					formIds: [this.registrationDetail.id],
					status: 'reject',
				}).then(data => {
					if (data) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},

			hancelSubmit() {
				putRegistrationReviewApi({
					formIds: [this.registrationDetail.id],
					status: 'pass',
				}).then(data => {
					if (data) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},
			
			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>
	.registration_detail {
		width: 100%;
		min-height: 100%;
		height: auto;
		padding: 20rpx 0 194rpx 0;
		background-color: #F7F7F7;

		.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;
			}

			.icon_item {
				display: flex;
				flex-flow: row nowrap;
				margin: 0 0 24rpx 0;

				text {
					display: inline-block;
					width: 460rpx;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #202131;
					margin: 0 0 0 40rpx;
				}
			}

			.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;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #202131;
					margin: 0 0 0 78rpx;
				}
			}

			.border_top {
				border-top: 2rpx solid #E2E2E8;
				padding: 28rpx 0 0 0;
			}
			
			.time {
				margin-top: 10rpx;
				font-size: 26rpx;
			}
			
			.marks {
				margin-top: 16rpx;
				font-size: 30rpx;
			}
			
			.fj {
				margin-top: 16rpx;
				// padding: 24rpx 32rpx 20rpx;
				background-color: #fff;
			
				.fj_item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}
			
				.img {
					width: 24rpx;
					height: 24rpx;
				}
			
				.look {
					width: 90%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					white-space: normal;
					word-break: break-all;
					word-wrap: break-word;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: var(--primary-color);
					padding-left: 15rpx;
				}
			}
		}

		.footer {
			width: 100%;
			height: 96rpx;
			padding: 28rpx 30rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			border-top: 2rpx solid #E2E2E8;

			view {
				display: inline-block;
			}

			.left_btn {
				width: 330rpx;
				margin: 0 30rpx 0 0;
			}

			.right_btn {
				width: 330rpx;
			}
		}

	}
</style>