<template>
  <view class="home-header-container">
    <view v-if="appStore.isShowAppDownload" class="home-header-fixed-view">
      <HomeDownloadAppItem />
    </view>
    <view class="w-full" :style="{
      height:
        (appStore.headerStyle.statusBarHeight +
          (appStore.isShowAppDownload ? 50 : 0)) +
        'px',
    }"></view>
    <view class="home-header flex justify-between items-center plr30">
      <view>
        <image class="app-logo2" :src="appStore.startImgUrls.headerLogo" mode="aspectFit" />
        <!-- <image src="@/static/images/logo.png" class="app-logo2" mode="aspectFit" /> -->
      </view>
      <view class="app-nav-right">
        <div v-if="appStore.phoneNumberPrefix === '+91' && promoStore.isShowTurnplate" class="nav-icon mr32">
          <theme-image class="service-icon" src="@/static/icon-home-game.png" mode="aspectFit"
            @click.stop="handleTurnplateClick" />
          <view v-if="promoStore.turnplate.totalRemainTimes > 0" class="red-count">
            {{ promoStore.turnplate.totalRemainTimes }}
          </view>
        </div>
        <div class="nav-icon">
          <theme-image class="service-icon" src="@/static/icon-mail.png" mode="aspectFit"
            @click.stop="handleMainClick" />
          <view v-if="mailStore.hasUnread" class="red-dot"></view>
        </div>
      </view>
    </view>
    <TurnplateGame ref="turnplateGameRef" />
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useMailStore } from "@/store/useMailStore.js";
import { useAppStore } from "@/store/useAppStore";
import { usePromoStore } from "@/store/usePromoStore";
import HomeDownloadAppItem from "./HomeDownloadAppItem.vue";
import TurnplateGame from "@/pages/promo/components/TurnplateGame.vue"

const appStore = useAppStore();
const mailStore = useMailStore();
const promoStore = usePromoStore()
const turnplateGameRef = ref(null)

const handleMainClick = () => {
  uni.navigateTo({
    url: "/pages/mail/Mail",
  });
};

const handleTurnplateClick = () => {
  turnplateGameRef.value.show()
}
</script>

<style lang="scss" scoped>
.home-header-container {
  position: relative;

  .home-header-fixed-view {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .home-header {
    height: 78rpx;
  }

  .header-logo {
    display: flex;
  }

  .app-logo {
    // max-width: 300rpx;
    height: 45rpx;
    object-fit: contain;
  }

  .app-logo2 {
    width: 250rpx;
    height: 50rpx;
    display: flex;
  }

  .service-icon {
    width: 60rpx;
    height: 46rpx;
    display: block;
  }

  .app-nav-right {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav-icon {
    position: relative;
  }

  .red-dot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 10rpx;
    background-color: red;
    position: absolute;
    right: -8rpx;
    top: -8rpx;
    z-index: 1;
  }

  .red-count {
    padding: 0rpx 12rpx;
    height: 24rpx;
    line-height: 24rpx;
    border-radius: 12rpx;
    background-color: red;
    position: absolute;
    right: -8rpx;
    top: -8rpx;
    font-size: 18rpx;
    text-align: center;
    z-index: 1;
  }
}
</style>
