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


export default class Details {
  showDetails(context,image, text, price) {
    //黑色背景
    context.fillStyle = '#000'
    context.fillRect(0, 0, screenWidth, screenHeight)


    //功能栏
    context.fillStyle = '#ddd'
    context.beginPath()
    context.arc(screenWidth - 20, 40 + 20, 18, 0, 360, false)
    context.arc(screenWidth - 20, 40 + 20 + 40, 18, 0, 360, false)
    context.arc(screenWidth - 20, 40 + 20 + 40 + 40, 18, 0, 360, false)
    context.arc(screenWidth - 20, 40 + 20 + 40 + 40 + 40, 18, 0, 360, false)
    context.arc(screenWidth - 20, screenHeight - 20, 18, 0, 360, false)
    context.fillStyle = '#f8f8f8'
    context.fill()
    context.strokeStyle = '#ddd'
    context.stroke()
    context.closePath()

    context.fillStyle = '#ddd'
    context.beginPath()
    context.arc(screenWidth - 60, screenHeight - 20, 18, 0, 360, false)
    context.fillStyle = '#f8f8f8'
    context.fill()
    context.strokeStyle = '#ddd'
    context.stroke()
    context.closePath()

    context.fillStyle = '#000'
    context.font = "1px Arial"
    context.fillText('返回', screenWidth - 33, 40 + 25)
    context.fillText('分享', screenWidth - 33, 40 + 25 + 40)
    context.fillText('名片', screenWidth - 33, 40 + 25 + 40 + 40)
    context.fillText('电话', screenWidth - 33, 40 + 25 + 40 + 40 + 40)

    context.fillText('尺寸', screenWidth - 33, screenHeight - 15)
    context.fillText('详情', screenWidth - 33 - 40, screenHeight - 15)


    //加载大图
    image.onload = function () {
      context.drawImage(image, 40, 40, screenWidth - 100, screenHeight - 80)
    }


    //编号和单价
    context.fillStyle = '#fff'
    context.fillText(text + ' 单价：', 10, screenHeight - 15)

    context.fillStyle = 'red'
    context.fillText('¥' + price, 175, screenHeight - 15)
  }
}
