<template>
	<view class="registration_detail">

		<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/实习项目icon@2x.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/实习项目icon@2x.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/实习项目icon@2x.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 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>

		<view class="footer">
			<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,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				registrationDetail: {},
			}
		},

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

		},

		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 == 'apply' ? '待报名' :
					this.registrationDetail == 'wait' ? '待审核' :
					this.registrationDetail == 'pass' ? '已审核' :
					this.registrationDetail == 'reject' ? '已拒绝' : '';
			}
		},

		methods: {
			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},

			handelCancel() {
				putRegistrationReviewApi({
					formIds: [this.registrationDetail.id],
					schoolAuditStatus: 'reject',
				}).then(data => {
					if (data) {
						this.$u.route({
							url: `pages/main/home/registrationReview/registrationReview`
						})
					}
				})
			},

			hancelSubmit() {
				putRegistrationReviewApi({
					formIds: [this.registrationDetail.id],
					schoolAuditStatus: 'pass',
				}).then(data => {
					if (data) {
						this.$u.route({
							url: `pages/main/home/registrationReview/registrationReview`
						})
					}
				})
			},
		}
	}
</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: #06B079;
				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;
			}
		}

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