import drawImage from "../util/drawImage";
import drawText from "../util/drawText";
import { ContentbtnArea, getBaseContext, getBaseCanvas } from '../conf/data.js'

//每个页面放九个元素，每个元素依据它的下标来确定放置的位置
export default class Content {
  constructor(data, page, offsetY) {
    this.data = data
    this.page = page
    this.offsetY = offsetY
    this.v_gutter = 20
    this.content_width = screenWidth - 240
    this.content_height = screenHeight - offsetY - 20
    this.lines = 2
    this.item_height = this.content_height / this.lines - this.v_gutter
    this.item_width = this.item_height * 330 / 300
    this.line_items = Math.floor(this.content_width / this.item_width)
    this.h_gutter = (this.content_width - this.line_items * this.item_width) / (this.line_items + 1)
    this.pageSize = this.line_items * this.lines
  }
  drawContent(context, image, index, text) {
    context.fillStyle = '#000'
    context.font = "24px Arial"
    if (isiPhoneX) {
      if (index % 9 == 0) {
        //先绘制示例图
        image.onload = function () {
          context.drawImage(image, (40 + 17+ 10 + 40) * 2 + 70, 42 * 2, imgX * 2, imgY * 2)
        }
        //绘制描述文字
        context.fillText(text, (40 + 40 + 17 + 10 + 15) * 2 + 70, (imgY + 2 + 15 + 40) * 2)
      }
      if (index % 9 == 1) {
        image.onload = function () {
          context.drawImage(image, (40 + 40+ 17 + 10 + imgX + 10) * 2 + 70, 42 * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + 40) * 2)
      }
      if (index % 9 == 2) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10) * 2 + 70, 42 * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + 40) * 2)
      }
      if (index % 9 == 3) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10) * 2 + 70, (2 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + 40) * 2)
      }
      if (index % 9 == 4) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10 + imgX + 10) * 2 + 70, (2 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + 40) * 2)

      }
      if (index % 9 == 5) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10) * 2 + 70, (2 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + 40) * 2)
      }
      if (index % 9 == 6) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10) * 2 + 70, (2 + imgY + 15 + 10 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 10 + 17 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + imgY + 10 + 15 + 40) * 2)
      }
      if (index % 9 == 7) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10 + imgX + 10) * 2 + 70, (2 + imgY + 15 + 10 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + imgY + 10 + 15 + 40) * 2)
      }
      if (index % 9 == 8) {
        image.onload = function () {
          context.drawImage(image, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10) * 2 + 70, (2 + imgY + 15 + 10 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 40 + 17 + 10 + imgX + 10 + imgX + 10 + 15) * 2 + 70, (imgY + 2 + 15 + imgY + 10 + 15 + imgY + 15 + 10 + 40) * 2)
      }
    } else {
      if (index % 9 == 0) {
        //先绘制示例图
        image.onload = function () {
          context.drawImage(image, (40 + 10+17) * 2, 42 * 2, imgX * 2, imgY * 2)
        }
        //绘制描述文字
        context.fillText(text, (40 + 10 + 15) * 2, (imgY + 2 +40 + 15) * 2)
      }
      if (index % 9 == 1) {
        image.onload = function () {
          context.drawImage(image, (40 + 10 + imgX + 17+ 10) * 2, 42 * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 10 + imgX + 10 + 15) * 2, (imgY + 2 + 40+ 15) * 2)
      }
      if (index % 9 == 2) {
        image.onload = function () {
          context.drawImage(image, (40 + 10 + 17 + imgX + 10 + imgX + 10) * 2, 42 * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 10 + imgX + 10 + imgX + 10 + 15) * 2, (imgY + 2 + 40 + 15) * 2)
      }
      if (index % 9 == 3) {
        image.onload = function () {
          context.drawImage(image, (40 + 17 + 10) * 2, (2 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 10 + 15) * 2, (imgY + 2 + 15 + imgY + 10 + 15 + 40) * 2)
      }
      if (index % 9 == 4) {
        image.onload = function () {
          context.drawImage(image, (40 + 17 + 10 + imgX + 10) * 2, (2 + imgY + 15 + 10 + 40) * 2, imgX * 2, imgY * 2)
        }
        context.fillText(text, (40 + 10 + imgX + 10 + 15) * 2, (imgY + 2 + 15 + imgY + 10 + 15 + 40) * 2)

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

  }
  draw() {
    let startX = 120
    let startY = this.offsetY
    let item_height = this.item_height
    let start = this.page * this.pageSize
    let end = (this.page + 1) * this.pageSize
    let current_index
    let scale = 1
    if (screenWidth < 1334) {
      scale = 0.8;
    }

    if (end > this.data.length) {
      end = this.data.length
    }
    ContentbtnArea.splice(0, ContentbtnArea.length)

    let canvas = getBaseCanvas()
    let context = getBaseContext()

    let promises = []

    for (let i = start; i < end; i++) {
      current_index = i - start
      let x = (current_index % this.line_items) * this.item_width + startX + this.h_gutter * (current_index % this.line_items + 1)
      let y = Math.floor(current_index / this.line_items) * (item_height + this.v_gutter) + startY + 10
      let d = this.data[i]
      promises[i] = drawImage(context, 'images/homepage/bg_prod@2x.png', x, y, this.item_width, this.item_height).then((dimension, current_index) => {

        ContentbtnArea[i - start] = {...dimension}
        return drawText(context, d.name, dimension.startX + dimension.width / 2, dimension.endY - 10, 'center, bottom', font_size * scale).then(() => {
          return drawImage(context, d.cover_pic, dimension.startX + 5, dimension.startY + 5, dimension.width - 10, dimension.height - 55)
        })
      })
    }
    return Promise.all(promises).then(() => {
      GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
      return context
    })
  }
}
