<template>
  <view class="index">
    <!-- 自定义导航栏 -->
    <view class="custom-nav" :style="{height: navBarHeight + 'px', paddingTop: navBarPaddingTop + 'px'}">
      <view class="community">
        <image class="icon" src="https://oss.wsdns.cn/20250627/340ae6bd9c014e75bb1da95e074a027e.png" />
        <text class="community-name">永新花园小区</text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <view class="main-content" :style="{paddingTop: (navBarHeight + navBarPaddingTop) + 'px'}">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <uni-icons type="search" size="20" color="#666" />
        <input class="search-input" placeholder="搜索关键词" @focus="handleSearchClick" />
      </view>
      <!-- 顶部背景和文字 -->
      <view class="top-banner">
        <image src="https://oss.wsdns.cn/20250627/cf0e0a3daaa74cb18cc9ce516b5e907a.png" class="top-bg" />
        <view class="top-text">
          <text class="main-title">智慧社区 全新升级</text>
          <text class="sub-title">打造理想绿色家园</text>
        </view>
      </view>
      <!-- 功能图标区 -->
      <view class="feature-icons">
        <view class="icon-item" @click="navTo('/pages/property-payment/index')">
          <image src="https://oss.wsdns.cn/20250626/47b4d7855f6047549a91dc527624cc32.png" style="width: 80rpx; height: 80rpx" />
          <text class="icon-text">物业缴费</text>
        </view>
        <view class="icon-item" @click="navTo('/pages/invitation-records/index')">
          <image src="https://oss.wsdns.cn/20250626/7f20a17fc30f4f23a8346a156b648d06.png" style="width: 80rpx; height: 80rpx" />
          <text class="icon-text">访客邀请</text>
        </view>
        <view class="icon-item" @click="navTo('/pages/repair/repair')">
          <image src="https://oss.wsdns.cn/20250626/430906cffba04241ae522625a1dc9271.png" style="width: 80rpx; height: 80rpx" />
          <text class="icon-text">物业报修</text>
        </view>
        <view class="icon-item" @click="navTo('/pages/remote-door/index')">
          <image src="https://oss.wsdns.cn/20250626/62c543af60204ff8868df41a31f79ec0.png" style="width: 80rpx; height: 80rpx" />
          <text class="icon-text">远程开门</text>
        </view>
        <view class="icon-item" @click="navTo('/pages/payment/index')">
          <image src="https://oss.wsdns.cn/20250626/21ba1bb210f945ffa7466c93ded9073b.png" style="width: 80rpx; height: 80rpx" />
          <text class="icon-text">生活缴费</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://oss.wsdns.cn/20250626/cb5e8d1e810142ceb3e0bdf4fd6e9fb1.png" class="swiper-img" />
        </swiper-item>
        <swiper-item>
          <image src="https://oss.wsdns.cn/20250626/cb5e8d1e810142ceb3e0bdf4fd6e9fb1.png" class="swiper-img" />
        </swiper-item>
      </swiper>
      <!-- 问卷调查和投票建议 -->
      <view class="survey-vote">
        <view class="item" @click="navTo('/pages/survey/index')">
          <image src="https://oss.wsdns.cn/20250627/c61cc97da9034d46abf757a68e11317d.png" class="item-img" />
        </view>
        <view class="item" @click="navTo('/pages/vote/index')">
          <image src="https://oss.wsdns.cn/20250627/85151fedafb4408e988ad43d15a6f8d7.png" class="item-img" />
        </view>
      </view>
      <!-- 公告列表 -->
      <view class="announcement-section">
        <view class="announcement-header">
          <image src="https://img.yzcdn.cn/vant/announcement.png" class="announcement-icon" />
          <text class="announcement-title">公告</text>
          <text class="more-text">更多</text>
        </view>
        <view class="announcement-list">
          <view class="announcement-item" v-for="(item, idx) in announcementList" :key="idx">
            <text class="item-title">{{ item.title }}</text>
            <view class="item-info">
              <image src="https://img.yzcdn.cn/vant/time.png" class="time-icon" />
              <text class="item-date">{{ item.date }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 悬浮AI按钮 -->
    <view class="ai-float" @click="navTo('/pages/ai/index')">
      <image style="width: 100rpx; height: 100rpx;" src="https://oss.wsdns.cn/20250627/b6ea18396b074f8db2f649c7db385419.png" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarHeight: 0,
      navBarPaddingTop: 0,
      announcementList: [
        { title: '关于高考温馨提示', date: '2025-06-06 16:48:38' },
        { title: '电梯日常维护保养', date: '2025-06-01 15:29:45' },
        { title: '电梯日常维护保养', date: '2025-05-18 17:23:57' },
        { title: '关于祥安e家系统平台恢复服务的通知', date: '2025-05-16 10:49:18' },
        { title: '关于祥安e家系统平台服务器升级的公告', date: '2025-05-14 18:01:51' }
      ],
      isLogin: false,
      userInfo: {
        avatar: '',
        mobile: ''
      },
      roleName: '注册用户',
      defaultAvatar: 'https://oss.wsdns.cn/20250627/340ae6bd9c014e75bb1da95e074a027e.png'
    }
  },
  methods: {
    navTo(url) {
      uni.navigateTo({ url })
    },
    handleSearchClick() {
      uni.showToast({ title: '搜索功能', icon: 'none' })
    },
    handleGetPhoneNumber(e) {
      this.isLogin = true
      this.userInfo.mobile = '138****8888'
      uni.showToast({ title: '登录成功', icon: 'success' })
    },
    onLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('access_token')
            uni.removeStorageSync('TenantId')
            uni.removeStorageSync('UserId')
            uni.removeStorageSync('userInfo')
            uni.reLaunch({ url: '/pages/index/index' })
          }
        }
      })
    }
  },
  mounted() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    const statusBarHeight = systemInfo.statusBarHeight || 0
    this.navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
    this.navBarPaddingTop = statusBarHeight
    // #endif
    // H5端可自定义高度
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
.ai-float {
  position: fixed;
  right: 20rpx;
  bottom: 200rpx;
  z-index: 999;
}
</style>