<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="host + bannerSrc?host + bannerSrc:''">
		</div>
		<!-- 领取咨询机会 -->
		<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
			<img src="../../../assets/images/home/expert/notice-01.png">
			<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">
			<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].name}}</div>
			</div>
		</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="toDetail(item.id)">
						<div class="expert-list-img"><img :src="host + item.avatar"></div>
						<div class="expert-list-txt">
							<div class="title">
								<h2>{{item.name}}</h2>
								<span v-if="item.tags_text">{{item.tags_text}}</span>
							</div>
							<div class="integral">
								<span>公益积分：{{item.score}}</span>
								<span>好评度：{{item.comment_score==0?item.comment_score:item.comment_score.toFixed(1)}}</span>
							</div>
							<div class="honor">
								<span v-for="(itemk,indexk) in item.keywords_list" :key="indexk">{{itemk}}</span>
							</div>
							<div class="slogan">{{item.slogan}}</div>
						</div>
					</div>
					<div class="expert-list-btns">
						<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk(item.id)">向TA提问</div>
						<div class="btn" @click="toDetail(item.id)">查看详情</div>
					</div>
				</li>
			</ul>
		</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.name}}
					<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png">
				</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,
				name: '',
				isReceive: 1, //是否领取咨询机会
				current: 0,
				isConfirm: false,
				bannerSrc: '', //banner图地址
				navData: [{
					title: '所有专家'
				}, {
					title: '最近活跃'
				}, {
					title: '多元升学'
				}],
				expertData: [], //专家列表
				addrData: [],
				addrIndex: 0,
				isAddr: false, //城市列表是否显示
				addrValue: '', //选择城市编号
			}
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		mounted() {
			this.getBanner();
			this.getExpertData();
			this.getAddrData();
		},
		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;
				}
			},

			// 获取banner
			getBanner() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/dictionary/get-slide-list", {
						position: "h5_expert_banner",
					})
					.then(function(res) {
						that.bannerSrc = res.data.data[0].src;
					});
			},


			// 获取专家列表
			getExpertData() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/consumer/expert-list", {
						page: "1",
						size: "100",
					})
					.then(function(res) {
						that.expertData = res.data.data.list;
					});
			},


			// 获取城市列表
			getAddrData() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/area/index", {
						pcode: 86
					})
					.then(function(res) {
						that.addrData = res.data.data;
					});
			},


			// 城市选择
			openAddr() {
				this.isAddr = !this.isAddr;
			},
			getAddrValue(index, item) {
				this.addrValue = item.code;
				this.addrIndex = index;
				this.isAddr = false;
			},

			// 关闭提示框
			closeEV() {
				this.isConfirm = false;
			},


			// 向TA提问
			toAsk(id) {
				if (this.isReceive == 1) {
					this.$router.push({
						path: '/expert/ask',
						name: 'expert-ask',
						query: {
							id: id
						},
					});
				} else if (this.isReceive == 0) {
					this.isConfirm = true;
				}
			},

			// 跳转到详情页
			toDetail(id) {
				this.$router.push({
					path: '/expert/detail',
					name: 'expert-detail',
					query: {
						id: id
					},
				})
			},

			// 页面跳转
			goPage(path) {
				this.$router.push(path);
			},

			// 滚动显示头部
			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;
					}
				}
			},
		},
		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>
