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

export default class Price{
  constructor(data, page, offsetY) {
    this.data = data
    this.page = page
    this.offsetY = offsetY
    this.v_gutter = 25
    this.pageSize = homepage_page_size
    this.content_width = screenWidth - 240
    this.content_height = screenHeight - offsetY - 20
    this.item_height = this.content_height / this.pageSize - this.v_gutter
    this.h_gutter = 30
  }
  setPrice(context,image,index,name,price){
    
    if(isiPhoneX){
      var ratio = image.width / image.height
      context.drawImage(image, 50 * 2 + 70, 50 * 2 + (index * (imgY + 5)) * 2 + 10, (imgY - 5) * ratio * 2, (imgY - 5) * 2)
      context.fillStyle = '#000'
      context.font = "24px Arial"
      context.fillText(name, 50 * 2 +70+ imgY * ratio * 2 + 20, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
      context.fillText("¥" + price, (screenWidth - 160) * 2, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
      context.fillStyle = '#FFA500'
      context.fillRect((screenWidth - 100) * 2, 50 * 2 + imgY * 2 - 50 + (index * (imgY + 5)) * 2, 40 * 2, 25 * 2)
      context.fillStyle = '#fff'
      context.fillText('报价', (screenWidth - 100) * 2 + 15, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
      context.fillStyle = '#D3D3D3'
      context.fillRect(50 * 2+70, 46 * 2 + ((index + 1) * (imgY + 5)) * 2, (screenWidth - 110) * 2 - 70, 2)
    }else{
      image.onload = function () {
        var ratio = image.width / image.height
        context.drawImage(image, 50 * 2, 50 * 2 + (index * (imgY + 5)) * 2 + 10, (imgY - 5) * ratio * 2, (imgY-5) * 2)
        context.fillStyle = '#000'
        context.font = "24px Arial"
        context.fillText(name, 50 * 2 + imgY * ratio * 2 + 20, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
        context.fillText("¥" + price, (screenWidth - 160) * 2, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
        context.fillStyle = '#FFA500'
        context.fillRect((screenWidth - 100) * 2, 50 * 2 + imgY * 2 - 50 + (index * (imgY + 5)) * 2, 40 * 2, 25 * 2 )
        context.fillStyle = '#fff'
        context.fillText('报价', (screenWidth - 100) * 2 + 15, 50 * 2 + imgY * 2 - 15 + (index * (imgY + 5)) * 2)
        context.fillStyle = '#D3D3D3'
        context.fillRect(50 * 2, 46 * 2 + ((index + 1) * (imgY + 5)) * 2,(screenWidth-110)*2,2)
      }
    }
  }
  draw() {
    let startX = 120
    let startY = this.offsetY
    let padding = 30
    let item_height = this.item_height
    let start = this.page * this.pageSize
    let end = (this.page + 1) * this.pageSize
    let current_index

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

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

    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, d.cover_pic, startX + padding, startY + 20 + current_index * (this.item_height + this.v_gutter), 88.88 * this.item_height / 50, this.item_height).then((dimension) => {
        context.fillStyle = '#D3D3D3'
        context.fillRect(startX + padding, dimension.endY + 1, this.content_width - padding * 2, 2)
        let promises = []
        promises.push(drawText(context, d.name, dimension.endX + font_size * 3, dimension.startY + dimension.height / 2, 'middle'))
        promises.push(drawImage(context, 'images/agent/btn_price@2x.png', startX + this.content_width - padding, dimension.startY + dimension.height / 2, 'right middle').then((t_dimension) => {
          setpriceArea[i - start] = { ...t_dimension }
          return drawText(context, "¥" + (d.price || 0), t_dimension.startX - font_size * 5, dimension.startY + dimension.height / 2, 'middle')
        }))

        return Promise.all(promises)
      })
    }
    return Promise.all(promises).then(() => {
      return GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
    })
  }
}