<template>
  <view class="community-body">
    <view class="community-header">
      <img class="logo-image" :src="appStore.startImgUrls.headerLogo" mode="aspectFit" />
      <text
        class="community-header-text"
        :style="{ color: themeStore.theme.text.normal }"
      >
        {{ $t("promo.header.community") }}
      </text>
    </view>
    <view class="community-content">
      <view
        class="community-content-body"
        :style="{ background: themeStore.theme.lightBgColor }"
      >
        <view class="community-content-item">
          <view
            class="community-content-item-title"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ $t("promo.community.oneTitle") }}
          </view>
          <view
            class="community-content-item-text"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("promo.community.oneContent") }} {{ appStore.currencySign
            }}{{ promoStore.community.rewordBonus }}
          </view>
        </view>
        <view class="community-content-item">
          <view
            class="community-content-item-title"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ $t("promo.community.twoTitle") }}
          </view>
          <view
            class="community-content-item-text"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("promo.community.twoContent") }}
          </view>
        </view>
        <view class="community-content-item">
          <view
            class="community-content-item-title"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ $t("promo.community.threeTitle") }}
          </view>
          <view
            class="community-content-item-text"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("promo.community.threeContent") }}
          </view>
        </view>
        <view class="community-content-item">
          <view
            class="community-content-item-title"
            :style="{ color: themeStore.theme.text.normal }"
          >
            {{ $t("promo.community.foreTitle") }}
          </view>
          <view
            class="community-content-item-text"
            :style="{ color: themeStore.theme.text.subtitle }"
          >
            {{ $t("promo.community.foreContent") }}
          </view>
        </view>
      </view>
    </view>
    <view
      style="height: 1rpx"
      :style="{ background: themeStore.theme.darkSeplineColor }"
    ></view>
    <view class="community-footer">
      <view
        class="community-footer-btn"
        :style="{ background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
        @click.stop="handleJoinNowClick()"
      >
        <theme-image class="tg-icon" src="@/static/promo/tg.png"></theme-image>
        <text>{{ $t("promo.button.joinNow") }}</text>
      </view>
    </view>
    <empty-hold height="160"></empty-hold>
  </view>
</template>

<script setup>
import { useThemeStore } from "@/store/useThemeStore"
import { useAppStore } from "@/store/useAppStore"
import { openWeb } from "@/module/utils/openUrl"
import { usePromoStore } from '@/store/usePromoStore'
import { useUserStore } from "@/store/useUserStore"

const themeStore = useThemeStore()
const appStore = useAppStore()
const promoStore = usePromoStore()

const handleJoinNowClick = () => {
  openWeb(useUserStore().tgLink)
}
</script>

<style lang="scss" scoped>
.community-body {
  width: 100%;
  padding-top: 20rpx;

  .community-header {
    width: 100%;
    // height: 85rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    .logo-image {
      // width: 280rpx;
      height: 45rpx;
    }
    .community-header-text {
      margin-left: 16rpx;
      font-size: 30rpx;
      color: #e7ffff;
    }
  }
  .community-content {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    margin-top: 10rpx;

    .community-content-body {
      width: 100%;
      height: 100%;
      background: #7b0d0b;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 30rpx;
      padding-bottom: 60rpx;
      .community-content-item {
        width: 100%;

        .community-content-item-title {
          font-size: 36rpx;
          color: #fff;
          margin: 20rpx 0rpx;
        }
        .community-content-item-text {
          font-size: 26rpx;
          color: #fa8484;
        }
      }
    }
  }

  .community-footer {
    box-sizing: border-box;
    padding: 30rpx;

    .community-footer-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;
      box-sizing: border-box;
      font-size: 36rpx;
      color: #fff;
      border-radius: 50rpx;

      .tg-icon {
        width: 56rpx;
        height: 56rpx;
        margin-right: 30rpx;
      }
    }
  }
}
</style>
