<script setup>
import { onMounted, ref, computed } from "vue"
import { is_empty, checkWin, is_black, is_white, robotPlay, sleep } from "./utils"
import RandomTree from "./components/RandomTree.vue";
// import { robotPlay } from './utils/api'
// 配置
const size = ref(20)
const win_size = ref(5)
// 棋盘
const lattices = ref([])
// 下起记录
const records = ref([])

// 赢棋的下标
let isWin = []
const time = ref(Date.now())
const records_obj = computed(() => {
  const obj = records.value.reduce((r, { location: [y, x], type }) => {
    return {
      ...r,
      [`${y}_${x}`]: type === is_black ? 'isBlack' : 'isWhite'
    }
  }, {})

  if (isWin.length) {
    isWin.map(([r, c]) => {
      obj[`${r}_${c}`] = 'isWin'
    });
  }
  return obj
})

onMounted(confirm)

function confirm() {
  time.value = Date.now()
  isWin = []
  lattices.value = Array(size.value).fill([]).map(() => Array(size.value).fill(is_empty))
  records.value = []
}
function back() {
  if (records.value.length < 2) return;
  for (let i = 0; i < 2; i++) {
    const { location: [y, x], type } = records.value.pop()
    lattices.value[y][x] = is_empty
    // 如果是玩家赢了，只需要退回一步就行
    if (type === is_black) {
      break;
    }
  }
  isWin = []
}

function setPiece([y, x], type) {
  records.value.push({
    location: [y, x],
    type: type
  })
  lattices.value[y][x] = type
}
async function playChess(item, row, col) {
  console.time('playChess')
  if (isWin.length || item !== is_empty) return

  // 玩家下棋
  setPiece([row, col], is_black)
  const test = checkWin({ row, col, board: lattices.value, player: is_black, win_size: win_size.value })
  if (test) {
    isWin = test
    return
  }
  // 机器人下棋
  const [y, x] = robotPlay(lattices.value, win_size.value)

  setPiece([y, x], is_white)
  const testRobo = checkWin({ row: y, col: x, board: lattices.value, player: is_white, win_size: win_size.value })
  if (testRobo) {
    isWin = testRobo
  }
  console.timeEnd('playChess')
}

const autoPlay = async () => {
  await sleep()
  confirm()
  setPiece([(size.value / 2) | 0, (size.value / 2) | 0], is_black)
  while (true) {
    console.log(1)
    if (records.value.length == size.value * size.value) {
      break;
    }

    // 机器人下棋
    const [y, x] = robotPlay(lattices.value, win_size.value)

    setPiece([y, x], is_white)

    const test_black = checkWin({ row: y, col: x, board: lattices.value, player: is_white, win_size: win_size.value })
    if (test_black) {
      isWin = test_black
      break;
    }
    await sleep()

    // 机器人下棋
    const [row, col] = robotPlay(lattices.value, win_size.value)

    setPiece([row, col], is_black)

    const test_white = checkWin({ row, col, board: lattices.value, player: is_black, win_size: win_size.value })
    if (test_white) {
      isWin = test_white
      break;
    }

    await sleep()
  }
}
</script>

<template>
  <div p-6px box-border flex justify-start>
    <p mr-6px flex justify-between>
      <label for="size" whitespace-nowrap>棋盘大小：</label>
      <input v-model="size" id="size" type="number">
    </p>
    <p mr-6px flex justify-between>
      <label for="win_size" whitespace-nowrap>胜利棋数：</label>
      <input v-model="win_size" id="win_size" type="number" min="3" max="8">
    </p>
    <button @click="confirm" whitespace-nowrap mr-6px px-6px>重新开始</button>
    <button @click="autoPlay" whitespace-nowrap mr-6px px-6px>自动下棋</button>
    <button @click="back" whitespace-nowrap px-6px>返回上一步</button>
  </div>
  <div p-6px box-border flex flex-col items-center border="t t-solid #999">
    <p flex flex-row v-for="(lattice, r_i) in lattices" :key="r_i">
    <p class="col" :class="records_obj[`${r_i}_${c_i}`]" v-for="(item, c_i) in lattice" :key="`${r_i}-${c_i}`"
      @click="playChess(item, r_i, c_i)">
    </p>
    </p>
  </div>
  <RandomTree :time="time" />
</template>

