<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<topBanner v-if="banner_list.length>0" :banner_list="banner_list"></topBanner>
			<view class="wrap-status">
				<!-- 待审核 -->
				<view v-if="info.status===0">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:wait_tip}}</view>
				</view>
				<!-- 审核通过 -->
				<view v-else-if="info.status===1">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:pass_tip}}</view>
					<!--  v-if="courseInfo.is_fee===1 && info.fee_status!=1" -->
					<view class="wrap-status-btn" v-if="info.files && info.files.length>0">
						<view @click="openFiles(info.files)">查看录取通知书</view>
					</view>
					<view class="wrap-status-btn"  v-if="courseInfo.is_fee===1 && info.fee_status!=1">
						<view @click="toPay">上传缴费信息</view>
					</view>
					<view style="justify-content: center;color: #999;" class="wrap-status-btn" v-if="info.fee_status!=1" @click="showCancel = true">
						我要放弃
					</view>
				</view>
				<!-- 审核不通过 -->
				<view v-else-if="info.status===2 || info.status===6">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:fault_tip}}</view>
				</view>
				<!-- 备选 -->
				<view v-else-if="info.status===3">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.reason?info.reason:back_tip}}</view>
				</view>
				<!-- 主动放弃 -->
				<view v-else-if="info.status===5">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">{{info.giveup_reason?info.giveup_reason:'您已主动放弃该课程。'}}</view>
				</view>
				<!-- 已取消 -->
				<view v-else-if="info.status===4">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view class="wrap-status-content">您已取消该课程报名。</view>
				</view>
			</view>
			<view class="wrap-img">
				<image :src="base.imgHost('mycourse-status.png')"></image>
			</view>

		</view>
		<!-- 我要放弃 -->
		<u-modal v-model="showCancel" negative-top="400"
		:show-cancel-button="false" :show-confirm-button="false" :show-title="false">
			<view class="slot-content">
				<view class="slot-content-title">提示</view>
				<view class="slot-content-tip">放弃后将无法再次报名本期课程，请确认后再提交。</view>
				<view class="slot-content-input">
					<u-input v-model="form.giveup_reason" type="textarea" :border="true" placeholder="请输入放弃原因" />
				</view>
				<view  class="slot-content-btn">
					<view @click="showCancel=false">取消</view>
					<view @click="cancelSign">确认放弃</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import topBanner from '@/components/topBanner.vue'
	export default {
		components: {
			topBanner
		},
		data() {
			return {
				course_id: '',
				banner_list: [],
				info: {},
				userInfo: {},
				courseInfo: {},
				form: {
					giveup_reason: ""
				},
				wait_tip: "我们将在1-3个工作日内审核并通知您报名结果….",
				pass_tip: "恭喜您，您已被录取",
				fault_tip: '很遗憾，您未通过审核。',
				back_tip: "我们将在1-3个工作日内审核并通知您报名结果….",
				showCancel: false
			}
		},
		onLoad(options) {
			this.course_id = options.id
			this.getCourseDetail(options.id)
			this.getBannerList()
		},
		methods: {
			async getCourseDetail(id) {

				const res = await this.$u.api.courseGetSign({
					course_id: id
				})
				this.info = res.detail
				this.userInfo = res.detail.user
				this.courseInfo = res.detail.course
				this.courseInfo_type_detail = this.courseInfo.type_detail
				this.wait_tip = this.courseInfo_type_detail.wait_tip ? this.courseInfo_type_detail.wait_tip :
					"我们将在1-3个工作日内审核并通知您报名结果…."
				this.pass_tip = this.courseInfo_type_detail.pass_tip ? this.courseInfo_type_detail.pass_tip :
					"恭喜您，您已被录取！"
				this.fault_tip = this.courseInfo_type_detail.fault_tip ? this.courseInfo_type_detail.fault_tip :
					'很遗憾，您未通过审核。'
				this.back_tip = this.courseInfo_type_detail.back_tip ? this.courseInfo_type_detail.back_tip :
					"我们将在1-3个工作日内审核并通知您报名结果…."
			},
			async getBannerList() {
				const res = await this.$u.api.otherBanner({
					position: 2,
				})
				if (res.length > 0) {
					this.banner_list = res.sort((a, b) => {
						a.sort - b.sort
					})
				}
			},
			toPay() {
				uni.navigateTo({
					url: '/packages/mycourse/coursePay?id=' + this.course_id
				})
			},
			cancelSign() {
				let that = this
				if (this.base.isNull(this.form.giveup_reason)) {
					this.base.toast("请输入放弃原因")
					return
				}
				this.$u.api.courseUpdateSign({
					id:this.info.id,
					giveup_reason:this.form.giveup_reason,
					status:5
				}).then(res => {
					that.base.toast("已放弃课程", 1500, function() {
						that.showCancel = false
						setTimeout(function() {
							uni.redirectTo({
								url:"/packages/mycourse/index"
							})
						}, 1500)
					})
				})
			},
			openFiles(files) {
				console.log("files", files)
				let that = this
				uni.downloadFile({
					url: files[0].url,
					success: function(res) {
						if (res.statusCode === 200) {
							console.log("临时路径", res.tempFilePath)
							let filePath = res.tempFilePath
							//调用uni.openDocument打开文件
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log("打开文档成功");
								},
								fail: function(res) {
									console.log("uni.openDocument,fail");
									console.log(res)
								},
								complete: function(res) {
									console.log("uni.openDocument,complete");
									console.log(res)
								}
							});
						}
					},
					fail: function(err) {
						console.log('文件下载失败', err)
					}
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.slot-content {
			padding: 30rpx;
			padding-top:20rpx;
			&>view{
				padding-top:20rpx;
			}
			&-title{
				text-align: center;
			}
			&-tip{
				text-indent: 2em;
			}
			&-btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>view {
					width: 40%;
					text-align: center;
					margin: 0 auto;
					color: #fff;
					background: linear-gradient(to right, #5e5fbc, #0d0398);
					border-radius: 30rpx;
					padding: 10rpx;
				}
				&>view:first-child{
					background: #ddd;
					color:#333
				}
			}
		}

		.wrap {
			position: relative;
			height: 100%;

			&-status {
				margin: 120rpx 20rpx;

				&-name {
					color: #000;
					font-size: 32rpx;
					padding-bottom: 20rpx;
				}

				&-content {
					line-height: 2;
					text-indent: 2em;
				}

				&-btn {
					text-align: right;
					text-align: center;
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>view {
						width: 45%;
						display: inline-block;
						text-align: center;
						margin: 0 auto;
						color: #fff;
						background: linear-gradient(to right, #e4cdb4, #c69c6d);
						border-radius: 30rpx;
						padding: 10rpx 20rpx;
					}
				}
			}

			&-img {
				image {
					width: 260rpx;
					height: 314rpx;
					display: block;
					margin: 0 auto;
				}
			}

		}
	}
</style>