<template>
  <view :key="layoutKey" :class="pageRootClass" class="tab-page home-root">
 
      <view class="home-body">
        <view class="home-banner">
          <swiper
            class="home-banner__swiper"
            circular
            autoplay
            :interval="4000"
            :duration="500"
            indicator-dots
            indicator-color="rgba(255,255,255,0.45)"
            indicator-active-color="#ffffff"
          >
            <swiper-item
              v-for="banner in banners"
              :key="banner.id"
              class="home-banner__item"
            >
              <view
                class="home-banner__slide"
                :class="'home-banner__slide--' + banner.tone"
                role="button"
                hover-class="home-banner__slide--hover"
                @click="onBanner(banner)"
              >
                <image
                  v-if="banner.image"
                  class="home-banner__img"
                  :src="banner.image"
                  mode="aspectFill"
                />
                <view class="home-banner__mask" />
                <view class="home-banner__copy">
                  <text class="home-banner__title text-body">{{ $t(banner.titleKey) }}</text>
                  <text class="home-banner__desc text-body">{{ $t(banner.descKey) }}</text>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>

        <view class="tp-card home-services">
          <view class="home-grid">
            <view
              v-for="item in gridItems"
              :key="item.id"
              class="home-grid__item"
              role="button"
              hover-class="home-grid__item--hover"
              @click="goEntry(item)"
            >
              <view class="home-grid__icon" :class="'home-grid__icon--' + item.tone">
                <up-icon :name="item.icon" :color="item.iconColor" :size="40" />
              </view>
              <text class="text-body home-grid__label">{{ $t(item.titleKey) }}</text>
            </view>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import tabPage from '@/mixins/tabPage'
import { useUserStore } from '@/store/user'

const GRID_ICON = '#5f7168'

