<template>
  <view class="home-container">
    <!-- 头部信息 -->

    <custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>

    <!-- 公告栏 -->
    <announcement-bar
      :announcement-icon="commonEnum.ANNOUNCEMENT_ICON"
      :announcement-text="announcementText"
      @announcement-click="onAnnouncementClick"
    />

    <!-- 轮播图 -->
    <banner-swiper
      :autoplay="autoplay"
      :banner-list="bannerList"
      :duration="duration"
      :indicator-dots="indicatorDots"
      :interval="interval"
      @change="onBannerChange"
      @banner-click="onBannerClick"
    />

    <!-- 设备列表 -->
    <equipment-list
      :equipment-list="equipmentList"
      :title="equipmentTitle"
      @renew="onRenew"
      @equipment-click="onEquipmentClick"
    />

    <!-- 底部导航已由系统tabBar处理 -->
  </view>
</template>

<script>
import commonEnum from '../../enum/commonEnum'
import AnnouncementBar from '../../components/announcement-bar/announcement-bar.vue'
import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
import EquipmentList from '../../components/equipment-list/equipment-list.vue'

export default {
  components: {
    AnnouncementBar,
    BannerSwiper,
    EquipmentList,
  },
  data() {
    return {
      // 基础配置
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      commonEnum: commonEnum,

      // 页面数据
      companyName: '福鼎创特物联科技有限公司',
      announcementText: '暂无更多公告! 暂无更多公告! 暂无更多公告!',
      equipmentTitle: '我的租赁设备',
      navItems: ['首页', '申请租赁', '个人中心'],
      activeNavIndex: 0,

      // 轮播图数据
      currentBannerIndex: 0,
      bannerList: [
        {
          image: commonEnum.TEMP1,
        },
        {
          image: commonEnum.TEMP1,
        },
        {
          image: commonEnum.TEMP2,
        },
        {
          image: commonEnum.TEMP1,
        },
      ],

      // 设备列表数据
      equipmentList: [
        {
          id: 1,
          name: '商用节能灶',
          status: 'normal',
          startTime: '2025-07-25 13:23:59',
          endTime: '2026-07-25 13:23:59',
          image: commonEnum.TEMP2,
        },
        {
          id: 2,
          name: '节能燃烧器',
          status: 'normal',
          startTime: '2025-07-25 13:23:59',
          endTime: '2026-07-25 13:23:59',
          image: commonEnum.TEMP3,
        },
      ],
    }
  },

  methods: {
    // 头部点击事件
    onLocationClick() {
      uni.showToast({
        title: '选择位置',
        icon: 'none',
      })
    },

    // 公告栏点击事件
    onAnnouncementClick() {
      uni.showToast({
        title: '查看公告详情',
        icon: 'none',
      })
    },

    // 轮播图变化事件
    onBannerChange(index) {
      this.currentBannerIndex = index
    },

    // 轮播图点击事件
    onBannerClick({ item, index }) {
      uni.showToast({
        title: `查看${item.name}详情`,
        icon: 'none',
      })
    },

    // 设备点击事件
    onEquipmentClick(equipment) {
      uni.showToast({
        title: `查看${equipment.name}详情`,
        icon: 'none',
      })
    },

    // 续费事件
    onRenew(equipment) {
      uni.showToast({
        title: `正在处理${equipment.name}的续费`,
        icon: 'none',
      })
    },

    // 底部导航点击事件
    onNavClick(index) {
      this.activeNavIndex = index
      const navItems = ['首页', '申请租赁', '个人中心']
      uni.showToast({
        title: `切换到${navItems[index]}`,
        icon: 'none',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-container {
  background: linear-gradient(to bottom, #ffddca 0px, #ffddca 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
  padding-bottom: 120rpx; /* 为底部导航留出空间 */
  max-width: 750rpx;
  margin: 0 auto;
  z-index: -2;
}
</style>
