<template>
  <div class="pattren-locker">
    <div id="container" ref="container" style="width: 360px; height: 600px"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import Locker from '@/canvas/locker'
  const container = ref(null)
  onMounted(() => {
    // 新建一個(gè)解鎖器
    new Locker(container.value,{
      radius: 30, // 圓圈半徑
      columnSpacing: 50, // 圓圈列間距
      rowsSpacing: 90, // 圓圈行間距
      stroke: '#b5b5b5', // 圓圈描邊顏色
      lineStroke: '#237fb4', // 路徑描邊顏色
      selectedFill: '#237fb4', // 圖案選中填充顏色
      backgroundColor: '#f7f7f7', // 畫布背景顏色
    })
  })
</script>

// 初始化
init() {
  this.drawCellGrids()
  this.drawText('請(qǐng)繪制新的圖案密碼')
  this.canvas.addEventListener('contextmenu', (e) => e.preventDefault())
  this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
}
// 繪制9個(gè)宮格圓圈
drawCellGrids() {
  const columns = 3
  const rows = 3
  const width = this.canvas.width
  const height = this.canvas.height
  const paddingTop = (height - rows * 2 * this.radius - (rows - 1) * this.rowsSpacing) / 2
  const paddingLeft = (width - columns * 2 * this.radius - (columns - 1) * this.columnSpacing) / 2
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < columns; j++) {
      const data = {
        x: paddingLeft + (2 * j + 1) * this.radius + j * this.columnSpacing,
        y: paddingTop + (2 * i + 1) * this.radius + i * this.rowsSpacing,
        id: i * columns + j
      }
      this.lockerCells.push(data)
      this.ctx.beginPath()
      this.ctx.arc(data.x, data.y, this.radius, 0, 2 * Math.PI, true)
      this.ctx.strokeStyle = this.stroke
      this.ctx.lineWidth = 3
      this.ctx.stroke()
    }
  }
  this.cellImageData = this.lastImageData = this.getImageData()
}

mousedownEvent(e) {
  const that = this
  // 選中宮格，并繪制點(diǎn)到點(diǎn)路徑
  const selected = this.selectCellAt(e.offsetX, e.offsetY)
  if (!selected) return
  // 鼠標(biāo)移動(dòng)事件
  this.canvas.onmousemove = function (e) {
    // 路徑的最后一個(gè)點(diǎn)
    const lastData = that.currentPath[that.currentPath.length - 1]
    // 恢復(fù)快照
    that.restoreImageData(that.lastImageData)
    // 繪制路徑
    that.drawLine(lastData, { x: e.offsetX, y: e.offsetY })
    // 選中宮格，并繪制點(diǎn)到點(diǎn)路徑
    that.selectCellAt(e.offsetX, e.offsetY)
  }
  // 鼠標(biāo)抬起/移出事件
  this.canvas.onmouseup = this.canvas.onmouseout = function () {
    const canvas = this
    canvas.onmousemove = null
    canvas.onmouseup = null
    canvas.onmouseout = null
    const currentPathIds = that.currentPath.map((item) => item.id)
    let text = ''
    if (that.password.length === 0) {
      that.password = currentPathIds
      text = '請(qǐng)?jiān)俅卫L制圖案進(jìn)行確認(rèn)'
    } else if (that.confirmPassword.length === 0) {
      that.confirmPassword = currentPathIds
      if (that.password.join('') === that.confirmPassword.join('')) {
        text = '圖案密碼設(shè)置成功，請(qǐng)輸入您的密碼'
      } else {
        text = '與上次繪制不一致，請(qǐng)重試'
        that.password = []
        that.confirmPassword = []
      }
    } else {
      if (that.password.join('') === currentPathIds.join('')) {
        text = '圖案密碼正確 (づ￣3￣)づ╭?～'
      } else {
        text = '圖案密碼錯(cuò)誤，請(qǐng)重試'
      }
    }
    that.ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空畫布
    that.restoreImageData(that.cellImageData) // 恢復(fù)背景宮格快照
    that.drawText(text) // 繪制提示文字
    that.currentPath = [] // 清空當(dāng)前繪制路徑
    that.lastImageData = that.cellImageData // 重置上一次繪制的畫布快照
  }
}

selectCellAt(x, y) {
  // 當(dāng)前坐標(biāo)點(diǎn)是否在圓內(nèi)
  const data = this.lockerCells.find((item) => {
    return Math.pow(item.x - x, 2) + Math.pow(item.y - y, 2) <= Math.pow(this.radius, 2)
  })
  const existing = this.currentPath.some((item) => item.id === data?.id)
  if (!data || existing) return false
  // 恢復(fù)畫布快照
  this.restoreImageData(this.lastImageData)
  // 繪制選中樣式
  this.drawCircle(data.x, data.y, this.radius / 1.5, 'rgba(0,0,0,0.2)')
  this.drawCircle(data.x, data.y, this.radius / 2.5, this.selectedFill)
  // 繪制路徑 從最后一個(gè)點(diǎn)到當(dāng)前點(diǎn)
  const lastData = this.currentPath[this.currentPath.length - 1]
  if (lastData) {
    this.drawLine(lastData, data)
  }
  // 保存畫布快照
  this.lastImageData = this.getImageData()
  // 保存當(dāng)前點(diǎn)
  this.currentPath.push(data)
  return true
}
// 繪制選中樣式
drawCircle(x, y, radius, fill) {
  this.ctx.beginPath()
  this.ctx.arc(x, y, radius, 0, 2 * Math.PI, true)
  this.ctx.fillStyle = fill
  this.ctx.fill()
}
// 繪制路徑
drawLine(start, end, stroke = this.lineStroke) {
  this.ctx.beginPath()
  this.ctx.moveTo(start.x, start.y)
  this.ctx.lineTo(end.x, end.y)
  this.ctx.strokeStyle = stroke
  this.ctx.lineWidth = 3
  this.ctx.lineCap = 'round'
  this.ctx.lineJoin = 'round'
  this.ctx.stroke()
}

// 獲取畫布快照
getImageData() {
  return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
}
// 恢復(fù)畫布快照
restoreImageData(imageData) {
  if (!imageData) return
  this.ctx.putImageData(imageData, 0, 0)
}