import { div, pre } from './main.js'

// 简单示例
document.body.appendChild(div.w(128).h(64).text('Hello world').click(event => {
    console.log('click !')
}))

// 瀑布流画廊
const data = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
const main = div.w(640).h(640).text('main').relative({ top: 0 }).m({ top: 24 }).transition({ type: 'opacity', duration: 700, am: 'ease-in-out' }).childrens([
    ...data.map(item => div.w(64).h(64).text(item))
])
document.body.appendChild(main)

// 屏幕宽高变化时, 重新排列
window.onresize = () => {
    console.log('屏幕宽高变化')
    let 各列高度 = []
    let 容器宽度 = document.body.clientWidth
    let 高分屏 = window.devicePixelRatio === 1 && 容器宽度 > 1280
    let 列宽 = 高分屏 ? 480 : 320
    let 间距 = 高分屏 ? 16 : 8
    let 列数 = parseInt(容器宽度 / (列宽 + 间距)) || 1
    let 边距 = (容器宽度 - 列数 * 列宽 - (列数 - 1) * 间距) / 2
    for (let i = 0; i < 列数; i++) {
      各列高度.push(0)
    }
    for (let item of main.children) {
        let 最低 = Math.min(...各列高度)
        let 列号 = 各列高度.indexOf(最低)
        let 位置 = (列宽 + 间距) * 列号 + 边距
        let 元素宽 = parseInt(item.getAttribute("data-w"))
        let 元素高 = parseInt(item.getAttribute("data-h"))
        let 缩放比 = 元素宽 / 列宽
        let 缩放高 = parseInt(元素高 / 缩放比)
        item.style.top = 最低 + "px"
        item.style.left = 位置 + "px"
        item.style.width = 列宽 + "px"
        item.style.height = 缩放高 + "px"
        item.style.background = '#ccc'
        各列高度[列号] += 缩放高 + 间距
    }
    let 最高 = Math.max(...各列高度)
    if (main) main.style.height = 最高 + "px"
}

window.onresize()

// 展示源码
fetch('./index.js').then(res => res.text()).then(text => {
    document.body.appendChild(pre.text(text))
})