export default {
  components: {
    'up-icon': UIcon
  },
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'nav.home',
      banners: [
        {
          id: 'news',
          titleKey: 'homePage.bannerNewsTitle',
          descKey: 'homePage.bannerNewsDesc',
          tone: 'green',
          url: '/package-a/breeding-news/index'
        },
        {
          id: 'clinic',
          titleKey: 'homePage.bannerClinicTitle',
          descKey: 'homePage.bannerClinicDesc',
          tone: 'teal',
          url: '/package-a/online-clinic/index'
        },
        {
          id: 'classroom',
          titleKey: 'homePage.bannerClassTitle',
          descKey: 'homePage.bannerClassDesc',
          tone: 'olive',
          url: '/package-a/agri-classroom/index'
        },
        {
          id: 'market',
          titleKey: 'homePage.bannerMarketTitle',
          descKey: 'homePage.bannerMarketDesc',
          tone: 'amber',
          url: '/package-a/yak-market/index'
        },
        {
          id: 'booking',
          titleKey: 'homePage.bannerBookingTitle',
          descKey: 'homePage.bannerBookingDesc',
          tone: 'indigo',
          url: '/package-a/booking-service/index'
        },
        {
          id: 'ai',
          titleKey: 'homePage.bannerAiTitle',
          descKey: 'homePage.bannerAiDesc',
          tone: 'violet',
          url: '/package-a/ai-assistant/index'
        },
        {
          id: 'medicine',
          titleKey: 'homePage.bannerMedicineTitle',
          descKey: 'homePage.bannerMedicineDesc',
          tone: 'coral',
          url: '/package-a/medicine-tools/index'
        },
        {
          id: 'resource',
          titleKey: 'homePage.bannerResourceTitle',
          descKey: 'homePage.bannerResourceDesc',
          tone: 'slate',
          url: '/package-a/livestock-resources/index'
        }
      ],
      gridItems: [
        {
          id: 'breedingNews',
          titleKey: 'homeGrid.breedingNews',
          icon: 'file-text',
          tone: 'sage',
          iconColor: GRID_ICON,
          url: '/package-a/breeding-news/index'
        },
        {
          id: 'livestockResources',
          titleKey: 'homeGrid.livestockResources',
          icon: 'folder',
          tone: 'leaf',
          iconColor: GRID_ICON,
          url: '/package-a/livestock-resources/index'
        },
        {
          id: 'agriClassroom',
          titleKey: 'homeGrid.agriClassroom',
          icon: 'play-circle',
          tone: 'clay',
          iconColor: GRID_ICON,
          url: '/package-a/agri-classroom/index'
        },
        {
          id: 'medicineTools',
          titleKey: 'homeGrid.medicineTools',
          icon: 'list',
          tone: 'mist',
          iconColor: GRID_ICON,
          url: '/package-a/medicine-tools/index'
        },
        {
          id: 'yakMarket',
          titleKey: 'homeGrid.yakMarket',
          icon: 'rmb-circle',
          tone: 'moss',
          iconColor: GRID_ICON,
          url: '/package-a/yak-market/index'
        },
        // {
        //   id: 'myStore',
        //   titleKey: 'homeGrid.myStore',
        //   icon: 'shopping-cart',
        //   tone: 'wheat',
        //   iconColor: GRID_ICON,
        //   url: '/package-a/my-store/index'
        // },
        {
          id: 'bookingService',
          titleKey: 'homeGrid.bookingService',
          icon: 'calendar',
          tone: 'pine',
          iconColor: GRID_ICON,
          url: '/package-a/booking-service/index'
        },
        {
          id: 'onlineClinic',
          titleKey: 'homeGrid.onlineClinic',
          icon: 'chat-fill',
          tone: 'sea',
          iconColor: GRID_ICON,
          url: '/package-a/online-clinic/index'
        },
        {
          id: 'aiAssistant',
          titleKey: 'homeGrid.aiAssistant',
          icon: 'grid-fill',
          tone: 'plum',
          iconColor: '#22C55E',
          url: '/package-a/ai-assistant/index'
        }
      ]
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    }
  },
  onShow() {
    if (this.userStore.isLoggedIn() && !this.userStore.state.roles.length) {
      this.userStore.fetchUserInfo().catch(() => {})
    }
  },
  methods: {
    goEntry(item) {
      if (!item.url) return
      uni.navigateTo({ url: item.url })
    },
    onBanner(banner) {
      if (!banner.url) return
      uni.navigateTo({ url: banner.url })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/tab-page.scss';
@import '@/styles/morandi.scss';

.home-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: $morandi-bg-page;
  box-sizing: border-box;
}

.home-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

.home-body {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 24rpx 24rpx 32rpx;
  min-width: 0;
  box-sizing: border-box;
}

.home-banner {
  min-width: 0;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 28rpx rgba(74, 69, 66, 0.08);
}

.home-banner__swiper {
  width: 100%;
  height: 300rpx;
}

.home-banner__item {
  width: 100%;
  height: 100%;
}

.home-banner__slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.home-banner__slide--hover {
  opacity: 0.92;
}

.home-banner__slide--green {
  background: linear-gradient(135deg, #3d9b6e 0%, #22c55e 55%, #86efac 100%);
}

.home-banner__slide--teal {
  background: linear-gradient(135deg, #4a7c6f 0%, #5f7168 50%, #8fb09a 100%);
}

.home-banner__slide--olive {
  background: linear-gradient(135deg, #5c6b4a 0%, #6b7f72 45%, #a8b89a 100%);
}

.home-banner__slide--amber {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #fde68a 100%);
}

.home-banner__slide--indigo {
  background: linear-gradient(135deg, #3730a3 0%, #6366f1 48%, #a5b4fc 100%);
}

.home-banner__slide--violet {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #ddd6fe 100%);
}

.home-banner__slide--coral {
  background: linear-gradient(135deg, #be123c 0%, #f43f5e 48%, #fecdd3 100%);
}

.home-banner__slide--slate {
  background: linear-gradient(135deg, #334155 0%, #64748b 50%, #cbd5e1 100%);
}

.home-banner__img {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  opacity: 0.35;
}

.home-banner__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 70%);
}

.home-banner__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 32rpx 28rpx 40rpx;
  gap: 10rpx;
  min-width: 0;
  box-sizing: border-box;
}

.home-banner__title {
  font-size: 34rpx;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.home-banner__desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.home-services {
  padding: 28rpx 16rpx 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(74, 69, 66, 0.06);
}

.home-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 0;
}

.home-grid__item {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 20rpx 10rpx 24rpx;
  gap: 14rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  transition: opacity 0.15s ease;
}

.home-grid__item--hover {
  opacity: 0.82;
}

.home-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
}

.home-grid__icon--sage {
  background: #e8f0e6;
}

.home-grid__icon--leaf {
  background: #e3efe8;
}

.home-grid__icon--clay {
  background: #efeae4;
}

.home-grid__icon--mist {
  background: #e8ecef;
}

.home-grid__icon--moss {
  background: #dfe8e0;
}

.home-grid__icon--wheat {
  background: #f0ebe3;
}

.home-grid__icon--pine {
  background: #e5ebe6;
}

.home-grid__icon--sea {
  background: #e4eaef;
}

.home-grid__icon--plum {
  background: #e8f5ec;
  border: 1rpx solid rgba(34, 197, 94, 0.2);
}

.home-grid__label {
  text-align: center;
  font-size: 26rpx;
  line-height: 1.4;
  color: $morandi-text;
  word-break: break-word;
  overflow-wrap: anywhere;
}
</style>
