<template>
	<view class="order-satus-box">
		<view v-if="applyStatus > 2">
			<image class="order-status-image" :src="'/static/bg/order-status' + applyStatus + '.png'" mode=""></image>
		</view>
		<view class="d-c d-c-c">
			<view class="f38 gray3 fb mb40" v-if="applyStatus == 3">{{ $t('CK_KS_21') }}</view>
			<view class="f38 gray3 fb mb40" v-if="applyStatus == 4">{{ $t('CK_KS_26') }}</view>
			<view class="f38 gray3 fb mb40" v-if="applyStatus == 5">{{ $t('CK_KS_95') }}</view>
			<template>
				<template v-if="applyStatus == 3">
					<view class="f26 gray3 mb20">{{ $t('CK_KS_22') }}</view>
					<view class="f26 gray3">{{ $t('CK_KS_23') }}</view>
				</template>
				<button v-if="applyStatus == 4" class="small-btn" @click="isPop = true">{{ $t('CK_KS_25') }}</button>
				<button v-if="applyStatus == 5" class="small-btn"
					@click="gotoPage('/pages/self-service/super-studio/apply?type=detail')">{{ $t('CK_KS_25') }}</button>
			</template>
		</view>
		<template v-if="isPop">
			<view class="pop-bg" @click.stop="isPop = false"></view>
			<view class="agreement-pop">
				<view class="pop-title d-c-c fb f30 pr">
					<text>{{ $t('CK_KS_19') }}</text>
				</view>
				<view class="agreement-content">
					<u-parse :content="content"></u-parse>
				</view>
				<view>
					<button class="small-btn"
						@click.stop="gotoPage('/pages/self-service/super-studio/apply?type=edit')">{{ $t('CK_KS_20') }}</button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyStatus: 0,
				isPop: false,
				content: ''
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				let self = this;
				self._get(
					'member/api/maker-space/detail', {
						storeType: 2
					},
					res => {
						self.content = res.data.rejectMsg;
						self.applyStatus = res.data.applyStatus;
						if (!self.applyStatus || self.applyStatus <= 2) {
							self.gotoPage('/pages/self-service/super-studio/apply?type=apply', 'redirect');
						}
					}
				);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.order-satus-box {
		padding-top: 114rpx;
	}

	.order-status-image {
		width: 288rpx;
		height: 326rpx;
		margin: 0 auto;
	}

	.small-btn {
		min-width: 320rpx;
		height: 76rpx;
		background: #fb3024;
		border-radius: 38rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		font-weight: 400;
		color: #ffffff;
		white-space: nowrap;
		line-height: 76rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.agreement-pop {
		position: fixed;
		top: 14vh;
		overflow: auto;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
		background-color: #fff;
		width: 665rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 10rpx 20rpx 39rpx 20rpx;
	}

	.agreement-content {
		max-height: 60vh;
		overflow-y: auto;
	}

	.pop-title {
		height: 100rpx;
	}
</style>