<template>
  <div class="go-text-box">
    <div class="content">
      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, shallowReactive } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useTsl } from '@/hooks/external/useTsl'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'

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

const { handleDeviceProfileAttributes } = useTsl()

const {
  linkHead,
  link,
  fontColor,
  fontSize,
  letterSpacing,
  paddingY,
  paddingX,
  textAlign,
  borderWidth,
  borderColor,
  borderRadius,
  writingMode,
  backgroundColor,
  fontWeight,
  linkMethod
} = toRefs(props.chartConfig.option)

const option = shallowReactive({
  dataset: configOption.dataset
})

//动态请求物模型
const fetchTsl = (entityId: string) => {
  return handleDeviceProfileAttributes(entityId)
}

//解构设备和属性参数
const deconstructionParams = (chartConfig: CreateComponentType) => {
  const { request } = chartConfig
  const { requestParams } = request
  const { Params } = requestParams
  const { entityId, keys } = Params
  return { entityId, keys }
}

//找到枚举值name，属性暂时只选择一个
const findEnumName = (attribute: Recordable[], keys: string[], newData: Recordable) => {
  const findCurrentAttr = attribute.find(findAttrItem => findAttrItem.identifier === keys.at(0))?.detail?.dataType
    ?.specsList
  return findCurrentAttr.find(
    (findCurrentItem: Recordable) => findCurrentItem.value === Number(newData.data[keys.at(0)!][0][1])
  )?.name
}

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: string) => {
  const { entityId, keys } = deconstructionParams(props.chartConfig) as Recordable
  const { attribute } = (await fetchTsl(entityId)) as unknown as Recordable
  if (Object.prototype.toString.call(newData) !== '[object Object]') {
    option.dataset = newData
  } else if ('subscriptionId' in (newData as unknown as Recordable)) {
    // ws
    option.dataset = findEnumName(attribute, keys, newData as unknown as Recordable) || '暂无数据'
  }
})

//打开链接
const click = () => {
  const hrefStr = linkHead.value + link.value
  if (linkMethod.value === 'open') window.open(hrefStr)
  else window.location.href = hrefStr
}
</script>

<style lang="scss" scoped>
@include go('text-box') {
  display: flex;
  align-items: center;
  justify-content: v-bind('textAlign');

  .content {
    color: v-bind('fontColor');
    padding: v-bind('`${paddingY}px ${paddingX}px`');
    font-size: v-bind('fontSize + "px"');
    letter-spacing: v-bind('letterSpacing + "px"');
    writing-mode: v-bind('writingMode');
    font-weight: v-bind('fontWeight');
    border-style: solid;
    border-width: v-bind('borderWidth + "px"');
    border-radius: v-bind('borderRadius + "px"');
    border-color: v-bind('borderColor');

    background-color: v-bind('backgroundColor');
  }
}
</style>