<template>
	<div class="content main-content">
		<!-- 轮播图 -->
		<div class="banner-wrap">
			<div class="swiper-container" ref="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img :src="host + bannerSrc" />
					</div>
				</div>
				<div class="swiper-pagination" ref="swiper-pagination"></div>
			</div>
		</div>
		<!-- 领取咨询卡 -->
		<div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
			<img src="../../assets/images/home/index/receive.jpg" />
			<span>完善信息，立即领取免费咨询卡(1小时)</span>
		</div>
		<!-- 专家 -->
		<div class="index-expert section">
			<div class="index-title">
				<h2>专家<em>团队</em></h2>
				<span @click="goPage('/expert')">查看更多</span>
			</div>
			<ul class="index-expert-list">
				<li v-for="(item, index) in expertData" :key="index">
					<div class="expert-img">
						<img :src="host + item.avatar"/>
					</div>
					<div class="expert-name">
						{{item.name}}<span>{{item.work_time}}</span>
					</div>
					<div class="expert-honor">
						<span>{{item.home_keywords_list[0]}}</span>
						<span>{{item.home_keywords_list[1]}}</span>
					</div>
				</li>
			</ul>
		</div>
		<!-- 计划 -->
		<div class="index-plan">
			<ul class="index-plan-list">
				<li>
					<img src="../../assets/images/home/index/plan-01.png"/>
					<p>强基计划</p>
				</li>
				<li>
					<img src="../../assets/images/home/index/plan-02.png"/>
					<p>综合评价</p>
				</li>
				<li>
					<img src="../../assets/images/home/index/plan-03.png"/>
					<p>专项计划</p>
				</li>
			</ul>
		</div>
		<!-- 测评 -->
		<div class="index-evaluation section">
			<div class="index-title">
				<h2>专业<em>测评</em></h2>
				<span @click="goPage('/evaluation')">查看更多</span>
			</div>
			<ul class="index-evaluation-list">
				<li>
					<div class="evaluation-img">
						<img src="../../assets/images/home/index/evaluation-01.png"/>
					</div>
					<p>霍兰德职业兴趣测评</p>
					<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
				</li>
				<li>
					<div class="evaluation-img">
						<img src="../../assets/images/home/index/evaluation-02.png"/>
					</div>
					<p>MBIT职业性格测试</p>
					<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
				</li>
			</ul>
		</div>
		<!-- 直播 -->
		<div class="index-live section">
			<div class="index-title">
				<h2>有谱<em>直播</em></h2>
				<span>查看更多</span>
			</div>
			<ul class="index-live-list">
				<li>
					<a href="https://h5.dingtalk.com/live/video_lesson.htm?itemId=aed09721-d784-4c70-8219-5466246ae2a9&dd_nav_bgcolor=FF2C2D2F&feedProperty=1&feedId=aed09721-d784-4c70-8219-5466246ae2a9&mcnId=9428021620221302755#/live"><img src="../../assets/images/home/index/live-01.png"/></a>
				</li>
				<li>
					<a href="https://mp.weixin.qq.com/s/v5NEPtYRj9Ijwm3tk9g-yg"><img src="../../assets/images/home/index/live-02.png"/></a>
				</li>
			</ul>
		</div>
		<!-- 头条 -->
		<div class="index-headlines section">
			<div class="index-title">
				<h2>有谱<em>头条</em></h2>
				<span>查看更多</span>
			</div>
			<ul class="index-headlines-list">
				<li @click="goDetail('/text01')">
					<p>如何让孩子找到有幸福感的专业方向和职业目标？</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goDetail('/text02')">
					<p>生涯规划师的服务伦理，以及处理与客户价值判断不一致的方法探讨</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goDetail('/text03')">
					<p>升学规划师能力的“冰山结构”</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goDetail('/text04')">
					<p>双减政策，减“教”不减“学”；生涯规划的目标是点燃学生求学热情，真正体现教育情怀</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goDetail('/text05')">
					<p>强基计划、综合评价报名材料如何准备</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goDetail('/text06')">
					<p>数字化生涯规划师：获权威认证，服务钉钉千万考生与家长</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
			</ul>
		</div>
		<tabbar :current="1"></tabbar>
	</div>
</template>

<script>
	import tabbar from "../../components/tabbar.vue";
	export default {
		name: "index",
		components: {
			tabbar,
		},
		data() {
			return {
				consult_amount: 0, //是否完善资料
				bannerSrc: "",
				expertData: [], //专家列表
			};
		},
		created() {
			if(this.$route.query.token){
				let token = this.$route.query.token;
				localStorage.token = JSON.stringify(token);
			}
			
			// 获取用户类型
			this.consult_amount = (JSON.parse(localStorage.getItem("centerUserData"))).consult_amount;
			console.log(this.consult_amount,3636)
		},
		mounted() {
			this.getBanner();
			this.getExpertData();
		},
		computed: {},
		methods: {
			// 测试跳转
			toEvaluation() {
				this.$router.push({
					path: "/evaluation",
				});
			},
			
			// 获取banner
			getBanner() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/dictionary/get-slide-list", {
						position: "h5_home_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: "3",
						is_home: 1,
					})
					.then(function(res) {
						let list = res.data.data.list;
						console.log(list,123)
						let newArray = [];
						list.forEach(item=>{
						  let obj = {
							id: item.id,
							work_time:item.work_time,
							avatar: item.avatar,
							name: item.name,
							keywords_list: item.keywords_list,
							home_keywords_list: item.home_keywords_list
						  }
						  newArray.push(obj);
						})
						that.expertData = newArray;
					});
			},
			
			// 跳转页面
			goPage(path){
				this.$router.push(path);
			},
			goDetail(path){
				this.$router.push(path);
			},
		},
	};
</script>

<style scoped>
</style>
