<script lang="ts" setup>
import { ref } from 'vue'
import type { RenderComponentExposeType } from '@/core/Library/types'
import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
import { NodeUtils } from '@/hooks/business/useNodeUtils'
import { getMeetTheConditionsRange } from '@/core/Library/utils'
import { ActTypeEnum, VariableImageSourceEnum } from '@/enums/datasource'
import { useOnMessage } from '@/core/Library/hook/useOnMessage'
import type { CommandSource } from '@/core/websocket/processor'
import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
import type { StatusActDataType } from '@/api/node/model'

const imgUrl = ref(new URL('/public/webapp/images/thingskit/switch-on.svg', import.meta.url).href)

const isNonstandard = ref(false)
const onReceiveActMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
  const { node, type, data } = commandSource

  if (type !== ActTypeEnum.STATUS_SETTING) return

  const nodeUtils = new NodeUtils()
  const cell = nodeUtils.getCellById(node)
  if (!cell) return
  const { attr, rangeList } = data as StatusActDataType
  const { latestValue } = useLatestMessageValue(message.data, attr)
  const { flag, record } = getMeetTheConditionsRange(rangeList.map(item => ({ ...item, max: item.statusValue, min: item.statusValue })), latestValue)
  if (flag) {
    isNonstandard.value = false
    const { imageInfo } = record!
    const { path, imageSource, libPath } = imageInfo || {}
    imgUrl.value = imageSource === VariableImageSourceEnum.GALLERY ? libPath! : path!
  }
  else {
    isNonstandard.value = true
  }
}

const { onMessage } = useOnMessage({ onReceiveActMessage })

defineExpose<RenderComponentExposeType>({
  onMessage,
})
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <div>
      <img v-if="!isNonstandard" :src="imgUrl" alt="" class="w-full">
      <div v-else>
        非标准数值
      </div>
    </div>
  </main>
</template>