<template>
	<div class="container">
		<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
			<div class="searchBox_add">
				<div class="emptyCommunity" @click="addCommunity"> {{communityVal}} </div>
				<!-- <div class="MyCommunity" v-if="false">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png"
						mode="aspectFill"></image>
					<span>惠生活</span>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</div> -->
			</div>
		</div>

		<div class="swiperBox1">
			<swiper @animationfinish="swipers" autoplay circular>
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)">
					<image :src="item.ad_picture" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<view class="dot">
				<view :class="['dotItem', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
					:key="index">
				</view>
			</view>

			<!-- <div class="dot">
				<div class="dotItem"></div>
				<div class="dotItem active"></div>
			</div> -->
		</div>

		<div class="swiperBox2">
			<swiper @animationfinish="swipers" autoplay circular>
				<swiper-item v-for="(item, index) in streamerList" :key="index" @click="headerServerClick(item)">
					<image :src="item.ad_picture" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</div>

		<div class="funcList">
			<div class="funcItem" v-for="item in functionList" @click="jump(item.mini_program_url)">
				<image :src="item.nav_icon"></image>
				{{ item.nav_name }}
			</div>
		</div>

		<div v-for="(item, index) in tileList" :key="index" class="ads" @click="headerServerClick(item)">
			<image :src="item.ad_picture" mode="aspectFill" />
		</div>

		<div class="tabs">
			<div v-for="(item, index) in categoryList" :key="index"
				:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
				{{ item.category_name }}
			</div>
		</div>

		<div class="newsList">
			<div class="newsItem" v-for="item in infoList">
				<div class="newsItem_left">
					<div class="newsItem_left_tit">{{item.title}}</div>
					<div class="newsItem_left_sub">{{item.author}}</div>
				</div>
				<div class="newsItem_right">
					<image :src="item.list_image" mode="aspectFill" />
				</div>
			</div>
		</div>

		<div class="tips">下拉加载后续10条，共计30条</div>

		<div class="bigAds" v-if="ads1Show">
			<div class="bigAdsCon">
				<div class="bigAdsCon_img">
					<swiper @animationfinish="swipers" autoplay circular>
						<swiper-item v-for="(item, index) in largePopList" :key="index"
							@click="headerServerClick(item)">
							<image :src="item.ad_picture" mode="aspectFill" />
						</swiper-item>
					</swiper>
				</div>
				<div class="close" @click="closeAds">
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_close.png"></image>
				</div>
			</div>
		</div>

		<div class="bigAds" v-if="ads2Show">
			<div class="bigAdsCon2">
				<div class="bigAdsCon2_img">
					<swiper :current="currentSwiperIndex" @change="onSwiperChange" @animationfinish="swipers" autoplay
						circular>
						<swiper-item v-for="(item, index) in popList" :key="index">
							<image :src="item.ad_picture" mode="aspectFill" />
						</swiper-item>
					</swiper>
				</div>
				<div class="AdsBtnList">
					<div class="AdsBtnItem1" @click="closeAds2">取消</div>
					<div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
				</div>
			</div>
		</div>
		<nav-footer :current="1" />
	</div>
</template>

