<template>
  <view class="container">

    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper
        class="banner-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#007aff"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image
            :src="item.image"
            class="banner-image"
            mode="aspectFill"
            @click="onBannerClick(item)"
          />
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能菜单 -->
    <u-notice-bar :text="text1"></u-notice-bar>
    <view class="menu-section">
      <view class="menu-title">功能菜单</view>
      <view class="menu-grid">
        <view
          class="menu-item"
          v-for="(item, index) in menuList"
          :key="index"
          @click="onMenuClick(item)"
        >
          <view class="menu-icon">
            <image :src="item.icon" class="icon-image"/>
          </view>
          <text class="menu-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
<!--    <view class="quick-section">-->
<!--      <view class="section-title">快捷操作</view>-->
<!--      <view class="quick-list">-->
<!--        <view-->
<!--          class="quick-item"-->
<!--          v-for="(item, index) in quickList"-->
<!--          :key="index"-->
<!--          @click="onQuickClick(item)"-->
<!--        >-->
<!--          <view class="quick-left">-->
<!--            <image :src="item.icon" class="quick-icon"/>-->
<!--            <view class="quick-info">-->
<!--              <text class="quick-name">{{ item.name }}</text>-->
<!--              <text class="quick-desc">{{ item.desc }}</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <text class="quick-arrow">></text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <Login ref="Login"/>
  </view>
</template>

<script>
import Login from '@/components/Login.vue'

export default {
  components: {
    Login
  },
  data() {
    return {
      statusBarHeight: 0,
      bannerList: [
        {
          id: 1,
          image: '/static/images/微信图片_20250806173838_220.png',
          title: '电费管理',
          url: ''
        },
        // {
        //   id: 2,
        //   image: '/static/images/微信图片_20250806173838_221.png',
        //   title: '智能缴费',
        //   url: ''
        // },
        // {
        //   id: 2,
        //   image: '/static/images/微信图片_20250806173838_222.png',
        //   title: '智能缴费',
        //   url: ''
        // },
      ],
      menuList: [
        {
          id: 3,
          name: '用电月报',
          icon: '/static/images/微信图片_20250806173838_225.png',
          path: '/pages/monthlyReport/monthlyReport'
        },
        {
          id: 2,
          name: '用电年报',
          icon: '/static/images/微信图片_20250806173838_224.png',
          path: '/pages/yearlyReport/yearlyReport'
        },
        {
          id: 2,
          name: '推广邀请',
          icon: '/static/images/微信图片_20250806143327_218.png',
          path: '/pages/invitation/invitation'
        },
        {
          id: 1,
          name: '申请提现',
          icon: '/static/images/微信图片_20250806143327_216.png',
          path: '/pages/withdrawal/withdrawal'
        },
        {
          id: 3,
          name: '电费报表',
          icon: '/static/images/微信图片_20250806173838_223.png',
          path: '/pages/electricityReport/electricityReport'
        },
        {
          id: 4,
          name: '售电合同',
          icon: '/static/images/微信图片_20250806143327_217.png',
          path: '/pages/contract/contract'
        },


      ],
      quickList: [
        {
          id: 1,
          name: '本月用电量',
          desc: '查看当月用电统计',
          icon: '/static/images/微信图片_20250806143327_208.png',
          path: '/pages/monthlyReport/monthlyReport'
        },
        {
          id: 2,
          name: '缴费记录',
          desc: '查看历史缴费记录',
          icon: '/static/images/微信图片_20250806143327_212.png',
          path: '/pages/electricityReport/electricityReport'
        },
        {
          id: 3,
          name: '联系客服',
          desc: '在线客服咨询',
          icon: '/static/images/微信图片_20250806143327_210.png',
          path: '/pages/customerService/customerService'
        },
      ],
      text1: '这是最新通知'
    }
  },
  onLoad() {
    this.getSystemInfo()
    // this.$refs.Login.open()
  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight
    },
    onBannerClick(item) {
      console.log('点击轮播图:', item)
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    onMenuClick(item) {
      console.log('点击菜单:', item)
      uni.navigateTo({
        url: item.path
      })
    },
    onQuickClick(item) {
      console.log('点击快捷操作:', item)
      uni.navigateTo({
        url: item.path
      })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  background-color: #007aff;
  color: white;
}

.nav-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
}

.banner-section {
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.banner-swiper {
  height: 180px;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.menu-section {
  margin: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.menu-item {
  width: 33%;
  text-align: center;
  margin-bottom: 20px;
}

.menu-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background-color: #f0f8ff;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-image {
  width: 30px;
  height: 30px;
}

.menu-text {
  font-size: 12px;
  color: #666;
}

.quick-section {
  margin: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.quick-item:last-child {
  border-bottom: none;
}

.quick-left {
  display: flex;
  align-items: center;
}

.quick-icon {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}

.quick-info {
  display: flex;
  flex-direction: column;
}

.quick-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.quick-desc {
  font-size: 12px;
  color: #999;
}

.quick-arrow {
  color: #ccc;
  font-size: 16px;
}
</style>
