import { computed, watch, ref } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { isLeftAsideOpen, MaxLeftAsideWidth } from '@/composables/leftAside'
import { isRightAsideOpen, MaxRightAsideWidth } from '@/composables/rightAside'
import { scaleRatePercentage, setScaleValue } from '@/composables/handleScale'

const { width, height } = useWindowSize()

// 中间main区域的初始宽度
export const InitMainWidth =
  width.value - MaxLeftAsideWidth - MaxRightAsideWidth - 4

// 中间图片区域初始宽度，不完全等于中间main区域的初始宽度
// 减20是由于滚动条的宽度
export const InitMainWidthCss = computed(() => `${InitMainWidth}px`)
export const CurrentMainHeight = computed(() => height.value - 52 - 4)

// 中间图片区域实际宽度，受左右操作栏影响
const CurrentMainWidth = computed(
  () =>
    width.value -
    (isLeftAsideOpen.value ? MaxLeftAsideWidth : 0) -
    (isRightAsideOpen.value ? MaxRightAsideWidth : 0)
)
export const CurrentMainWidthCss = computed(() => `${CurrentMainWidth.value}px`)

watch(
  () => CurrentMainWidth.value,
  () => {
    // setScaleValue((CurrentMainWidth.value / InitMainWidth) * 100)
    // scaleRatePercentage.value =
    //   (() ).toFixed(2) * 1;
  }
)

// import { drawpaperList } from '@/store/info'

export const ImageWidth = ref(undefined)
export const ImageHeight = ref(undefined)
export const ImageWidthCss = computed(() => {
  return `${ImageWidth.value}px`
})
export const ImageHeightCss = computed(() => `${ImageHeight.value}px`)

export function initImgSize(src) {
  return new Promise((resolve) => {
    const image = new Image()
    image.src = src
    image.onload = () => {
      // console.log('image :>> ', image.width, image.height)
      ImageWidth.value = image.width
      ImageHeight.value = image.height
      resolve()
    }
  })
}
