<template>
  <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="iframe-content"
    :style="getStyle(borderRadius)">
    <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
      <svg focusable="false" data-icon="fullscreen" width="4vw" :style="`color:${color}`" height="4vh" fill="currentColor"
        aria-hidden="true" viewBox="64 64 896 896">
        <path
          d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z">
        </path>
      </svg>
    </div>
    <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h"
      style="border-width: 0"></iframe>
    <n-empty v-else class="empty" size="huge" description="暂未绑定页面">

    </n-empty>
  </div>
</template>

<script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs, ref } from 'vue'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen'
import { isDevMode } from '@/utils/external/env'
import { createScadaPageLink, ScadaModeEnum } from './help'
import { option as typeOption } from './config'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const isShowSvg = ref(false)

const allowfullscreen = ref(false)

const { w, h } = toRefs(props.chartConfig.attr)
const { borderRadius, color } = toRefs(props.chartConfig.option)

const option = shallowReactive({
  dataset: ''
})

const getStyle = (radius: number) => {
  return {
    borderRadius: `${radius}px`,
    overflow: 'hidden'
  }
}

const isDev = isDevMode()

const iframeLink = ref('')

// 编辑更新
watch(
  () => props.chartConfig.option.dataset,
  (newData: string) => {
    const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption

    if (!dataset) return
    iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
  },
  {
    immediate: true
  }
)

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
  option.dataset = newData
})

const handleFullScreen = () => {
  const domName = document.getElementById('iframeContent') as HTMLElement
  const htmlName = document.querySelector('html') as HTMLHtmlElement
  useFullScreen(domName, htmlName)
}

const handleMouseenter = () => {
  isShowSvg.value = true
  allowfullscreen.value = true
}

const handleMouseleave = () => (isShowSvg.value = false)
</script>
<style lang="scss" scoped>
.iframe-content {
  #fullscreenButton {
    color: white;
    cursor: pointer;
    position: absolute;
    z-index: 999999;
    top: 3%;
    right: 0.1vw;
  }
}

.empty {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  --size: 120px;

  @include deep() {
    .n-empty__icon {
      width: var(--size);
      height: var(--size);

      .n-base-icon {
        width: var(--size);
        height: var(--size);

        svg {
          width: var(--size);
          height: var(--size);
        }
      }
    }
  }


}
</style>