<script setup lang="ts" name="dashboard">
import useUserStore from '@/store/modules/user'
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
const { proxy } = getCurrentInstance() as any
const width = document.body.clientWidth
const height = ref(document.body.clientHeight)
window.addEventListener('resize', () => {
  height.value = document.body.clientHeight
})
const user = useUserStore()
const $router = useRouter()
const newPage = ref(proxy.config.DataVUrl)
const current = () => {
  return newPage.value.filter(item => item.name === props.name)[0]
}
current()
const src = ref('')
const timer = ref()
const count = ref(0)
onMounted(() => {
  src.value = `${current().url}?token=${user.token}`
  const shanhaiFrame = document.getElementById('shanhai-frame') as HTMLIFrameElement
  shanhaiFrame.addEventListener('load', (e) => {
    console.log('页面挂载完毕')
    const json = {
      trigger: 'click',
      conditions: {},
      boardId: '',
      widgetId: '',
    }
    // 页面 进度条加载完成
    timer.value = setInterval(() => {
      count.value += 1
      if (count.value >= 10) {
        clearInterval(timer.value)
      }
      if (props.name.includes('评价')) {
        console.log(props.name)
      }
      else if (props.name.includes('预警')) {
        json.boardId = 'd76dd9e6-e001-4caf-89fa-191038f3ca68'
        json.widgetId = 'd4a2b18d-de8b-4fab-8118-787ff9342be1'
        setTimeout(() => {
          shanhaiFrame.contentWindow.postMessage(Object.assign(json, { type: 'triggerInteract' }), '*')
        })
      }
      else if (props.name.includes('监测')) {
        json.boardId = 'd76dd9e6-e001-4caf-89fa-191038f3ca68'
        json.widgetId = 'e352ab64-d595-45b0-868d-ce0b42754469'
        setTimeout(() => {
          shanhaiFrame.contentWindow.postMessage(Object.assign(json, { type: 'triggerInteract' }), '*')
        })
      }
      console.log(123, props.name)
    }, 1500)

    // 预警 {"optionKey":"text","value":"跳转预警","boardId":"d76dd9e6-e001-4caf-89fa-191038f3ca68","widgetId":"d4a2b18d-de8b-4fab-8118-787ff9342be1"}
    // 监测 {"optionKey":"linkage-out","value":false,"boardId":"d76dd9e6-e001-4caf-89fa-191038f3ca68","widgetId":"e352ab64-d595-45b0-868d-ce0b42754469"}
    // let json = { trigger: 'click', conditions: {}, boardId: 'd76dd9e6-e001-4caf-89fa-191038f3ca68', widgetId: 'd4a2b18d-de8b-4fab-8118-787ff9342be1' }
    // json = Object.assign(json, { type: 'triggerInteract' })
    // shanhaiFrame.contentWindow.postMessage(json, '*')
  })
})
onUnmounted(() => {
  clearInterval(timer.value)
  timer.value = null
})
const close = () => {
  clearInterval(timer.value)
  timer.value = null
  $router.go(-1)
}
</script>

<template>
  <div style="overflow: hidden;overflow-y: hidden;" class="container">
    <iframe id="shanhai-frame" :src="src" :width="width" :height="height - 8" frameborder="0" allowfullscreen="true" />
    <div class="close-container">
      <span class="close-page" @click="close">x</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.app) {
  padding: 0;
}

.container {
  background-color: #000;

  .close-container {
    width: 60px;
    height: 60px;
    z-index: 999;
    position: fixed;
    top: 10px;
    right: 10px;

    .close-page {
      display: none;
      width: 60px;
      height: 60px;
      background-color: rgba($color: #181818, $alpha: 50%);
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      color: #eee;
      font-size: 22px;
      font-weight: 700;

      &:hover {
        cursor: pointer;
      }
    }

    &:hover {
      .close-page {
        display: block;
      }
    }
  }
}
</style>