<template>
	<div class="module-item-duo" :style="!module.base.m?'margin-top:0' : ''">
		<moduleTitle :title="module.title" v-if="module.title.t.s" />
		<view class="item-duo-con" :style="style">
			<moduleBg :base="module.base" />
			<!--样式一-->
			<view class="item-duo-style1" :class="'col' + module.base.c" v-if="module.base.s == 0">
				<view @click="$util.openAttr(module.list,index)" class="item" :url="item.link.n"
					v-for="(item,index) of module.list" :key="index" :data-url="item.link.n" :data-islink="item.link.g">
					<view class="c">
						<p class="pic">
							<image :src="item.icon.img" v-if="item.icon.img" mode="widthFix"></image>
							<image v-else :src="$util.icon('img')" mode="aspectFit"></image>
						</p>
						<view class="txt" v-if="item.text.s">
							<moduleText :text="item.text" :colorf="module.base.fc" />
						</view>
					</view>
				</view>
			</view>

			<!--样式二-->
			<view class="item-duo-style2" v-if="module.base.s == 1">
				<scroll-view v-if="module.list.length>0" scroll-x="true" class="scroll-view" style="width: 100%;">
					<view v-for="(item,index) of module.list" :key='index' @click="$util.openAttr(module.list,index)"
						:data-url="item.link.p" :data-is_link="item.link.g" class="swiper-slide item">
						<p>
							<image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
							<image v-else :src="$util.icon('img')"></image>
						</p>
						<view class="txt" v-if="item.text.s">
							<moduleText :text="item.text" :colorf="module.base.fc" />
						</view>
					</view>
				</scroll-view>
			</view>

			<!--样式三-->
			<view class="item-duo-style3" v-if="module.base.s == 2">
				<swiper v-if="module.list.length>0" class="screen-swiper card-swiper" interval="5000" duration="300"
					circular="true">
					<block v-for=" (item,index) of module.list" :key='index'>
						<swiper-item>
							<view @click="$util.openAttr(module.list,index)" class="swiper-item" :url="item.link.n"
								:data-url="item.link.p" :data-islink="item.link.g">
								<p class="pic">
									<image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
									<image v-else :src="$util.icon('img')" mode="aspectFit"></image>
								</p>
								<p class="txt" v-if="item.text.s">
									<moduleText :text="item.text" :colorf="module.base.fc" />
								</p>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			
			
			<!--样式四-->
			<view class="item-duo-style4" v-if="module.base.s == 3">
				<swiper v-if="module.list.length>0" class="item" autoplay="true" interval="5000" duration="300"
					indicator-color="#999" indicator-active-color="#007aff" indicator-dots="true" circular="true">
					<block v-for="(item,index) of module.list" :key='index'>
						<swiper-item>
							<view @click="$util.openAttr(module.list,index)" class="swiper-item" :url="item.link.n"
								:data-url="item.link.p" :data-islink="item.link.g">
								<p class="pic">
									<image :src="item.icon.img" v-if="item.icon.img" mode="aspectFit"></image>
									<image v-else :src="$util.icon('img')" mode="aspectFit"></image>
								</p>
								<p class="txt" v-if="item.text.s">
									<moduleText :text="item.text" :colorf="module.base.fc" />
								</p>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</div>
</template>
<script>
	import moduleBg from './bg.vue';
	import moduleText from './text.vue';
	import moduleTitle from './title.vue';
	// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
	// import Swiper2, { Pagination } from 'swiper';
	// Swiper2.use([Pagination]);
	// import 'swiper/swiper-bundle.css';
	let that = null;
	export default {
		props: ['module'],
		components: {
			moduleBg,
			moduleText,
			moduleTitle
		},
		// directives: { swiper: directive },
		data() {
			return {
				nav: [],
				swiperOption1: {
					slidesPerView: 4,
					spaceBetween: 10,
					observer: true,
					observeParents: true,
					loop: false,
					on: {
						click: function(e) {
							that.$util.openAttr(that.module.list, e.clickedIndex);
						}
					}
				},
				swiperOption2: {
					slidesPerView: 'auto',
					spaceBetween: 10,
					observer: true,
					observeParents: true,
					loop: false,
					on: {
						click: function(e) {
							that.$util.openAttr(that.module.list, e.clickedIndex);
						}
					}
				},
				swiperOption3: {
					loop: true,
					autoplay: 3000,
					observer: true,
					observeParents: true,
					pagination: {
						el: '.swiper-pagination'
					},
					on: {
						click: function(e) {
							that.$util.openAttr(that.module.list, e.clickedIndex);
						}
					}
				}
			};
		},

		created() {
			that = this;
		},

		computed: {
			style() {
				if (this.module.base.fc != '') {
					return `color:${this.module.base.fc}`;
				}
			},
		},

		mounted() {},
		methods: {}
	};
