let 游戏已开始 = false

const 我方舰队 = document.querySelectorAll('.战舰')

我方舰队.forEach((ship) => {
    // 拖拽开始记录拖拽位置
    ship.addEventListener('dragstart', (event) => {
        ship.classList.add('拖拽中')
        const rect = ship.getBoundingClientRect()
        ship.dataset.drag_left = event.clientX - rect.left
        ship.dataset.drag_top = event.clientY - rect.top
        event.dataTransfer.setData('mouse_x', event.layerX)
        event.dataTransfer.setData('mouse_y', event.layerY)

        // DEBUG
        console.log(`拖动了${ship.id},拖动点位于船上(${ship.dataset.drag_left},${ship.dataset.drag_top})`)
    })

    // 拖拽结束更新战舰位置
    ship.addEventListener('dragend', (event) => {
        // const 其它战舰 = [...我方海域.querySelectorAll('.战舰:not(.拖拽中)')]

        // event.dataTransfer.setData('a', event.clientX)
        // event.dataTransfer.setData('b', event.clientY)

        let mouse_x = event.dataTransfer.getData('mouse_x')
        let mouse_y = event.dataTransfer.getData('mouse_y')
        let x = event.layerX
        let y = event.layerY
        console.log(parseInt(Math.ceil((x - mouse_x) / 60)), parseInt(Math.ceil((y - mouse_y) / 60)))

        // 判断移动是否合法

        // 更新战舰显示位置
        ship.style.left = `${ship.dataset.drop_left}px`
        ship.style.top = `${ship.dataset.drop_top}px`

        ship.classList.remove('拖拽中')
        delete ship.dataset.drag_left
        delete ship.dataset.drag_top
        delete ship.dataset.drop_left
        delete ship.dataset.drop_top

        // DEBUG
        // console.log(我方海域状态)
    })

    // 左键点击旋转战舰
    ship.addEventListener('click', (event) => {
        // TODO: 检查旋转是否合法：1游戏未开始，2没有碰撞其它战舰，3没有出边界
        if (游戏已开始) return
        ship.classList.toggle('水平放置')

        // DEGUB
        console.log(`点击了[ ${ship.id} ]的[ ${event.target.id} ]甲板`)
    })
})

我方海域.addEventListener('dragover', (event) => {
    event.preventDefault()
    const dragging_ship = document.querySelector('.拖拽中')
    if (event.target === 我方海域) {
        const 拖拽中的战舰 = document.querySelector('.拖拽中')
        拖拽中的战舰.dataset.drop_left = parseInt(Math.ceil(event.layerX - 拖拽中的战舰.dataset.drag_left + 30) / 60) * 60
        拖拽中的战舰.dataset.drop_top = parseInt(Math.ceil(event.layerY - 拖拽中的战舰.dataset.drag_top + 30) / 60) * 60

        // DEBUG
        console.log(`拖拽到了(${拖拽中的战舰.dataset.drop_left}, ${拖拽中的战舰.dataset.drop_top})`)
    }
    // const 拖拽中的战舰 = document.querySelector('.拖拽中')
    // const other_ships = [...我方海域.querySelectorAll('.ship:not(.拖拽中)')]
    // let leading_ship = null
    // for (let ship of other_ships) {
    //     const ship_rect = ship.getBoundingClientRect()
    //     const mouse_offset = mouse_x - ship_rect.left - ship_rect.width / 2
    //     if (mouse_offset > 0) leading_ship = ship
    // }
    // if (leading_ship) leading_ship.after(拖拽中的战舰)
    // else 我方海域.prepend(拖拽中的战舰)
})

我方海域.addEventListener('dragend', (event) => {
    // console.log(event)
})

敌方海域.addEventListener('click', (event) => {
    if (event.target !== 敌方海域) return

    // 展开迷雾
    const area = document.createElement('div')
    if (Math.random() > 0.5) area.classList.add('平静海面')
    else area.classList.add('爆炸海面')
    const col = parseInt(event.layerX / 60)
    const row = parseInt(event.layerY / 60)
    area.style.left = `${col * 60}px`
    area.style.top = `${row * 60}px`
    敌方海域.append(area)

    // DEBUG
    console.log(`炮击地方海域(${col}, ${row})`)
})