
import { reactive } from 'vue'
import { getLayoutParams } from '@/api/dcs/configurePage'
export function useLayout(flowId) {
  const layoutMap = reactive({})

  // 获取页面布局参数
  const fetchLayoutParams = async () => {
    try {
      const res = await getLayoutParams(flowId)
      if (res.code === 200 && Array.isArray(res.data)) {
        res.data.forEach(item => {
          layoutMap[item.code] = {
            top: item.top,
            left: item.left,
            size: item.size
          }
        })
      }
    } catch (err) {
      console.error('页面参数获取失败：', err)
    }
  }

  // 获取组件的布局样式
  const getTankStyle = (code ,defaultZIndex=10) => {
    const layout = layoutMap[code]
    if (!layout) return {}
    return {
      zIndex: defaultZIndex,
      position: 'absolute',
      top: `${layout.top}%`,
      left: `${layout.left}%`,
      transform: 'translate(-50%, -50%)'
    }
  }

  // 获取组件的尺寸
  const getTankSize = (code, defaultSize = 400) => {
    return layoutMap[code]?.size ?? defaultSize
  }
  return {
    layoutMap,
    fetchLayoutParams,
    getTankStyle,
    getTankSize
  }
}
