<template>
	<div
		class="wrap"
		:style="{ backgroundImage: 'url(' + $imghost + bodyBg + ')' }"
	>
		<div
			class="onepage"
			v-if="username == '中新云农'"
			@click="goPage('/bQxz')"
			:style="{
				backgroundImage: 'url(' + $imghost + lists2.imgUrl + ')'
			}"
		></div>
		<div id="certify" v-else style="cursor: pointer">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div
						class="swiper-slide"
						v-for="(item, index) in lists"
						@click="goPage(item.type)"
						:key="index"
						:style="{
							backgroundImage: 'url(' + $imghost + item.imgUrl + ')'
						}"
					></div>
				</div>
			</div>
			<div
				class="swiper-button-prev"
				:style="{ backgroundImage: 'url(' + btnBg + ')' }"
			></div>
			<div
				class="swiper-button-next"
				:style="{ backgroundImage: 'url(' + btnBg + ')' }"
			></div>
			<div class="swiper-pagination"></div>
		</div>
		<template v-if="username != '中新云农'">
			<div class="btn-box">
				<ul>
					<li
						:class="{ active: aIndex == index }"
						@click="switchTo(index)"
						v-for="(item, index) in lists"
						:key="index"
					>
						{{ item.name }}
					</li>
				</ul>
			</div>
		</template>
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data() {
		return {
			bodyBg: '/images/bigdata/home/bg.jpg',
			btnBg: require('@/assets/images/bigdata/home/button.png'),
			certifySwiper: '',
			aIndex: 0,
			username: '', //当前登录的用户名
			lists2:
				//中新云农只展示气象站
				{
					type: '/bQxz',
					name: '气象监测系统',
					imgUrl: '/images/bigdata/home/qxz.png'
				},
			lists: [
				{
					type: '/bCbd',
					name: '虫情测报系统',
					imgUrl: '/images/bigdata/home/cbd.png'
				},
				// {
				// 	type: '/jk',
				// 	name: '监控系统',
				// 	imgUrl: '/images/bigdata/home/jk.png'
				// },
				{
					type: '/bBzy',
					name: '孢子仪系统',
					imgUrl: '/images/bigdata/home/bzy.png'
				},
				{
					type: '/bQxz',
					name: '气象监测系统',
					imgUrl: '/images/bigdata/home/qxz.png'
				},
				// {
				// 	type: '/farm',
				// 	name: '农场管理系统',
				// 	imgUrl: '/images/bigdata/home/farm.png'
				// },
				{
					type: '/bSy',
					name: '溯源系统',
					imgUrl: '/images/bigdata/home/sy.png'
				},
				{
					type: '/equipDistribute',
					name: '设备分布展示',
					imgUrl: '/images/bigdata/home/distribute.png'
				},
				{
					type: '/bFourSituations',
					name: '设备综合展示',
					imgUrl: '/images/bigdata/home/fourSituations.png'
				}
			]
		}
	},
	created() {
		this.username = localStorage.getItem('username')
	},
	mounted() {
		this.swiperInit()
	},
	methods: {
		switchTo(i) {
			this.aIndex = i
			this.certifySwiper.slideTo(i + 5, 1000, false)
		},
		swiperInit() {
			let _this = this
			this.certifySwiper = new Swiper('#certify .swiper-container', {
				watchSlidesProgress: true,
				slidesPerView: 'auto',
				centeredSlides: true,
				loop: true,
				loopedSlides: 5,
				autoplay: 3000,
				prevButton: '.swiper-button-prev',
				nextButton: '.swiper-button-next',
				pagination: '.swiper-pagination',
				paginationClickable: true,
				//paginationClickable :true,
				onProgress: function (swiper, progress) {
					for (var i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides.eq(i)
						var slideProgress = swiper.slides[i].progress
						var modify = 1
						if (Math.abs(slideProgress) > 1) {
							modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
						}
						var translate = slideProgress * modify * 260 + 'px'
						var scale = 1 - Math.abs(slideProgress) / 5
						var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
						slide.transform(
							'translateX(' + translate + ') scale(' + scale + ')'
						)
						slide.css('zIndex', zIndex)
						slide.css('opacity', 1)
						if (Math.abs(slideProgress) > 3) {
							slide.css('opacity', 0)
						}
					}
				},
				onSetTransition: function (swiper, transition) {
					for (var i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides.eq(i)
						slide.transition(transition)
					}
				},
				//处理分页器bug
				onSlideChangeStart: function (swiper) {
					if (swiper.activeIndex == 4) {
						swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active')
						console.log(swiper.bullets.length)
					}
				},
				//使右边菜单跟着动
				onSlideChangeEnd: function (swiper) {
					_this.aIndex = swiper.realIndex //切换结束时，告诉我现在是第几个slide
				}
			})
		},
		goPage(type) {
			const { href } = this.$router.resolve({
				path: type
			})
			console.log(href)
			window.open(href, '_blank')
		}
	}
}
</script>

<style lang='less' scoped>
body {
	overflow: hidden;
}
.wrap {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	overflow: hidden;
	#certify {
		position: relative;
		width: 1200px;
		margin: 0 auto;
		margin-top: 150px;
	}

	#certify .swiper-container {
		padding-bottom: 60px;
	}

	#certify .swiper-slide {
		width: 500px;
		height: 488px;
		background-size: 75% 100%;
		background-position: center center;
		background-repeat: no-repeat;
	}
	#certify .swiper-slide img {
		display: block;
	}
	#certify .swiper-slide p {
		line-height: 98px;
		padding-top: 0;
		text-align: center;
		color: #636363;
		font-size: 1.1em;
		margin: 0;
	}

	#certify /deep/.swiper-pagination {
		width: 100%;
		bottom: 20px;
	}

	#certify /deep/.swiper-pagination-bullets .swiper-pagination-bullet {
		outline: none;
		margin: 0 5px;
		border: 2px solid #fff;
		background-color: transparent;
		width: 10px;
		height: 10px;
		opacity: 1;
	}

	#certify /deep/.swiper-pagination-bullets .swiper-pagination-bullet-active {
		border: 2px solid #00aadc;
		background-color: transparent;
	}

	#certify .swiper-button-prev {
		left: -30px;
		width: 45px;
		height: 46px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		outline: none;
	}

	#certify .swiper-button-prev:hover {
		background-position: 0 -46px;
		background-size: 100%;
	}

	#certify .swiper-button-next {
		right: -30px;
		width: 45px;
		height: 46px;
		background-repeat: no-repeat;
		background-position: 0 -93px;
		background-size: 100%;
		outline: none;
	}

	#certify .swiper-button-next:hover {
		background-position: 0 -139px;
		background-size: 100%;
	}
	.btn-box {
		position: absolute;
		right: 0;
		color: #fff;
		top: 50%;
		transform: translateY(-50%);
		line-height: 36px;
		font-size: 15px;
		font-weight: 600;
		text-align: left;
		li {
			padding: 0 30px;
			cursor: pointer;
		}
		li.active {
			background: rgba(255, 255, 255, 0.3);
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}
	}
}
.onepage {
	width: 400px;
	height: 488px;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>