<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> -->

    <view class="funcList">
      <u-grid :col="rowNum" :border="false">
        <u-grid-item
          v-for="(item, index) in functionList"
          @click="jump(item.mini_program_url)"
          :key="index"
        >
          <image class="grid_Pic" :src="item.nav_icon" mode=""></image>
          <text>{{ item.nav_name }}</text>
        </u-grid-item>
      </u-grid>
    </view>

    <div
      v-for="(item, index) in tileList"
      :key="index"
      :class="['ads', index == 0 ? 'ads_first' : '']"
      @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"
        @click="detail(item)"
        :key="item.id"
      >
        <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">{{ loadMoreText }}</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,

      rowNum: 0,
      colNum: 0,

      page_size: 10,
      page_num: 1,
      flag: false,
      loadMoreText: "",
    };
  },
  async onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    // this.top = meun.height + meun.top;
    this.localHeight = meun.height;
    // this.getCommunityList()
    if (!uni.getStorageSync("changeCommData").id) {
      uni.setStorageSync("changeCommData", { name: "森呼吸二期", id: 14 });
    }

    this.communityVal = uni.getStorageSync("changeCommData").name;
    this.getfunctionNum();
    this.getAdvertising();
    this.getCategoryList();
  },

  //上拉刷新
  onPullDownRefresh() {
    this.communityVal = uni.getStorageSync("changeCommData").name;
    this.bannerList = [];
    this.currentIdx = 0;
    this.streamerList = []; //横幅广告
    this.tileList = []; //平铺广告
    this.largePopList = []; //巨幅弹屏广告
    this.popList = []; //弹屏广告
    this.categoryList = [];
    this.infoList = [];
    this.selectedTab = 0;
    this.currentAdIndex = 0;
    this.getfunctionNum();
    this.getAdvertising();
    this.getCategoryList();
    uni.stopPullDownRefresh();
  },
  //下拉加载
  onReachBottom() {
    if (this.flag) {
      this.page_num++;
      const currentItem = this.categoryList[this.selectedTab];
      if (currentItem) {
        this.selectTab(this.selectedTab, currentItem);
      }
    }
  },

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

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

    swipers(event) {
      // 获取当前轮播图索引
      this.currentIdx = event.detail.current;
    },

    async getfunctionNum() {
      const res = await request(
        apiArr.commInfo,
        "POST",
        {},
        {
          slice: false,
        }
      );
      this.rowNum = res.nav_row_num_comm;
      this.colNum = res.nav_row_total_comm;
      return await this.getfunctionList();
    },

    async getfunctionList() {
      const res = await request(apiArr.navPage, "POST", {
        community_id: Number(uni.getStorageSync("changeCommData").id),
        page_num: 1,
        page_size: 50,
      });
      console.log(res, "xx");

      // 获取 rowNum 和 colNum 的乘积
      const totalItems = this.rowNum * this.colNum;
      // 使用 slice 方法截取前 totalItems 个元素
      this.functionList = res.rows.slice(0, totalItems).map((item) => {
        return {
          ...item,
          nav_icon: picUrl + item.nav_icon,
        };
      });

      console.log("functionList", this.functionList);
    },

    async getAdvertising() {
      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() {
      // 获取当前显示的广告项
      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) {
      const isTabChange = this.selectedTab !== index;
      if (isTabChange) {
        this.page_num = 1;
        this.infoList = [];
        // this.loadMoreText = "下拉加载后续10条，共计30条";
      }
      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: this.page_num,
        page_size: this.page_size,
      });

      // 处理数据
      const newData = res.rows.map((item) => ({
        ...item,
        list_image: picUrl + item.list_image,
      }));

      // 判断是否还有更多数据
      const hasMore = res.rows.length === this.page_size;
      // 限制最多3页
      this.flag = hasMore;

      // 更新数据
      if (isTabChange) {
        this.infoList = newData;
      } else {
        this.infoList = this.infoList.concat(newData);
      }

      // 更新提示文本
      if (this.infoList.length > 10 && !hasMore) {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      } else {
        // this.loadMoreText = `下拉加载后续10条`;
      }
    },

    detail(e) {
      console.log(e);
      NavgateTo("../noticeDesc/index?id=" + e.id);
    },
  },
};
</script>

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