<template>
	<view class="content">
		<!-- 封面 -->
		<view class="cover">
			<image class="cover-src" :src="cover" mode="aspectFill"></image>
		</view>
		<!-- 课程信息 -->
		<view class="info">
			<view class="info-title">{{ title }}</view>
			<view class="info-subtitle">{{ subtitle }}</view>
			<view class="info-info">
				<view class="info-info-item">
					<label>总学期</label>
					<view class="info-value">{{count.all || '-'}}期</view>
				</view>
				<view class="info-info-item">
					<label>已结束</label>
					<view class="info-value">{{count.over || 0}}期</view>
				</view>
				<view class="info-info-item" v-if="semester != null">
					<label>当期时间</label>
					<view class="info-value">{{semester.time.start || '-'}}</view>
				</view>
				<view class="info-info-item" v-if="semester != null">
					<label>报名价格</label>
					<view class="info-value price">{{semester.price || '0.00'}}</view>
				</view>
			</view>
		</view>
		<!-- 课程介绍 -->
		<rich-text :nodes="content"></rich-text>
		<!-- 报名信息 -->
		<view class="footer">
			<view :class="['footer-btn', count.ing <= 0 ? 'in' : '']" @click="onBuy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import { info } from '@/apis/interfaces/empower.js'
	export default {
		data() {
			return {
				id			: '',
				cover		: '',
				title		: '',
				subtitle	: '',
				price		: '0.00',
				semester	: null,
				count		: {},
				content		: []
			};
		},
		onShow() {
			info(this.$Route.query.id).then(res => {
				let { cover, title, subtitle, price, semester_current, count, content, id } = res;
				this.id			= id
				this.cover 		= cover
				this.title 		= title
				this.subtitle	= subtitle
				this.price		= price
				this.semester	= semester_current
				this.count		= count
				this.content	= content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
				uni.setNavigationBarTitle({ title })
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			onBuy(){
				if(this.count.ing <= 0){
					uni.showToast({
						title: '暂无可报名学期',
						icon : 'none'
					})
					return
				}
				this.$Router.push({
					name	: 'EmpowerBuy',
					params	: { id: this.id }
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{ padding-bottom: 180rpx; }
	// 封面图
	.cover{ 
		position: relative;
		padding-top: 70%;
		background: #f7f8f9;
		&-src{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	}
	// 信息
	.info{
		padding: 40rpx;
		&-title{ font-weight: bold; font-size: 50rpx; margin-bottom: 20rpx; line-height: 65rpx; color: #333; text-align: justify; }
		&-subtitle{ font-size: 30rpx; line-height: 50rpx; margin-bottom: 40rpx; color: #333; text-align: justify; }
		&-info{
			background: #f7f8f9;
			padding: 0 30rpx;
			font-size: 30rpx;
			border-radius: 20rpx;
			&-item{
				padding: 30rpx 0;
				line-height: 40rpx;
				display: flex;
				justify-content: space-between;
				// @extend .border-solid;
				label{ font-weight: bold; width: 170rpx; }
				&:last-child::after{ display: none; }
			}
		}
		&-value{
			width: calc(100% - 170rpx);
			text-align: right;
			font-family: Arial, Helvetica, sans-serif;
			&.price{ font-weight: bold; color: $mian-color; }
		}
	}
	// 底部
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 30rpx 50rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		z-index: 99;
		background-color: white;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .04);
		.footer-btn{ background: $mian-color; color: white; line-height: 100rpx; border-radius: 50rpx; flex: 1; text-align: center; font-weight: bold; font-size: 36rpx; }
		.footer-btn.in{ opacity: .6; }
	}
</style>
