import drawImage from '../util/drawImage.js'
import drawText from '../util/drawText.js'
import { DetailbtnArea, setProductCanvas, setProductContext } from '../conf/data.js'
let loadingDown = false
export default class Details {
  showDetails(context, image, text, price) {
    let canvas = wx.createCanvas()
    canvas.width = screenWidth
    canvas.height = screenHeight
    context = canvas.getContext('2d')
    setProductCanvas(canvas)
    setProductContext(context)

    //商品大图
    return drawImage(context, image, 0, 0, screenWidth, screenHeight).then(() => {
      // dock
      wx.hideLoading()
      let dock_width = 1334;
      let dock_offset_y = screenHeight - 90;

      return drawImage(context, 'images/detail/bg_buttom@2x.png', screenWidth / 2, (screenHeight - 70), 'center').then(function () {

        // bg top
        let top_height = 90
        let next
        next = drawImage(context, 'images/detail/bg_top@2x.png', 0, 0, screenWidth, top_height).then(function () {
          //编号
          let font_size = 28
          let text_offset_y = top_height / 2
          let icon_offset_y = (top_height - 50) / 2
          let next
          next = drawImage(context, 'images/detail/icon_label@2x.png', 160, icon_offset_y)
          context.textAlign = 'start';
          context.textBaseline = 'middle';
          context.font = font_size + "px Arial"
          context.fillStyle = '#000'
          context.fillText(text, 160 + 58 + 16, text_offset_y)
          //单价
          if (price != '') {
            next = next.then(() => {
              return drawImage(context, 'images/detail/icon_price@2x.png', screenWidth / 2 - 100, icon_offset_y)
            })
            context.fillText('单价：¥' + price, screenWidth / 2 - 30, text_offset_y)
          }
          //在线画册
          next = next.then(() => {
            return drawImage(context, 'images/detail/txt_online_album@2x.png', screenWidth - 30, top_height / 2, 'right middle')
          })
          return next;
        })

        let peer_dock_width = dock_width / 5
        let first_dock_offset_x = (screenWidth - dock_width) / 2 + peer_dock_width
        
        drawText(context, '分享好友', first_dock_offset_x, screenHeight - font_size * 0.4, 'center,bottom')
        drawText(context, '联系商家', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')
        drawText(context, '详情&购买', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')
        drawText(context, '尺寸安装图', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')

        //按钮
        next = next.then(() => {
          return drawImage(context, 'images/detail/btn_back@2x.png', 30, screenHeight - 15, 'bottom')
        }).then((dimension) => {
          DetailbtnArea[0] = { ...DetailbtnArea[0], ...dimension }
          return drawImage(context, 'images/detail/btn_share@2x.png', first_dock_offset_x, screenHeight - font_size * 1.7, 'center bottom')
        }).then(function (dimension) {
          DetailbtnArea[1] = { ...DetailbtnArea[1], ...dimension }
          return drawImage(context, 'images/detail/btn_call@2x.png', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 1.7, 'center bottom')
        }).then(function (dimension) {
          DetailbtnArea[2] = { ...DetailbtnArea[2], ...dimension }
          return drawImage(context, 'images/detail/btn_buy@2x.png', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 1.7, 'center bottom')
        }).then(function (dimension) {
          DetailbtnArea[3] = { ...DetailbtnArea[3], ...dimension }
          return drawImage(context, 'images/detail/btn_size@2x.png', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 1.7, 'center bottom')
        }).then(function (dimension) {
          DetailbtnArea[4] = { ...DetailbtnArea[4], ...dimension }
          return drawImage(context, 'images/detail/nav_left@2x.png', 20, screenHeight / 2, 'middle')
        }).then(function (dimension) {
          DetailbtnArea[5] = { ...DetailbtnArea[5], ...dimension }
          return drawImage(context, 'images/detail/nav_right@2x.png', screenWidth - 20, screenHeight / 2, 'right middle')
        }).then(function (dimension) {
          DetailbtnArea[6] = { ...DetailbtnArea[6], ...dimension }
          GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
          return dimension
        })
        return next
        
      })
    })
  }
}

