<template>
  <YkiteFullScreenContainer>
    <!--  背景图片  -->
    <div class="container-bg-box">
      <video v-if="isVideo"
             class="video-background"
             :src="backgroundImage"
             tabindex="-1"
             loop playsinline autoplay muted preload="auto"></video>
      <img v-if="!pageInfo.background.url.endsWith('.mp4') && backgroundImage" class="image-background" :src="backgroundImage" alt="">
    </div>
    <!--  头部  -->
    <div class="header-view" :style="headerBackgroundStyle">
      <header-bi :title="pageInfo.pageName" :headerData="pageInfo.header" v-if="pageInfo.header"
                 :pageTemplate="pageInfo.pageTemplate"></header-bi>
    </div>
    <!--  中间内容  -->
    <div class="midden-view">
      <template-old v-if="pageInfo.pageTemplate == 1" :pageInfo="pageInfo" :background-cover="defaultConfig.backgroundCover" />
      <template-new v-if="pageInfo.pageTemplate == 2" :pageInfo="pageInfo" :background-cover="technologyConfig.backgroundCover" />
    </div>
    <!--  底部  -->
    <div class="footer-view">
      <footer-bi/>
    </div>

    <!-- 操作弹框 start -->
    <a-modal width="450px" v-model:visible="errorInfo.visible" class="modal-box" :mask-closable="false"
             :closable="false">
      <template #title>
        <icon-exclamation-circle size="18" style="color: rgb(var(--orange-6)); margin-right: 5px"/>
        {{ $t('global.confirmTip') }}
      </template>
      <a-spin style="width: 100%;height: 100%">
        <div style="text-align: center;">{{ errorInfo.message }}
        </div>
      </a-spin>
      <template #footer>
        <div style="text-align: center">
          <a-space>
            <a-button type="primary" :loading="errorInfo.loading" @click="handleOperateModelOk">
              {{ $t('global.confirm') }}
            </a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 操作弹框 end -->
  </YkiteFullScreenContainer>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {getBiInfo} from "@/api/manage/station";
import TemplateOld from '@/views/bi/template/default/index.vue';
import TemplateNew from '@/views/bi/template/technology/index.vue';
import HeaderBi from "@/views/bi/components/headerBi.vue";
import FooterBi from "@/views/bi/components/footerBi.vue";
import {notification} from "@/hooks/my-design";
import {useAppStore} from "@/store";

interface IRouteQuery {
  stationId: string,
  isPre: string,
}
const appStore = useAppStore();
const route: any = useRoute();
const router = useRouter();

const pageInfo = ref<any>({
  pageTemplate: '0',
  background: {
    type: "image",
    url: ''
  },
  cardList: {
    bottomList: [],
    leftTop: [],
    rightTop: []
  }
})

const errorInfo = ref<any>({
  visible: false,
  loading: false,
  message: ''
})
// default 模板背景配置
const defaultConfig = JSON.parse(import.meta.env.VITE_Bi_DEFAULT_CONFIG);
// technology 模板背景配置
const technologyConfig = JSON.parse(import.meta.env.VITE_Bi_TECHNOLOGY_CONFIG);

// header 背景图片
const headerBackgroundStyle = computed(() => {
  if (pageInfo.value.pageTemplate == 2) {
    return {
      backgroundImage: `url(${new URL('@/assets/bi/technology/navbar.png', import.meta.url).href})`
    }
  }
  if (pageInfo.value.pageTemplate == 1) {
    return {
      backgroundImage: `url(${new URL('@/assets/bi/default/navbar.png', import.meta.url).href})`
    }
  }
})
// 背景图片
const backgroundImage = computed(() => {
  const backgroundUrl = pageInfo.value.background.url;
  const pageTemplate = pageInfo.value.pageTemplate;

  if (backgroundUrl) {
    return backgroundUrl;
  }

  if (pageTemplate == 2) {
    return technologyConfig.background;
  }

  if (pageTemplate == 1) {
    return defaultConfig.background;
  }

  return null; // 处理没有匹配的情况
});
const isVideo = computed(() => {
  if (!pageInfo.value.background.url && pageInfo.value.pageTemplate == 1) {
    return true
  }
  return !!(pageInfo.value.background.url && pageInfo.value.background.url.endsWith('.mp4'));

})

const getInfo = async () => {
  try {
    const {stationId, isPre}: IRouteQuery = route.query;
    const res: any = await getBiInfo({stationId, isPre});
    if (res.code === 200 && !res.data.code) {
      pageInfo.value = res.data;
    } else if (res.code === 500) {
      errorInfo.value.visible = true;
      errorInfo.value.message = res.msg || '当前站点未配置大屏界面，请配置后再访问！';
    } else {
      notification(res);
    }
  } catch (e) {
    console.log(e, '大屏模板报错')
  }
}

const handleOperateModelOk = () => {
  errorInfo.value.visible = false;
  back();
}

// 返回
const back = () => {
  router.back();
};

onMounted(() => {
  appStore.toggleTheme(true);
  getInfo();
})
</script>

<style lang="less" scoped>
#ykite-full-screen-container {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #FFFFFF;
  font-family: Source Han Sans;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;

  .container-bg-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    .video-background, .image-background {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 800px;
    }
  }

  .header-view {
    padding: 0 32px;
    height: 80px;
    font-size: 28px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }

  .midden-view {
    height: calc(100% - 160px);
  }

  .footer-view {
    height: 40px;
  }
}

</style>