<template>
  <div class="home">
    <div class="container">
      <!-- <h1>磐医学知识图谱构建流程：</h1> -->
      <div class="process">
        <div class="box-item">
          <div class="box-rect" v-for="(item, idx) in process">
            <span class="image">
              <i :class="item.image"></i>
            </span>
            <span class="text">
              <div class="title">{{ item.title }}</div>
              <div class="description">{{ item.description }}</div>
            </span>
            <span class="index">
              <i>{{ idx + 1 }}</i>
            </span>
            <div class="box-triangle" type='start' v-if="idx !== 0"></div>
            <div class="box-triangle" type='end' v-if="idx !== process.length - 1"></div>
          </div>
        </div>
      </div>
      <div class="modules">
        <div v-for="item in modules" @click="handleModuleClick(item.path)">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, onBeforeUnmount, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { knowledgeGraphAddr } from "@/utils/config"
import { getSessionVar } from '@/utils/session'
import { handleError } from 'vue'
const router = useRouter()
let timer: any
// console.log("getSessionVar('knowledageSystem') ", getSessionVar('knowledageSystem'))
let process = ref<any>([
  {
    image: "node-icon",
    title: "构建知识库",
    description: "创建知识库、导入文档",
  },
  {
    image: "build-kg-icon",
    title: "自动化构建知识图谱",
    description: "文档载入、OCR识别、文档切片、知识抽取、自动构建",
  },
  {
    image: "rocket-icon",
    title: "知识融合管理",
    description: "知识更新、维护",
  }
])
let modules = ref<any>([
  {
    name: "知识库构建",
    path: "/kmplatform/knowledgebase/kbm",


  },
  {
    name: '知识图谱构建',
    path: "/kmplatform/kgbuilder",

  },
  {
    name: "知识图谱维护",
    path: knowledgeGraphAddr,

  }
])
watchEffect(() => {
  if (getSessionVar('knowledageSystem') == '') {
    modules.value = [
      {
        name: "知识库构建",
        path: "/kmplatform/knowledgebase/kbm",


      },
      {
        name: '知识图谱构建',
        path: "/kmplatform/kgbuilder",

      }
    ]
  }
}
)

function handleModuleClick(path: string) {
  if (/^https?/g.test(path)) {
    // path = 'http://localhost:8081/home.html'
    const newWindow = window.open(path, '_blank');
    timer = setInterval(() => {
      newWindow?.postMessage({ type: 'login', username: getSessionVar("full_name") }, "*")
    }, 1000)
  } else {
    router.push({ path: path })
  }
}
function handleLogin(event: any) {
  const { type, status } = event.data
  if (type === 'login' && status === 'ok') {
    // alert('登录成功')
    clearInterval(timer)
  }
}
onMounted(() => {
  window.addEventListener('message', handleLogin);
})

onBeforeUnmount(() => {
  window.removeEventListener('message', handleLogin);
  clearInterval(timer)
})
</script>

<style lang="less" scoped>
.rocket-icon {

  width: 95px;
  height: 95px;
}

.node-icon {
  width: 80px;
  height: 80px;
  margin: 0px 15px;
}

.home {
  padding: 50px 0px 10px;
  display: flex;
  justify-content: center;
  min-width: 0px;
  box-sizing: border-box;
  min-height: 100%;
  // overflow: visible;
  // width: 100%;
}

.container {
  min-width: 0;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.process {
  display: flex;
  // flex-wrap: nowrap;

  // justify-content: center;

}

.box-item {
  display: flex;
  // flex-wrap: nowrap;
  min-width: 0px;
  // justify-content: space-between;
  width: auto;
  overflow: visible;
}

.box-rect {
  // overflow: hidden;
  height: 180px;
  background-color: #F6F6F9;
  position: relative;
  margin-right: 20px;
  width: 580px;
  box-sizing: border-box;
  display: flex;
  // min-width: 0px;

  // box-sizing: border-box;
  .image,
  .text,
  .index {
    // height: 100%;
    // display: inline-block;
    height: 100%;
    box-sizing: border-box
  }

  .image {
    padding-left: 50px;
    // flex: 0 0 auto;
    line-height: 180px;

    .build-kg-icon {
      vertical-align: middle;
    }
  }

  .text {
    // display: flex;
    // flex-direction: column;
    // justify-content: space-evenly;
    padding: 40px 0;
    flex: 1 1 auto;

    .description {
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      // display: inline;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .index {
    flex: 0 0 100px;
    display: flex;
    justify-content: end;
    align-items: end;

    i {
      color: #D7DFFA;
      font-size: 130px;
      font-weight: bolder;
      transform: translate(0px, 25px) skewX(-15deg);
      display: inline-block;

    }

    overflow: hidden;
  }

  /* 为了放置三角形 */
  &:last-child {
    width: 540px;
    margin-right: 0px;

    .index {
      padding-right: 20px;
    }

  }

  &:first-child {
    width: 540px;

    .image {
      padding-left: 10px;
    }
  }
}

.box-triangle {
  width: 0;
  height: 0;
  border-top: 95px solid transparent;
  /* 左侧透明 */
  border-bottom: 85px solid transparent;
  /* 右侧透明 */
  border-left: 40px solid #F6F6F9;
  /* 上边框创建三角形 */
  position: absolute;


  &:is([type='end']) {
    left: 100%;
    z-index: 10;
  }

  &:is([type='start']) {
    left: 0;
    border-left: 40px solid #fff;
    z-index: 9;
  }

  // right: -20px;
  /* 将三角形放在矩形的右侧 */
  // top: 50%;
  /* 垂直居中 */
  // transform: translateY(-50%);
}

.modules {
  display: flex;
  justify-content: space-evenly;
  margin-top: 80px;

  &>div {
    //background-color: #F2F2F2;
    // background: rgba(215, 223, 250, 0.5);
    background: linear-gradient(#d7dffa 0%, #F6F6F9 100%);
    width: 350px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
