<template>
  <view class="index">
    <!-- 自定义导航栏 -->
    <view class="custom-nav" :style="{height: navBarHeight + 'px', paddingTop: navBarPaddingTop + 'px'}">
      <view class="community" v-if="currentVillage">
        <image class="icon" src="/static/定位.png"/>
        <text class="community-name">{{ currentVillage.title }}</text>
      </view>
    </view>
    <u-gap :height="(navBarPaddingTop + navBarHeight) + 'px'"></u-gap>
<!--    <view class="pos-r">-->
      <image src="https://img.ggsxiangan.com/top-banner.png" mode="widthFix" class="w-100p"/>
<!--      &lt;!&ndash; 搜索栏 &ndash;&gt;-->
<!--      <view class="search-bar">-->
<!--        <view class="m-20 w-100p">-->
<!--          <u-search @click="handleSearchClick" :showAction="false" placeholder="搜索关键字" disabled/>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <!-- 主内容区域 -->
    <u-gap height="200rpx"></u-gap>
    <view class="main-content">

      <!-- 功能图标区 -->
      <view class="feature-icons">
        <view class="icon-item" @click="navToWithLoginAuth('/pages/user/property-bill')">
          <image src="https://oss.wsdns.cn/20250626/47b4d7855f6047549a91dc527624cc32.png"
                 style="width: 80rpx; height: 80rpx"/>
          <text class="text-24 mt-15">物业缴费</text>
        </view>
        <view class="icon-item" @click="navToWithLoginAuth('/servicePages/pages/invite')">
          <image src="https://oss.wsdns.cn/20250626/7f20a17fc30f4f23a8346a156b648d06.png"
                 style="width: 80rpx; height: 80rpx"/>
          <text class="text-24 mt-15">访客邀请</text>
        </view>
        <view class="icon-item" @click="navToWithLoginAuth('/servicePages/pages/fix')">
          <image src="https://oss.wsdns.cn/20250626/430906cffba04241ae522625a1dc9271.png"
                 style="width: 80rpx; height: 80rpx"/>
          <text class="text-24 mt-15">物业报修</text>
        </view>
        <view class="icon-item" @click="navToWithLoginAuth('/userPages/pages/remote-door')">
          <image src="https://oss.wsdns.cn/20250626/62c543af60204ff8868df41a31f79ec0.png"
                 style="width: 80rpx; height: 80rpx"/>
          <text class="text-24 mt-15">远程开门</text>
        </view>
        <view class="icon-item" @click="navToWithLoginAuth('/pages/user/property-bill')">
          <image src="https://oss.wsdns.cn/20250626/21ba1bb210f945ffa7466c93ded9073b.png"
                 style="width: 80rpx; height: 80rpx"/>
          <text class="text-24 mt-15">生活缴费</text>
        </view>
      </view>
      <!-- 广告图 -->
      <view class="ad-section">
        <image src="https://oss.wsdns.cn/20250626/5cf1908340ca4904bacc31ed1ad76558.png" class="ad-img"/>
      </view>
      <!-- 轮播图 -->
      <swiper class="swiper-container" indicator-dots indicator-color="#999" indicator-active-color="#333" autoplay
              interval="3000" duration="500">
        <swiper-item>
          <image src="https://img.ggsxiangan.com/banner-01.png" class="swiper-img"/>
        </swiper-item>
        <swiper-item>
          <image src="https://img.ggsxiangan.com/banner-02.png" class="swiper-img"/>
        </swiper-item>
        <swiper-item>
          <image src="https://img.ggsxiangan.com/banner-03.png" class="swiper-img"/>
        </swiper-item>
      </swiper>
      <!-- 问卷调查和投票建议 -->
      <view class="survey-vote">
        <view class="item" @click="navToWithLogin('/servicePages/pages/survey')">
          <image src="https://oss.wsdns.cn/20250627/c61cc97da9034d46abf757a68e11317d.png" class="item-img"/>
        </view>
        <view class="item" @click="navToWithLogin('/servicePages/pages/suggest')">
          <image src="https://oss.wsdns.cn/20250627/85151fedafb4408e988ad43d15a6f8d7.png" class="item-img"/>
        </view>
      </view>
      <!-- 公告列表 -->
      <view class="announcement-section" v-if="articleList.length">
        <view class="announcement-header">
          <image src="https://img.ggsxiangan.com/通知.png" class="announcement-icon"/>
          <text class="announcement-title">公告</text>
          <text class="more-text" @click="$jump(`/userPages/pages/articleList`)">更多</text>
        </view>
        <view class="announcement-list">
          <view class="announcement-item" v-for="(item, idx) in articleList" :key="idx"
                @click="$jump(`/userPages/pages/article?id=${item.articleId}`)">
            <text class="item-title">{{ item.title }}</text>
            <view class="item-info">
              <image src="https://img.ggsxiangan.com/时间戳.png" class="time-icon"/>
              <text class="item-date">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 悬浮AI按钮 -->
    <view class="ai-float" @click="navToWithLogin('/pages/ai/index')" v-if="!isAuditing">
      <image style="width: 160rpx; height: 160rpx;"
             src="https://img.ggsxiangan.com/ai.png"/>
    </view>
        <custom-tabbar :current="0"/>
    <Login ref="Login" @done="getUserData"/>
  </view>
