<template>
	<div class="module-item-tuwen" :style="!module.base.m ? 'margin-top:0':''">
		<div class="item-tuwen-con">
			<moduleBg :base="module.base" />
			<!--样式一-->
			<div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 0">
				<ad v-if="banner_id" :unitId="banner_id"></ad>
			</div>
			<!--样式二-->
			<div class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
				<div @click="bindad" class="item" :style="!module.base.m ? 'margin:0' : ''">
					<p v-if="module.img">
						<image :style="style" :src="module.img" />
					</p>
					<p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
					<div class="note" v-if="module.note.s">
						<moduleText :text="module.note" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import moduleBg from './bg.vue';
	import moduleText from './text.vue';
	export default {
		props: ['module'],
		components: {
			moduleBg,
			moduleText
		},
		data() {
			return {
				banner_id: '',
			};
		},

		computed: {
			style() {
				let style = `height:${this.module.note.h}px;`;
				return style;
			},
		},

		mounted() {
			this.banner_id = uni.getStorageSync("systemInfo").set.banner_id;
		},

		methods: {
			bindad() {
				let that = this;
				let videoAd = wx.createRewardedVideoAd({
					adUnitId: uni.getStorageSync("systemInfo").set.jili_id,
				});
				try {
					if (videoAd.closeHandler) {
						videoAd.offClose(videoAd.closeHandler);
						console.log("---videoAd.offClose 卸载成功---");
					}
				} catch (e) {
					console.log("---videoAd.offClose 卸载失败---");
					console.error(e);
				}
				videoAd.closeHandler = function(res) {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded || res === undefined) {
						// 正常播放结束，可以下发奖励
						console.log("播放完毕");
						that.advertisements()
					} else {
						//提前关闭小程序
						uni.showToast({
							title: '观看结束才能获得积分喔',
							icon: 'none'
						})
					}
				};
				videoAd.onClose(videoAd.closeHandler);
				videoAd.onLoad((err) => {
					console.log(err, '激励视频 广告加载成功')
				})
				videoAd.onError((err) => {
					console.log(err, '激励视频 广告显示失败')
				})

				if (videoAd) {
					videoAd.show().catch(() => {
						// 失败重试
						videoAd.load()
							.then(() => videoAd.show())
							.catch(err => {
								console.log(err, '激励视频 广告显示失败')
								uni.showToast({
									title: '激励视频,广告显示失败',
									icon: 'none'
								})
							})
					})
				}

			},

			advertisements() {
               let params = {
                    user_id: this.$store.state.userInfo.id,
                    store_id: this.$store.state.store_id,
                }
                let share_user_id = uni.getStorageSync('share_user_id')
                if (share_user_id) {
                    params.share_id = share_user_id
                }		
				this.$http.request('yy/get_advertisements', params, "", "", true).then(res => {
					if (res.code == "200") {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch((res) => {});
			},
		}
	};
</script>

<style lang="less">
	/***图文模块***/
	.module-item-tuwen {
		margin-top: 10px;
		position: relative;

		.mg0 {
			margin-top: 0;
		}

		.item-tuwen-con {
			position: relative;
			overflow: hidden;
		}

		.item-tuwen-style1 {
			position: relative;
			z-index: 1;
			padding: 10px 0;
			overflow: hidden;

			.tit {
				white-space: nowrap;
				font-size: 14px;
				padding: 10px;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item {
				margin: 0 10px;
				position: relative;
				overflow: hidden;
				width: auto;

				image {
					display: block;
					height: 150px;
					width: 100%;
				}

				.note {
					line-height: 18px;
					color: #fff;
					background: rgba(0, 0, 0, 0.5);
					position: absolute;
					bottom: 0;
					padding: 6px 10px;
					width: 100%;
				}
			}
		}

		.item-tuwen-style2 {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			z-index: 1;
			padding: 10px 0;
			overflow: hidden;

			.item {
				margin: 0 10px;
				width: 100%;

				image {
					display: block;
					height: 150px;
					width: 100%;
				}

				.tit {
					white-space: nowrap;
					font-size: 14px;
					padding-top: 10px;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.note {
					line-height: 20px;
					color: #999;
					padding: 6px 10px;
				}
			}
		}
	}
</style>
