<template>
    <div class="app-container home" >
        <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
        <div class="page-content">
            <div class="title-bar">
                <span class="title">{{ t('pamm.pageTitle') }}</span>
            </div>
            <div class="mt-tabs">
                <div class="tab-items">
                    <div :class="['tab-item', { 'tab-item-active': activeName === 'pamm'}]" @click="tabClick('pamm')">{{ t('pamm.pamm') }}</div>
                    <div :class="['tab-item', { 'tab-item-active': activeName === 'login'}]" @click="tabClick('login')">{{ t('pamm.login') }}</div>
                    <div class="tab-active-bar"></div>
                </div>
            </div>
            <iframe v-show="activeName == 'pamm'" class="pamm-frame" :src="hosts[0]" ></iframe>
            <iframe v-show="activeName == 'login'" class="pamm-frame" :src="hosts[1]" ></iframe>
        </div>
    </div>
</template>

<script setup name="pamm">
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import { queryBannerList } from '@/api/common'
import { serverLang } from '@/utils/i18n'
import { useLocale } from 'element-plus'
import { ref } from "vue"

const domain = ref(window.location.hostname)
let index = domain.value.lastIndexOf(".");
const suffix = ref("co")
if(index>0){
    suffix.value =  domain.value.substring(index+1);
}
const hosts = ref([
  `https://stats.htfx.${suffix.value}/widgets/ratings?widgetKey=pamm-ratings`,
  `https://pamm.htfx.${suffix.value}/app/auth`
])

const { t } = useLocale()
const appStore = useAppStore()
const router = useRouter()

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const activeName = ref('pamm')

function tabClick(data) {
  if (data == activeName.value) {
    return
  }
  activeName.value = data
}

function closeBanner() {
    showBanner.value = false
    appStore.setShowBanner('0')
}

function loadBannerList() {
    queryBannerList({
        qcc_language: serverLang(),
        position: 1,
        type: 2
    }).then(resp => {
        if (resp.data) {
            bannerList.value = resp.data
        }
    })
}

function loadPageData() {
    loadBannerList();
}

loadPageData();
</script>

<style lang="scss" scoped>
.app-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.banner-bar {
    flex-shrink: 0;
  margin-bottom: 5px;
}

.page-content {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-shrink: 0;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }
}

.pamm-frame {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: none;
}

.mt-tabs {
  flex-shrink: 0;
  overflow-x: auto;
  width: 100%;
  height: 60px;
  .tab-items {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    height: 40px;
    color: rgba(102, 102, 102, 1);
    user-select: none;
    position: relative;

    .tab-item {
      padding: 0 50px;
      min-width: 170px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      white-space: nowrap;
    }

    .tab-item-active {
      color: rgba(51, 51, 51, 1);
      font-weight: 700;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        height: 4px;
        width: 100%;
        background-color: rgba(51, 51, 51, 1);
      }
    }
  }

  .tab-active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
  }
}
</style>