<template>
  <div class="product-scada-wrap">
    <div v-if="isScada" class="scada" :style="{ height: contentHeight + 'px' }">
      <component :is="scadaComp" :fullScreemTip="false" :isContextmenu="false" />
    </div>
    <div v-else>
      <el-empty :description="t('product.product-scada638785-0')" />
      <div style="text-align: center">
        <el-button
          size="small"
          type="primary"
          @click="handleGoToScada()"
        >{{ t('product.product-scada034908-0') }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 使用 i18n
const { t } = useI18n()

// 使用路由
const route = useRoute()
const router = useRouter()

// 定义组件名称
defineOptions({
  name: 'ProductScada'
})

// 定义 props
const props = defineProps({
  product: {
    type: Object,
    default: null
  }
})

// 数据状态
const isScada = ref(false)
const contentHeight = ref(window.innerHeight)
const scadaComp = ref(null)
const productInfo = ref({})

// 监听窗口大小变化
const handleResize = () => {
  calculateContentHeight()
}

// 获取窗体高度
const calculateContentHeight = () => {
  const element = document.getElementById('productDetailTab')
  if (element) {
    contentHeight.value = parseFloat(element.offsetHeight)
  }
}

// 组态设计
const handleGoToScada = () => {
  router.push({
    path: '/scada/center/temp',
    query: {
      productId: productInfo.value.productId
    }
  })
}

// 获取组态
const getScadaComp = (guid) => {
  router.push({ 
    query: { 
      ...route.query, 
      guid: productInfo.value.guid 
    } 
  })
}

// 监听 product 变化
watch(
  () => props.product,
  (newVal, oldVal) => {
    productInfo.value = newVal
    if (newVal && newVal.guid) {
      getScadaComp(newVal)
      isScada.value = true
    } else {
      isScada.value = false
    }
  },
  { deep: true, immediate: true }
)

// 组件挂载时执行
onMounted(() => {
  window.addEventListener('resize', handleResize)
  calculateContentHeight()
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.product-scada-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .scada {
    position: relative;
    width: 100%;
    overflow: auto;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #e1e1e1;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #a5a2a2;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute;
  }

  ::-webkit-scrollbar-track {
    background-color: #fff;
  }
}
</style>