<template>
    <div class="content main-content">
		<!-- 头部 -->
		<div :class="{'header':true,'scroll white':isScrollTop}">
			<div class="back"></div>
			<div class="header-title">专家</div>
		</div>
		<!-- 轮播图 -->
		<div class="banner">
			<img src="../../../assets/images/home/expert/banner.jpg" alt="">
		</div>
		<!-- 领取咨询机会 -->
		<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
			<img src="../../../assets/images/home/expert/notice-01.png" alt="">
			<p>完善信息，立即领取免费咨询卡(1小时)</p>
			<span></span>
		</div>
		<div class="expert-receive expert-receive-01" v-if="isReceive==1">
			<img src="../../../assets/images/home/expert/notice-02.png" alt="">
			<p>您已领取一小时免费咨询权益，可向专家进行提问</p>
		</div>
		<!-- 导航 -->
		<div class="expert-nav-list section">
			<ul class="expert-nav-item">
				<li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li>
			</ul>
			<div class="addr-select">
				<div @click="openAddr()">{{addrData[addrIndex].title}}</div>
			</div>
		</div>
		<!-- 地址弹出框 -->
		<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
		<div class="addr-select-item" v-show="isAddr">
			<div class="addr-btns">
				<span>请选择城市</span>
				<span @click="isAddr=!isAddr">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 咨询师列表 -->
		<div class="expert-list-all section">
			<ul class="expert-list">
				<li v-for="(item,index) in expertData" :key="index">
					<div class="expert-list-con" @click="goPage('/expert/detail')">
						<div class="expert-list-img"><img src="../../../assets/images/home/index/expert.png" alt=""></div>
						<div class="expert-list-txt">
							<div class="title">
								<h2>{{item.name}}</h2>
								<span v-if="item.title">{{item.title}}</span>
							</div>
							<div class="integral">
								<span>公益积分：{{item.integral}}</span>
								<span>好评度：{{item.score}}</span>
							</div>
							<div class="honor">
								<span v-for="(itemk,indexk) in item.honor" :key="indexk">{{itemk.title}}</span>
							</div>
							<div class="slogan">{{item.slogan}}</div>
						</div>
					</div>
					<div class="expert-list-btns">
						<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk()">向TA提问</div>
						<div class="btn" @click="goPage('/expert/detail')">查看详情</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div>
		<div class="my-confirm" v-show="isConfirm">
			<p>您还未领取免费咨询卡，请前往领取！</p>
			<div class="confirm-btns">
				<span @click="goPage('/information')">确认</span>
				<span @click="closeEV()">取消</span>
			</div>
		</div>
		<tabbar :current="2"></tabbar>
    </div>
</template>

<script>
	import tabbar from '../../../components/tabbar.vue'
    export default {
        name: "expert",
		components: {
			tabbar
		},
		data(){
		    return {
				isScrollTop: false,
				isReceive: 1, //是否领取咨询机会
				current: 0,
				isConfirm: false,
				navData: [
					{title:'所有专家'},
					{title:'最近活跃'},
					{title:'多元升学'}
				],
				
				addrData:[
					{title:'北京'},
					{title:'上海'},
					{title:'广州'},
					{title:'四川'},
					{title:'北京'},
					{title:'上海'},
					{title:'广州'},
					{title:'四川'},
					{title:'北京'},
					{title:'上海'},
					{title:'广州'},
					{title:'四川'},
					{title:'北京'},
					{title:'上海'},
					{title:'广州'},
					{title:'四川'}
				],
				addrIndex: 0,
				isAddr: false, //城市列表是否显示
				addrValue:'', //选择城市编号
				
				expertData: [
					{name:'赵晓',title:'金牌咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
					{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'}
				],
		    }
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
        methods:{
			// 导航切换
			changeNav(index){
				switch(index) {
					case 0:
						this.current = 0;
						break;
					case 1:
						this.current = 1;
						break;
					case 2:
						this.current = 2;
						break;
					case 3:
						this.current = 3;
						break;
				}
			},
			
			// 城市选择
			openAddr(){
				this.isAddr=!this.isAddr;
			},
			getAddrValue(index,item){
				this.addrValue = item.title;
				this.addrIndex = index;
				this.isAddr=false;
			},
			
			// 向TA提问
			toAsk(){
				if(this.isReceive == 1){
					this.$router.push('/expert/ask');
				}else if(this.isReceive == 0){
					this.isConfirm = true;
				}
			},
			
			// 关闭提示框
			closeEV(){
				this.isConfirm = false;
			},
			
			eventScrollTop() {
				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			},
			goPage(path){
			    this.$router.push(path);
			}
        },
		destroyed() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive进入时触发
		activated() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop)
		},
		//keep-alive离开时触发
		deactivated() {
			window.removeEventListener("scroll", this.eventScrollTop);
		}
    }
</script>

<style scoped>
	.banner,
	.banner img{
		width: 100%;
	}
</style>