<template>
  <div>
    <div>
      {{ turn }}
    </div>
    <table>
      <tr v-for="(line, lineId) in table" :key="lineId">
        <td v-for="(item, itemId) in line" :key="itemId">
          <OXCell
            :player="item"
            :row="lineId"
            :col="itemId"
            @cell-click="cellClick"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import OXCell from './OXCell.vue'
export default {
  data () {
    return {
      finish: false,
      winner: '-',
      turn: 'O',
      table: [
        ['-', '-', '-'],
        ['-', '-', '-'],
        ['-', '-', '-']
      ]
    }
  },
  methods: {
    cellClick (row, col) {
      console.log('Cell click ' + row + ' ' + col)
      this.table[row][col] = this.turn
      if (this.checkwin(row, col)) {
        console.log('Win')
        this.finish = true
        this.winner = this.turn
        return
      }
      this.switchTurn()
    },
    switchTurn () {
      if (this.turn === 'O') {
        this.turn = 'X'
        return
      }
      this.turn = 'O'
    },
    randomPlayer () {
      if (Math.floor(100 * Math.random()) % 2 === 0) {
        this.turn = 'O'
      } else {
        this.turn = 'X'
      }
    },
    checkwin (row, col) {
      if (
        this.checkRow(row) ||
        this.checkCol(col) ||
        this.checkX1() ||
        this.checkX2()
      ) {
        return this.turn
      }
    },
    checkRow (row) {
      return false
    },
    checkCol (col) {
      return false
    },
    checkX1 () {
      return false
    },
    checkX2 () {
      return false
    }
  },
  components: {
    OXCell
  },
  mounted () {
    this.randomPlayer()
  }
}
</script>
<style></style>