<template>
	<view>
		<view class="advert" v-if="isadvert && !advertflag && advertData.data !== '' && advertData.data !== null">
			<view class="advert-style1" v-if="advertData.params.style == 'default'">
				<view class="advert-mask" :style="'background-color: #000; opacity: 0.65;'" @click="advertClose()"></view>
				<view class="advert-style1-d">
					<view class="advert-style1-close" v-if="advertData.params.canclose == '0' && advertData.params.autoclose !== '0'">{{ countTimeNmu }}&nbsp;秒</view>
					<view class="advert-style1-close" @click="advertClose()" v-if="advertData.params.canclose == '1' && advertData.params.autoclose !== '0'">{{ countTimeNmu }}&nbsp;关闭</view>
					<view class="advert-style1-close" @click="advertClose()" v-if="advertData.params.canclose == '1' && advertData.params.autoclose == '0'">关闭</view>
					<swiper class="swiper" :indicator-dots="true" :circular="banner.circular" indicator-color="rgba(255,255,255,.4)"
					 indicator-active-color="rgba(255,255,255,.8)">
						<swiper-item v-for="(item, key) in advertData.data" :key="key">
							<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)">
								<image class="image" :src="item.imgurl" mode="scaleToFill"></image>
							</view>
							<view class="a" v-if="item.click == '1'" @click="advertClose()">
								<image class="image" :src="item.imgurl" mode="scaleToFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="advert-style2" v-else-if="advertData.params.style == 'small-bot'">
				<view class="advert-mask" :style="'background-color: '+advertData.style.background+'; opacity: '+advertData.style.opacity+';'"
				 @click="advertClose()"></view>
				<view class="advert-d">
					<view class="advert-close" v-if="advertData.params.canclose == '1'" @click="advertClose()">
						<view class="i icon iconfont icon-round_close_light"></view>
					</view>
					<swiper class="swiper" :indicator-dots="true" :circular="banner.circular" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.8)"
					 v-if="advertDataData.length > 1">
						<swiper-item class="swiper-item" v-for="(item, key) in advertData.data" :key="key">
							<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)">
								<image class="image" :src="item.imgurl" mode="widthFix"></image>
							</view>
							<view class="a" v-if="item.click == '1'" @click="advertClose()">
								<image class="image" :src="item.imgurl" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper-container-advert-one" v-else>
						<view class="swiper-item-one" v-for="(item, key) in advertDataData" :key="key">
							<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)">
								<image class="image" :src="item.imgurl" mode="widthFix"></image>
							</view>
							<view class="a" v-if="item.click == '1'" @click="advertClose()">
								<image class="image" :src="item.imgurl"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	export default {
		props: ['advertData'],
		data() {
			return {
				countTimeNmu: 0,
				banner: {
					indicatorDots: true,
					circular: false,
				},
				advertDataData: [],
				isadvert: null,
				advertflag: false
			}
		},
		computed: {

		},
		mounted() {
			this.openAdvert()
		},
		methods: {
			openAdvert() {
				let _this = this;
				// showType  0 每次显示  1 间隔
				if (!!_this.advertData.params && _this.advertData.params.showtype === '1') {
					let timeStamp = uni.getStorageSync(`timeStamp${_this.advertData.id}`),
						nowTime = Date.parse(new Date()) / 1000,
						showTime = _this.advertData.params.showtime;
					if (!!timeStamp) {
						let isadvert = (timeStamp + showTime * 60) > nowTime ? false : true;
						if (isadvert) {
							uni.setStorageSync(`timeStamp${_this.advertData.id}`, nowTime);
						}
						_this.isadvert = isadvert;
					} else {
						_this.isadvert = true;
						uni.setStorageSync(`timeStamp${_this.advertData.id}`, nowTime);
					}
				} else {
					_this.isadvert = true;
				}
				for (var i in _this.advertData.data) {
					_this.advertDataData.push(_this.advertData.data[i])
				}
				if (!!_this.advertData.params && _this.advertData.params.style == 'default' && _this.advertData.params.autoclose != 0) {
					_this.countTimeNmu = parseInt(_this.advertData.params.autoclose)
					setTimeout(_this.countTime, 1000)
				}
			},
			advertClose() {
				var that = this
				if (!!that.advertData.params && that.advertData.params.canclose == '1') {
					that.isadvert = false;
					that.advertflag = true;
					that.countTimeNmu = 0;
					clearTimeout(that.countTime)
				}
			},
			countTime() {
				var that = this
				that.countTimeNmu += -1;
				if (that.countTimeNmu > 0) {
					setTimeout(that.countTime, 1000)
				} else {
					that.advertClose()
				}
			},
			navigateTo(url) {
				App.navigationTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	.advert-mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .65);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.advert-d {
		width: 100%;
		height: calc((100vw - 80upx) / 0.7142);
		position: fixed;
		top: 100upx;
		left: 0;
		z-index: 101;
	}

	.advert-close {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		color: #fff;
		text-indent: 4upx;
		text-align: center;
		margin-left: -40upx;
		border-radius: 50%;
		position: fixed;
		left: 50%;
		bottom: 200upx;
		z-index: 999;
	}

	.advert-close .i {
		font-size: 80upx;
		display: inline;
	}

	.advert-d .swiper {
		height: 100%;
	}

	.advert-d .swiper-item-one {
		width: 100%;
		height: 100%;
	}

	.advert-d .swiper-item-one .a {
		height: 100%;
		padding: 0 80upx;
		margin-top: 40upx;
	}

	.advert-d .swiper-item-one .a .image {
		width: 100%;
		height: calc((100vw - 80upx) / 0.7142);
		max-height: 100%;
		border-radius: 10upx;
	}

	.advert-d .swiper-item {
		width: calc(100vw - 160upx);
	}

	.advert-d .swiper-item .a {
		height: 100%;
		padding: 0 80upx;
	}

	.advert-d .swiper-item .a .image {
		width: 100%;
		max-height: 90%;
		border-radius: 10upx;
	}

	.advert-d .swiper-container-advert-one {
		height: 100%;
	}

	.advert-style1-d {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
	}

	.advert-style1-close {
		height: 60upx;
		line-height: 60upx;
		color: #fff;
		font-size: 30upx;
		padding: 0 20upx;
		background-color: rgba(0, 0, 0, .65);
		border-radius: 100upx;
		position: absolute;
		top: 10%;
		right: 30upx;
		z-index: 99;
	}

	.advert-style1-d .swiper {
		height: 100%;
	}

	.advert-style1-d swiper-item {
		width: 100vw;
	}

	.advert-style1-d swiper-item .a {
		height: 100%;
	}

	.advert-style1-d swiper-item .a .image {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>
