<template>
	<ks-page-scroll-container :page="page"  :page-count="pageCount" @page-change="getNewData">
	<div class="buyIndex">
		<!-- 头部标题 -->
		<van-nav-bar title="考试套餐包" left-arrow @click-left="onClickLeft"/>
		
		<van-tabs v-model="active" @click="getData">
			<van-tab  title="我的考试包" >
				<div v-if="showList">
					<div class="buyIndex-my" v-if="myData!=null" v-for="(my,i) in myData" :key="i">
						<div class="buyIndex-my__box" :style="{backgroundImage: 'url('+my.photourl+')',backgroundRepeat:'noRepeat center center',backgroundSize: 'cover'}" @click="open('/buy/buyDetail',my.id)">
							<div class="buyIndex-my__top">
								<div class="buyIndex-buy__top-text" v-if="my.use_flag==0">未使用</div>
								<div class="buyIndex-buy__top-text" v-else-if="my.use_flag==1">使用中</div>
								<div class="buyIndex-my__top-text" v-else-if="my.use_flag==2">已到期</div>
								<span>*有效期至：{{my.expiredate}}</span>
							</div>
							<p>{{my.title}}</p>
						</div>
					</div>
				</div>
				<!-- 无数据提示 -->
				<div class="buyIndex-noShow" v-if="showNodata">
					<no-data />
				</div>
			</van-tab>
			<van-tab title="购买考试包">
				<div v-if="showList">
					<div class="buyIndex-buy" v-if="buyData!=null" v-for="(buy,n) in buyData" :key="n">
						<div class="buyIndex-buy__box" :style="{background: 'url('+buy.photourl+')',backgroundRepeat:'noRepeat center center',backgroundSize: 'cover'}" @click="open('/buy/buyDetail',buy.id)">
							<div class="buyIndex-buy__top">
								<div class="buyIndex-buy__top-text" v-if="buy.isuser==1">已拥有</div>
								<span>*有效期至：{{buy.days}}天</span>
							</div>
							<div class="buyIndex-buy__bottom">
								<p>{{buy.title}}</p>
								<span>￥{{buy.price}}</span>
							</div>
						</div>	
					</div>
				</div>
				<!-- 无数据提示 -->
				<div class="buyIndex-noShow" v-if="showNodata">
					<no-data />
				</div>
			</van-tab>
			<van-tab title="购买明细">
				<div v-if="showList">
					<div class="buyIndex-detail" v-for="(my,m) in myData" :key="m">
						<h1>购买时间：{{my.adddate}}</h1>
						<div class="buyIndex-detail__price">
							<p>{{my.title}}</p>
							<span>￥{{my.price}}</span>
						</div>
						<div class="buyIndex-detail__term">
							<p>有效期：{{my.expiredate}}</p>
							<span v-if="my.use_flag==0">未使用</span>
							<span v-else-if="my.use_flag==1">使用中</span>
							<span v-else-if="my.use_flag==2">已到期</span>
						</div>
					</div>
				</div>
				<!-- 无数据提示 -->
				<div class="buyIndex-noShow" v-if="showNodata">
					<no-data />
				</div>
			</van-tab>

		</van-tabs>
	</div>
	</ks-page-scroll-container>
</template>

<script>
	import {GetFeePackagesList,MyFeeSellList} from '@/api/user'
	
	export default({
		name:"BuyIndex",
		data() {
			return {
				showList:true,
				showNodata:false,
				page:0,
				pageCount:0,
				active:0,
				buyData:[{
			title: "套餐1",
			id: 67,
			adddate: "2019-05-22 17:11:41",
			price: 10,
			user_title: "使用中",
			photourl: "/UploadFiles/2019/112/7132010694788099.jpg",
			packid: 1,
			packdays: 8,
			expiredate: "2019-05-30 17:11:41",
			use_flag:1,
		}
	],
				myData: [{
			title: "套餐1",
			id: 67,
			adddate: "2019-05-22 17:11:41",
			price: 10,
			user_title: "使用中",
			photourl: "/UploadFiles/2019/112/7132010694788099.jpg",
			packid: 1,
			packdays: 8,
			expiredate: "2019-05-30 17:11:41",
			use_flag:1,
		}
	],
			}
		},
		methods:{
			onClickLeft() {
				this.$router.go(-1)
			},
			open(url,id){
				this.$router.push({
					path:url,
					query:{
						id:id
					}	
				})
			},
			getNewData(page){
				this.myFeeSellList(page)
				this.getFeePackagesList(page)
			},
			getData(index){
				if(index==0){
					this.myFeeSellList()
				}else if(index==1){
					this.getFeePackagesList()
				}
				
			},
			myFeeSellList(p=1,showtype){//获取我的套餐包数据
				MyFeeSellList({
					page:p,
					pagesize:5,
					showtype: showtype||0,
				}).then(res=>{
					if(res.result==true){
						this.myData = res.data
						this.showList = true
						this.showNodata = false
						this.page = p
						this.pageCount = res.pagecount
					}else{
						this.showList = false
						this.showNodata = true
						this.page = 0
						this.pageCount = 0
					}
				})
			},
			getFeePackagesList(p=1){//获取全部套餐包列表
				GetFeePackagesList({
					page:p,
					pagesize:5,
					
				}).then(res=>{
					if(res.result==true){
						this.buyData = res.data
						this.showList = true
						this.showNodata = false
						this.page = p
						this.pageCount = res.pagecount
					}else{
						this.showList = false
						this.showNodata = true
						this.page = 0
						this.pageCount = 0
					}
					
				})
			}
		},
		created(){
			this.myFeeSellList()
		}
	})