</template>

<script>
import Login from "@/components/Login.vue";
import {userInfoReq} from "@/api/user";
import {getUserInfo} from "@/util/user";
import {userRoomListReq} from "@/api/room";
import {dictDataInfoReq, openDoorReq, pageArticleReq} from "@/api/common";
import dayjs from "dayjs";
import CustomTabbar from "@/components/customTabbar.vue";

export default {
  components: {CustomTabbar, Login},
  data() {
    return {
      navBarHeight: 0,
      navBarPaddingTop: 0,
      isLogin: false,
      userData: {},
      roleName: '注册用户',
      defaultAvatar: '',
      villageList: [],
      currentVillage: null,
      articleList: [],
      isAuditing: true
    }
  },
  methods: {
    dayjs,
    async getArticleList() {
      const {data} = await pageArticleReq({
        page: 1,
        limit: 5
      })
      this.articleList = data.list
    },
    async getRoomList() {
      this.villageList = []
      const {data} = await userRoomListReq()
      data.map(item => {
        if (item.villageName) {
          const exist = this.villageList.find(i => i.title === item.villageName)
          if (!exist) {
            this.villageList.push({
              title: item.villageName,
              value: item.baseVillageVillageCode
            })
          }
        }
      })
      if (this.villageList.length) {
        this.currentVillage = this.villageList[0]
      }
    },
    navToWithLoginAuth(url) {
      if (this.isLogin) {
        if (this.userData.wechatUser.isAudit === 3) {
          this.$toast('请先完成认证')
          setTimeout(() => {
            this.$jump('/pages/user/auth')
          }, 1500)
        } else {
          if (this.userData.wechatUser.isAudit === 0)
            this.$toast('认证审核中')
          else this.$jump(url)
        }
      } else {
        this.$refs.Login.open()
      }
    },
    navToWithLogin(url) {
      if (this.isLogin) {
        this.$jump(url)
      } else {
        this.$refs.Login.open()
      }
    },
    handleSearchClick() {
      uni.showToast({title: '搜索功能', icon: 'none'})
    },
    async getUserData() {
      const {data} = await userInfoReq()
      this.userData = data
      this.isLogin = true
      await this.getRoomList()
    },
    dev() {
      uni.showToast({
        title: '功能维护中',
        icon: 'none'
      })
    },
    async checkAudit() {
      const {data} = await dictDataInfoReq(3678)
      this.isAuditing = data.dictDataCode === '1'
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    const statusBarHeight = systemInfo.statusBarHeight || 0
    this.navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
    this.navBarPaddingTop = statusBarHeight
    this.getArticleList()
  },
  onShow() {
    if (getUserInfo().token) this.getUserData()
    this.checkAudit()
  },
  onShareAppMessage() {
    let path = `/pages/index/index`
    return {
      title: '祥安e家',
      path
    }
  },
  onShareTimeline() {
    let path = `/pages/index/index`
    return {
      title: '祥安e家',
      path
    }
  },
}
</script>

<style scoped lang="scss">
@import './index.scss';

.ai-float {
  position: fixed;
  right: 20rpx;
  bottom: 200rpx;
  z-index: 999;
}
</style>