<template>
	<view class="index">
		<we-header id="header" :course-status="courseStatus" :message-num="messageNum"></we-header>
		<view class="status-height" :style="`padding-top: `+ tabs_height +`px;`">
			<u-tabs :itemStyle="`padding: 20rpx; padding-top: 0;`" :activeStyle="{
				color: '#333',
				fontWeight: 'bold',
				transition: 'all 0.6s',
				transform: 'scale(1.1)'
			}" lineColor="#e51f1d" bgColor="#ffffff" :lineWidth="40" :list="tabsList" @click="click" :current="tabsCurrent">
			</u-tabs>
		</view>
		<view v-show="tabsCurrent === 0">
			<dynamics-card />
			<dynamics-card :img="img" />
			<dynamics-card :img="img1" />
			<dynamics-card :img="img2" />
		</view>
		<view v-show="tabsCurrent === 1">
			<dynamics-card :img="img2" />
			<dynamics-card />
			<dynamics-card :img="img" />
			<dynamics-card :img="img1" />
		</view>
		<view v-if="tabsCurrent >= 2">
			<view>{{tabsCurrent}}</view>
		</view>
	</view>
</template>

<script>
	import dynamicsCard from "@/components/card/card"
	import weHeader from "@/components/we-header/we-header"
	export default {
		data() {
			return {
				tabsCurrent: 0,
				scrollTop: [],
				tabsList: [{
					name: '初级会计师'
				}, {
					name: '造价工程师'
				}, {
					name: '心里咨询师'
				}, {
					name: '消费工程师'
				}, {
					name: '各种工程师'
				}],
				messageNum: 9,
				tabs_height: 20,
				courseStatus: '已完成',
				img: [
					'https://ekt.xesimg.com/teacher/2019/12/24/15771728081092.png',
					'http://www.baiminedu.com/images/C2.jpg',
					'http://www.baiminedu.com/images/C3.jpg',
					'http://www.baiminedu.com/jisieducallpic/image/20180704/pxems_222799.jpg',
					'http://www.baiminedu.com/images/C1.jpg',
					'http://www.baiminedu.com/jisieducallpic/image/20210722/pxems_6646728.jpg',
					'http://www.baiminedu.com/jisieducallpic/image/20210827/pxems_7947915.jpg',
					'http://www.baiminedu.com/jisieducallpic/image/20210827/pxems_4323614.jpg',
					'http://www.baiminedu.com/jisieducallpic/image/20170512/pxems_7441525.jpg'
				],
				img1: [
					'https://ekt.xesimg.com/teacher/2019/12/24/15771728081092.png',
				],
				img2: [
					'https://ekt.xesimg.com/teacher/2019/12/24/15771728081092.png',
					'http://www.baiminedu.com/images/C2.jpg',
					'http://www.baiminedu.com/images/C3.jpg',
				],
			}
		},
		components: {
			weHeader,
			dynamicsCard
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.tabs_height = res.statusBarHeight
				},
				fail: () => {
					this.tabs_height = 20
				}
			})
			this.tabsList.forEach(() => {
				this.scrollTop.push(0)
			})
		},
		onPageScroll(res) {
			// console.log(res.scrollTop); //距离页面顶部距离
			this.scrollTop.splice(this.tabsCurrent, 1, res.scrollTop)
			// console.log(this.scrollTop)
		},
		methods: {
			click(item) {
				this.tabsCurrent = item.index
				const scrollTop = this.scrollTop[item.index]
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('#header').boundingClientRect(data => {
						console.log(data)
						uni.pageScrollTo({
							scrollTop: (scrollTop <= data.height) ? data.height : scrollTop,
							duration: 300
						});
					}).exec()
				})
				console.log(this.tabsCurrent, 'item', item);
				switch (item.index) {
					case 1:
						this.courseStatus = '进行中'
						break;
					case 2:
						this.courseStatus = '预报名'
						break;
					default:
						this.courseStatus = '已完成'
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url(./index.css)
</style>