</script>

<style scoped>
	.van-icon-arrow-left{
		color: #4D4C4C !important;
	}
	/* 我的考试包 */
	.buyIndex-my{
		margin-top: 20px;
	}
	.buyIndex-my__box{
		width: 94%;
		margin: 0 auto 10px auto;
		height: 175px;
		border-radius: 5px;
		position: relative;
		
	}
	.buyIndex-my__box p{
		width:97%;
		height: 36px;
		background:rgba(0,0,0,0.4);
		border-radius:5px;
		position: absolute;
		bottom: 0;
		font-size:16px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height: 36px;
		padding-left: 3%;
	}
	.buyIndex-my__top{
		width: 100%;
		position: absolute;
		top: 20px;
	}
	.buyIndex-my__top span{
		display: inline-block;
		float: right;
		margin-right: 10px;
		font-size:12px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.buyIndex-my__top-text{
		width:66px;
		height:24px;
		background:#FF3B30;
		border-radius:0px 12px 12px 0px;
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height: 24px;
		text-align: center;
		float: left;
	}
	/* 购买考试包 */
	.buyIndex-buy{
		margin-top: 20px;
	}
	.buyIndex-buy__box{
		width: 94%;
		margin: 0 auto 10px auto;
		height: 175px;
		border-radius: 5px;
		position: relative;
		
	}
	.buyIndex-buy__bottom{
		width:94%;
		height: 36px;
		background:rgba(0,0,0,0.4);
		border-radius:5px;
		position: absolute;
		bottom: 0;
		font-size:16px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height: 36px;
		padding: 0 3%;
	}
	.buyIndex-buy__bottom p{
		float: left;
	}
	.buyIndex-buy__bottom span{
		float: right;
	}
	.buyIndex-buy__top{
		width: 100%;
		position: absolute;
		top: 20px;
	}
	.buyIndex-buy__top span{
		display: inline-block;
		float: right;
		margin-right: 10px;
		font-size:12px;
		font-family:PingFang-SC-Medium;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.buyIndex-buy__top-text{
		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:rgba(255,255,255,1);
		line-height: 24px;
		text-align: center;
		float: left;
	}
	/* 购买明细 */
	.buyIndex-detail{
		width: 94%;
		padding: 10px 3%;
		background: #fff;
		margin-top: 10px;
	}
	.buyIndex-detail h1{
		height: 30px;
		font-size:12px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(136,136,136,1);
		border-bottom: 1px solid #eee;
	}
	.buyIndex-detail__price{
		width: 100%;
		height: 20px;
		font-size:14px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(1,12,23,1);
		line-height: 20px;
		margin-top: 8px;
	}
	.buyIndex-detail__price p{
		float: left;
	}
	.buyIndex-detail__price span{
		display: inline-block;
		float: right;
	}
	.buyIndex-detail__term{
		width: 100%;
		height: 20px;
		font-size:12px;
		font-family:PingFang-SC-Regular;
		font-weight:400;
		color:rgba(136,136,136,1);
		line-height: 20px;
		margin-top: 8px;
	}
	.buyIndex-detail__term p{
		float: left;
	}
	.buyIndex-detail__term span{
		display: inline-block;
		float: right;
		color: #2987EE;
	}
</style>