<script>
	import {
		request,
		picUrl,
		uniqueByField,
		menuButtonInfo,
		NavgateTo
	} from '../../../utils';

	import {
		apiArr
	} from '../../../api/v2Community';


	export default {
		data() {
			return {
				communityVal: '添加我的房产',
				picUrl,
				top: "",
				localHeight: "",
				queryPage: {
					page_num: 1,
					page_size: 10,
				},
				communityList: [],
				flag: false,

				functionList: [],

				ads1Show: false,
				ads2Show: false,

				bannerList: [], //轮播图广告
				currentIdx: 0,
				streamerList: [], //横幅广告
				tileList: [], //平铺广告
				largePopList: [], //巨幅弹屏广告
				popList: [], //弹屏广告

				categoryList: [],
				infoList: [],
				selectedTab: 0,

				currentAdIndex: 0
			}
		},
		async onLoad(options) {
			const meun = menuButtonInfo();
			this.top = meun.top;
			// this.top = meun.height + meun.top;
			this.localHeight = meun.height;
			// this.getCommunityList()
			this.communityVal = uni.getStorageSync('changeCommData').name
			await this.getfunctionList()
			this.getAdvertising()
			this.getCategoryList()
		},


		methods: {
			desc() {
				NavgateTo("../communityDetail/index")
			},
			apply() {
				NavgateTo("../applyOwer/index")
			},
			closeAds() {
				this.ads1Show = false
			},
			closeAds2() {
				this.ads2Show = false
			},
			jump(e) {
				console.log(e);
				NavgateTo(e)
			},

			addCommunity() {
				NavgateTo("/packages/community/myCommunity/index")
			},

			// getCommunityList() {
			// 	let that = this
			// 	request(apiArr.getCommunityList, 'POST', {
			// 		page_num: that.queryPage.page_num,
			// 		page_size: that.queryPage.page_size,
			// 		user_id:""
			// 	}).then(res => {
			// 		console.log(res)
			// 		if (res.rows.length == that.queryPage.page_size) {
			// 			that.queryPage.page_num++
			// 			that.flag = true
			// 			that.communityList = that.communityList.concat(res.rows)
			// 		}else{
			// 			that.flag = false
			// 			that.communityList = that.communityList.concat(res.rows)
			// 		}
			// 	})
			// },
			swipers(event) {
				// 获取当前轮播图索引
				this.currentIdx = event.detail.current;
			},
			async getfunctionList() {
				const res = await request(apiArr.navPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					page_num: 1,
					page_size: 50
				})
				this.functionList = res.rows.map(item => {
					return {
						...item,
						nav_icon: picUrl + item.nav_icon
					};
				});
				console.log(this.functionList)
			},

			async getAdvertising() {
				// bannerList
				// streamerList
				// tileList
				// largePopList
				// popList
				const res = await request(apiArr.advPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					ad_position: 1,
					page_num: 1,
					page_size: 50
				})
				this.bannerList = res.rows.map(item => {
					return {
						...item,
						ad_picture: picUrl + item.ad_picture
					};
				});

				const res2 = await request(apiArr.advPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					ad_position: 2,
					page_num: 1,
					page_size: 50
				})
				this.streamerList = res2.rows.map(item => {
					return {
						...item,
						ad_picture: picUrl + item.ad_picture
					};
				});

				const res3 = await request(apiArr.advPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					ad_position: 3,
					page_num: 1,
					page_size: 50
				})
				this.tileList = res3.rows.map(item => {
					return {
						...item,
						ad_picture: picUrl + item.ad_picture
					};
				});

				const res4 = await request(apiArr.advPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					ad_position: 4,
					page_num: 1,
					page_size: 50
				})
				this.largePopList = res4.rows.map(item => {
					return {
						...item,
						ad_picture: picUrl + item.ad_picture
					};
				});
				this.ads1Show = res4.rows.length !== 0 ? true : false;

				const res5 = await request(apiArr.advPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					ad_position: 5,
					page_num: 1,
					page_size: 50
				})
				this.popList = res5.rows.map(item => {
					return {
						...item,
						ad_picture: picUrl + item.ad_picture
					};
				});
				this.ads2Show = res5.rows.length !== 0 ? true : false;
			},

			headerServerClick(e) {
				console.log('当前点击内容', e);
				if (!e.link_url) {
					this.NotOpen();
					return
				}
				if (e.link_url) {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + encodeURIComponent(e.link_url)
					});
					// #endif

					// #ifdef H5
					window.open(e.link_url, '_blank');
					// #endif

					// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
					if (e.appid) {
						uni.navigateToMiniProgram({
							appId: e.appid,
							path: e.link_url,
							//需要传递给目标小程序的数据
							extraData: {
								'data1': 'test'
							},
							success(res) {
								console.log('打开成功', res)
							}
						})
					} else {
						NavgateTo(e.link_url)
						// NavgateTo('/packages/localLife/index/index')
					}
					// 小程序中可能需要用户手动复制链接或使用web-view
					// uni.showModal({
					// 	title: '提示',
					// 	content: '即将打开外部链接，请复制后在浏览器中打开: ' + e.link_url,
					// 	confirmText: '复制链接',
					// 	success(res) {
					// 		if (res.confirm) {
					// 			uni.setClipboardData({
					// 				data: e.link_url,
					// 				success() {
					// 					uni.showToast({
					// 						title: '复制成功',
					// 						icon: 'success'
					// 					});
					// 				}
					// 			});
					// 		}
					// 	}
					// });
					// #endif
				}
			},
			onSwiperChange(e) {
				this.currentAdIndex = e.detail.current;
			},
			onDetailClick() {
				console.log('1111');
				// 获取当前显示的广告项
				const currentAd = this.popList[this.currentAdIndex];
				if (currentAd) {
					this.headerServerClick(currentAd);
				} else if (this.popList.length > 0) {
					// 如果当前索引无效，默认使用第一项
					this.headerServerClick(this.popList[0]);
				}
			},

			NotOpen() {
				uni.showModal({
					title: '提示',
					content: '此功能暂未开通！',
					showCancel: false,
					complete: (res) => {
						if (res.cancel) {

						}
					}
				})
			},

			async getCategoryList() {
				const res = await request(apiArr.categoryPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					category_code: "",
					category_name: "",
					page_num: 1,
					page_size: 30
				})
				this.categoryList = res.rows
				this.selectTab(0, res.rows[0])
			},

			async selectTab(index, item) {
				this.selectedTab = index;
				console.log('选中的tab:', index);
				const res = await request(apiArr.infoPage, "POST", {
					community_id: Number(uni.getStorageSync('changeCommData').id),
					announcement_category_id: item.id,
					title: '',
					category_name: '',
					page_num: 1,
					page_size: 10,
				})
				this.infoList = res.rows.map(item => {
					return {
						...item,
						list_image: picUrl + item.list_image,
					};
				});
			}
		},


	}
</script>

<style>
	@import url("./index.css");
</style>