<template>
	<div>
		<div class="buyDetail">
			<!-- 头部标题 -->
			<van-nav-bar title="套餐包详情" left-arrow @click-left="onClickLeft"/>
			<div v-if="detailData!=null">
			<div class="buyDetail-top">
				<div class="buyDetail-image">
					<img :src="detailData.photourl" />
					<p v-if="detailData.isuser==1">已拥有</p>
				</div>
				<h1 >{{detailData.title}}</h1>
				<p>价格:<span>￥{{detailData.price}}</span></p>
				<h2 v-if="detailData.isuser!=0">有效期至：{{detailData.expiredate}}</h2>
			</div>
			<div class="buyDetail-middle">
				<div class="buyDetail-middle__box">
					<p>套餐包有限期</p>
					<span>{{detailData.days}}天</span>
				</div>
				<div class="buyDetail-middle__box">
					<p>考试权限</p>
					<span v-if="detailData.examtf==0">无权限</span>
					<span v-else-if="detailData.examtf>0" @click="openPopup(0)">{{detailData.examtf_name}}<i></i></span>
				</div>
				<div class="buyDetail-middle__box">
					<p>练习权限</p>
					<span v-if="detailData.trangtf==0">无权限</span>
					<span v-else-if="detailData.trangtf>0" @click="openPopup(1)">{{detailData.trangtf_name}}<i></i></span>
				</div>
				<div class="buyDetail-middle__box">
					<p>查看解析权限</p>
					<span v-if="detailData.analysistf==0">无权限</span>
					<span v-else-if="detailData.analysistf>0" @click="openPopup(2)">{{detailData.analysistf_name}}<i></i></span>
				</div>
			</div>
			<div class="buyDetail-bottom">
				<h1>试卷简介</h1>
				<p>{{detailData.descript}}</p>
			</div>
			<div class="buyDetail-btn" v-if="detailData.isuser==0">
				<span>立即购买</span>
			</div>
			</div>
		</div>
		
		<!-- 弹出框-->
		<div class="popup-class" v-if="onShow" >
			<div class="popup-class__box">
				<h1>详情</h1>
				<div class="popup-class__class" v-for="(item,i) in dataList" :key="i">
					<h2>{{item.title}}</h2>
					
				</div>
				<div class="popup-class__btn">
					<span @click="closePopup">确定</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {MyFeeSellDetail,GetFeePackagesDetial} from '@/api/user'
	export default({
		name:"BuyDetail",
		data() {
			return {
				dataList:null,
				onShow:false,
				detailData:{
		title: "套餐1",
		id: 67,
		adddate: "2019-05-22 17:11:41",
		price: 10,
		days: 8,
		isuser : 1,
		photourl: "/UploadFiles/2019/112/7132010694788099.jpg",
		descript: " 222222222222222222222222",
		examtf: 1,
		trangtf: 1,
		analysistf: 1,
		examtf_name: "无权限",
		trangtf_name: "无权限",
		analysistf_name: "无权限",
		examtf_list: [{id:1,title:11211}],
		trangtf_list: [],
		analysistf_list: null,
        user_title:"使用中",

	},
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			openPopup(i){
				this.onShow = true
				if(i==0){
					this.dataList = this.detailData.examtf_list
				}else if(i==1){
					this.dataList = this.detailData.trangtf_list
				}else if(i==2){
					this.dataList = this.detailData.analysistf_list
				}
			},
			closePopup(){
				this.onShow=false
			},
			getFeePackagesDetial(){
				GetFeePackagesDetial({
					id:this.$route.query.id
				}).then(res=>{
					console.log(res)
					if(res.result==true){
						this.detailData = JSON.parse(res.data)
					}
					
				})
			}
		},
		created(){
			// this.myFeeSellDetail()
			this.getFeePackagesDetial()
		}
	})
</script>

<style scoped>
	.van-icon-arrow-left{
		color: #4D4C4C !important;
	}
	/* 弹出框 */
	.popup-class{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.popup-class__box{
		width: 90%;
		min-height: 300px;
		background: #fff;
		position: fixed;
		top: 50%;
		margin-top: -150px;
		left: 5%;
		border-radius:5px;
	}
	.popup-class__box h1{
		margin: 0 2%;
		height: 49px;
		font-size:17px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(0,0,0,1);
		line-height:49px;
		border-bottom: 1px solid #eee;
		text-align: center;
	}
	.popup-class__class{
		margin-bottom: 50px;
		max-height: 200px;
		overflow: auto;
	}
	.popup-class__class h2{
		height:44px;
		font-size:16px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(26,26,26,1);
		line-height:24px;
		margin: 0 2%;
		border-bottom: 1px solid #eee;
		line-height: 44px;
		padding-left: 10px;
	}
	
	.popup-class__btn{
		width: 100%;
		height: 49px;
		position: absolute;
		bottom: 0;
		border-top: 1px solid #eee;
		
	}
	.popup-class__btn span{
		display: inline-block;
		height: 36px;
		width: 86%;
		margin: 6px 7%;
		background:rgba(41,135,238,1);
		border-radius:3px;
		font-size:16px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:36px;
		text-align: center;
	}
	/* 顶部 */
	.buyDetail-top{
		background: #fff;
		text-align: center;
		padding-bottom: 12px;
		padding-top: 20px;
	}
	.buyDetail-top h2{
		font-style: normal;
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-top: 5px;
	}
	.buyDetail-image{
		width: 94%;
		height: 220px;
		margin: 0 auto;
		position: relative;
	}
	.buyDetail-image p{
		width:66px;
		height:24px;
		background:rgba(255,149,0,1);
		border-radius:0px 12px 12px 0px;
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:#fff !important;
		line-height: 24px;
		text-align: center;
		position: absolute;
		left: 0;
		top: 10px;
		z-index: 10;
	}
	.buyDetail-image img{
		width: 100%;
		height: 100%;
		border-radius: 5px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.buyDetail-top h1{
		font-size:16px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(26,26,26,1);
		margin-top: 12px;
	}
	.buyDetail-top p{
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(136,136,136,1);
		margin-top: 10px;
	}
	.buyDetail-top p span{
		font-size:18px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,59,48,1);
	}
	
	/* 中间 */
	.buyDetail-middle{
		background: #fff;
		margin-top: 10px;
	}
	.buyDetail-middle__box{
		height: 44px;
		width: 94%;
		padding: 0 3%;
		border-bottom: 1px solid #eee;
		line-height: 44px;
	}
	.buyDetail-middle__box p{
		font-size:16px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(26,26,26,1);
		float: left;
	}
	.buyDetail-middle__box span{
		display: inline-block;
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(102,102,102,1);
		float: right;
	}
	.buyDetail-middle__box span i{
		display: inline-block;
		width: 10px;
		height: 20px;
		background: url(../../assets/user/yjt.png) no-repeat center center;
		background-size: cover;
		margin-bottom: -5px;
		margin-left: 10px;
	}
	/* 底部 */
	.buyDetail-bottom{
		background: #fff;
		margin-top: 10px;
		margin-bottom: 40px;
		padding: 12px 3% 18px 3%;
	}
	.buyDetail-bottom h1{
		font-size:16px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(26,26,26,1);
	}
	.buyDetail-bottom p{
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(26,26,26,1);
		line-height:21px;
		margin-top: 10px;
	}
	/* 按钮 */
	.buyDetail-btn{
		
		height: 54px;
		width: 100%;
		background: #fff;
	}
	.buyDetail-btn span{
		display: inline-block;
		width: 94%;
		height: 44px;
		margin: 5px 3%;
		background:rgba(255,149,0,1);
		border-radius:4px;
		font-size:16px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 44px;
	}
</style>
