/*
主体内容绘制
*/

//获取手机屏幕大小信息
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

const imgX = (screenWidth - 130) / 3
const imgY = (screenHeight - 78) / 3

//每个页面放九个元素，每个元素依据它的下标来确定放置的位置
export default class Content {
  drawContent(context, image, index, text) {
    context.fillStyle = '#000'
    context.font = "1px Arial"
    if (index % 9 == 0) {
      //先绘制示例图
      image.onload = function () {
        context.drawImage(image, 40 + 10, 2, imgX, imgY)
      }
      //绘制描述文字
      context.fillText(text, 40 + 10 + 15, imgY + 2 + 15)
    }
    if (index % 9 == 1) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10, 2, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + 15, imgY + 2 + 15)
    }
    if (index % 9 == 2) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10 + imgX + 10, 2, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + imgX + 10 + 15, imgY + 2 + 15)
    }
    if (index % 9 == 3) {
      image.onload = function () {
        context.drawImage(image, 40 + 10, 2 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15)
    }
    if (index % 9 == 4) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10, 2 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15)

    }
    if (index % 9 == 5) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10 + imgX + 10, 2 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + imgX + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15)
    }
    if (index % 9 == 6) {
      image.onload = function () {
        context.drawImage(image, 40 + 10, 2 + imgY + 15 + 10 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15 + imgY + 10 + 15)
    }
    if (index % 9 == 7) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10, 2 + imgY + 15 + 10 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15 + imgY + 10 + 15)
    }
    if (index % 9 == 8) {
      image.onload = function () {
        context.drawImage(image, 40 + 10 + imgX + 10 + imgX + 10, 2 + imgY + 15 + 10 + imgY + 15 + 10, imgX, imgY)
      }
      context.fillText(text, 40 + 10 + imgX + 10 + imgX + 10 + 15, imgY + 2 + 15 + imgY + 10 + 15 + imgY + 15 + 10)
    }
  }
}