</script>

<style>
	.module-item-duo {
		margin-top: 10px;
		position: relative;
	}

	.module-item-duo .mg0 {
		margin-top: 0;
	}

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

	.module-item-duo .item-duo-style1 {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		z-index: 1;
		/* padding: 0 10px; */
		padding-top: 10px;
		padding-right: 10px;
		overflow: hidden;
		/* justify-content: space-between; */
	}

	.module-item-duo .item-duo-style1.col1 .item {
		width: 100%;
	}

	.module-item-duo .item-duo-style1.col2 .item {
		width: 50%;
	}

	.module-item-duo .item-duo-style1.col3 .item {
		width: 33.333333%;
	}

	.module-item-duo .item-duo-style1.col4 .item {
		width: 25%;
	}

	.module-item-duo .item-duo-style1 .item {
		width: 33.3333333%;
		padding-left: 10px;
		padding-bottom: 10px;
	}

	.module-item-duo .item-duo-style1 .item .c {
		overflow: hidden;
	}

	.module-item-duo .item-duo-style1 .item .c image {
		/* object-fit: cover; */
		display: block;
		width: 100%;
		height: 150rpx;
	}

	.module-item-duo .item-duo-style1 .item .c .txt {
		white-space: nowrap;
		padding: 15rpx 0px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	.module-item-duo .item-duo-style2 {
		position: relative;
		z-index: 1;
		padding: 10px 0;
		overflow: hidden;
	}

	.module-item-duo .item-duo-style2 .item {
		width: 25%;
		display: inline-block;
	}

	.module-item-duo .item-duo-style2 .scroll-view {
		white-space: nowrap;
	}

	.module-item-duo .item-duo-style2 .item image {
		display: block;
		width: 60px;
		margin: 0 auto;
		height: 60px;
		border-radius: 50%;
		object-fit: cover;
	}

	.module-item-duo .item-duo-style2 .item .txt {
		white-space: nowrap;
		padding: 15rpx 0px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.swiper-slide {
		width: 100%;
		height: 100%;
	}


	.module-item-duo .item-duo-style4 {
		position: relative;
		z-index: 1;
		height: 170px;
		padding: 10px;
	}

	.module-item-duo .item-duo-style4 .item {
		width: 100%;
		height: 100%;
	}

	.module-item-duo .item-duo-style4 .item .pic {
		width: 100%;
		height: 100%;
	}

	.module-item-duo .item-duo-style4 .item .pic image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.module-item-duo .item-duo-style4 .item .txt {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		white-space: nowrap;
		padding: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.module-item-duo .item-duo-style3 {
		position: relative;
		z-index: 1;
		padding: 10px;
	}

	.module-item-duo .item-duo-style3 .item {
		height: 150px;
	}

	.module-item-duo .item-duo-style3 .item .pic {
		height: 150px;
	}

	.module-item-duo .item-duo-style3 .item .pic image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.module-item-duo .item-duo-style3 .item .txt {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		white-space: nowrap;
		padding: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.screen-swiper {
		/* min-height: 375rpx; */
	}

	.screen-swiper image,
	.screen-swiper video,
	.swiper-item image,
	.swiper-item video {
		width: 100%;
		display: block;
		height: 100%;
		margin: 0;
		pointer-events: none;
	}

	.card-swiper {
		height: 126px !important;
	}

	.card-swiper swiper-item {
		/* width: 610rpx !important; */
		/* left: 0rpx; */
		box-sizing: border-box;
		/* padding: 40rpx 0rpx 70rpx; */
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		-webkit-transition: all 0.2s ease-in 0s;
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item .swiper-item .pic {
		width: 100%;
		/* height: 100%; */
	}

	.card-swiper swiper-item.cur .swiper-item {
		-webkit-transform: none;
		transform: none;
		-webkit-transition: all 0.2s ease-in 0s;
		transition: all 0.2s ease-in 0s;
	}


	.item-duo-style3 .swiper-item .pic{
		height: 100px;
	}

	.item-duo-style3 .swiper-item .txt {
	/* 	position: absolute;
		left: 0;
		bottom: 0; */
		z-index: 1;
		white-space: nowrap;
		padding: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	
</style>
