<template>
  <a-spin :loading="loading" :tip="$t('global.loading')">
    <a-card :body-style="{height: '100%'}">
      <a-tabs ref="iframeRef" justify>
        <template #extra>
          <a-space>
            <a-button type="primary" @click="handleListConfig">配置</a-button>
            <a-button type="primary" @click="toggle" style="margin-right: 20px;">进入/退出全屏</a-button>
          </a-space>
        </template>
        <a-tab-pane v-for="item in renderData" :key="item.id"
                    :title="item.projectName">
          <iframe class="ykite-iframe" :src="`${YKITE_DIAGRA}/diagram/preview/${item.id}/${token}`"></iframe>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-spin>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import {useFullscreen} from '@vueuse/core'
import useLoading from "@/hooks/loading";
import {listWebtopoProject} from "@/api/system/webtopo";
import {StationTypeEnum} from "@/api/system/device";
import {getToken} from "@/utils/auth";

const token = getToken();
//路由
const router = useRouter();
const props = withDefaults(defineProps<{
  stationType: number
}>(), {
  stationType: StationTypeEnum.power
})
/*************************** 变量区域 begin ***************************/
const iframeRef = ref<HTMLElement | null>(null);
// 全屏 or 非全屏
const {toggle} = useFullscreen(iframeRef);
const YKITE_DIAGRA = import.meta.env.VITE_YKITE_DIAGRA_URL;
const {loading, setLoading} = useLoading(false);
// tabsList
const renderData = ref<any[]>([]);
/*************************** 变量区域 end ***************************/

/*************************** 方法区域 begin ***************************/
/**
 * 获取tabs数据
 */
const fetchData = async () => {
  try {
    setLoading(true);
    const params = {
      pageSize: 1000,
      pageNum: 1,
      stationType: props.stationType
    }
    const res: any = await listWebtopoProject(params);
    if (res.code == 200) renderData.value = res.rows;
  } finally {
    setLoading(false);
  }
}
// 跳转配置
const handleListConfig = () => {
  const routes = {
    1: "/power/energy/search/diagram/list",
    2: "/pv/generation/diagram/list"
  };
  const path = routes[props.stationType as 1 | 2];
  console.log(path)
  if (path) {
    router.push({path});
  }
};

/*************************** 方法区域 end ***************************/

onMounted(async () => {
  await fetchData();
})
</script>

<style lang="less" scoped>
.arco-spin {
  width: 100%;
  height: 100%;

  .arco-card {
    height: 100%;
  }
}

:deep(.arco-card-body) {
  padding-top: 0;

  .arco-tabs-nav-tab{
    margin-top: 8px;
  }
}

.ykite-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>