<template>
  <div class="log-page">
    <canvas class="log-bg" canvas-id="log-bg" @touchmove.stop="preventDefault"></canvas>
    <div class="fixed">
      <div class="list-container">
        <canvas canvas-id="share_friend"></canvas>
        <canvas canvas-id="share_pengyouquan" v-if="true" @touchend="handleSavePic"></canvas>
        <canvas canvas-id="reselect" v-if="true" @touchend="handleRepick"></canvas>
      </div>
    </div>
    <div class="fixed">
      <ul class="list-container">
        <li class="list-item">
          <img src="../../assets/img/ic_zhuanfa.png" mode="widthFix" />
          <text class="text-zhuanfan">发送给朋友</text>
          <button open-type="share" class="btn-share"></button>
        </li>
        <li class="list-item">
        </li>
        <li class="list-item">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  onShareAppMessage() {
    return {
      title: '我的手机',
      path: '/page/index/main',
      sytle: 'width: 300px; height: 200px;'
    }
  },
  components: {},
  onLoad() {},
  computed: {
    path() {
      global['canvas_drawed'] = false
      wx.setStorageSync('commited', false)
      if (global['commit_data'].url == '') {
        // if (true) {
        this.printFrontEndPic()
      } else {
        this.printBackEndPic()
      }

      let windowWidth = 0
      let windowHeight = 0
      wx.getSystemInfo({
        success: function(res) {
          windowWidth = res.windowWidth
          windowHeight = res.windowHeight
        }
      })

      let share_friend = wx.createCanvasContext('share_friend')
      share_friend.setFillStyle('rgba(0, 0, 0, 1)')
      share_friend.fillRect(0, 0, windowWidth, 100)
      share_friend.drawImage(
        '../../copy-asset/assets/img/ic_zhuanfa.png',
        windowWidth * 0.12,
        18,
        windowWidth * 0.09,
        windowWidth * 0.09 / 64 * 59
      )

      share_friend.setFillStyle('#ffde5e')
      share_friend.setFontSize(15)
      share_friend.setTextAlign('center')
      share_friend.fillText(
        '转发到群',
        windowWidth * 0.166667,
        windowWidth * 0.09 / 64 * 59 + 42
      )
      share_friend.drawImage(
        '../../copy-asset/assets/img/assit_line.png',
        windowWidth * 0.33,
        0,
        2,
        100
      )
      share_friend.draw()

      let share_pengyouquan = wx.createCanvasContext('share_pengyouquan')
      share_pengyouquan.setFillStyle('rgba(0, 0, 0, 1)')
      share_pengyouquan.fillRect(0, 0, windowWidth, 100)
      share_pengyouquan.drawImage(
        '../../copy-asset/assets/img/ic_share.png',
        windowWidth * 0.12,
        18,
        windowWidth * 0.09,
        windowWidth * 0.09
      )
      share_pengyouquan.setFillStyle('#38eb95')
      share_pengyouquan.setFontSize(15)
      share_pengyouquan.setTextAlign('center')
      share_pengyouquan.fillText(
        '生成图片分享好友',
        windowWidth * 0.166667,
        windowWidth * 0.09 / 64 * 59 + 42
      )

      share_pengyouquan.draw()

      let reselect = wx.createCanvasContext('reselect')
      reselect.setFillStyle('rgba(0, 0, 0, 1)')
      reselect.fillRect(0, 0, windowWidth, 100)
      reselect.drawImage(
        '../../copy-asset/assets/img/re_sel.png',
        windowWidth * 0.12,
        16,
        windowWidth * 0.09,
        windowWidth * 0.09 / 63 * 109
      )
      reselect.drawImage(
        '../../copy-asset/assets/img/assit_line.png',
        0,
        0,
        2,
        100
      )
      reselect.draw()

      return store.state.logPage.path
    }
  },
  methods: {
    preventDefault(e) {
      return false
    },
    handleRepick() {
      console.log('return')
      wx.navigateBack({
        delta: 1
      })
    },
    handleSavePic() {
      let windowWidth = 0
      let windowHeight = 0
      wx.getSystemInfo({
        success: function(res) {
          windowWidth = res.windowWidth
          windowHeight = res.windowHeight
        }
      })
      if (global['canvas_drawed']) {
        wx.saveImageToPhotosAlbum({
          filePath: global['log_path'],
          success(res) {
            wx.showToast({
              title: '保存成功',
              icon: 'none'
            })
          }
        })
      }
    },
    printFrontEndPic() {
      let windowWidth = 0
      let windowHeight = 0
      let scale_base = 375
      let scale = 0
      let margin_top = 50
      wx.getSystemInfo({
        success: function(res) {
          windowWidth = res.windowWidth
          windowHeight = res.windowHeight
          scale = windowWidth / scale_base
        }
      })
      var context = wx.createCanvasContext('log-bg')

      context.drawImage(
        '../../copy-asset/assets/img/bg_block.png',
        0,
        0,
        windowWidth,
        windowHeight
      )
      context.drawImage(
        '../../copy-asset/assets/img/index-bg.jpg',
        0,
        0,
        windowWidth,
        windowHeight
      )
      context.drawImage(
        '../../copy-asset/assets/img/bg.jpg',
        windowWidth * 0.06,
        (20 + margin_top) * scale,
        windowWidth * 0.88,
        windowWidth * 0.88 / 680 * 376
      )

      //缓存的选取手机列表
      console.log(global['cache_list'])
      console.log(global['commit_data'])

      wx.downloadFile({
        url: global['commit_data'].avatar, // 下载资源的 url
        success: res => {
          console.log(res)
          context.save()
          context.beginPath()
          context.arc(
            126 * scale,
            (60 + margin_top) * scale,
            20 * scale,
            0,
            2 * Math.PI
          )
          context.clip()
          context.drawImage(
            res.tempFilePath,
            106 * scale,
            (40 + margin_top) * scale,
            40 * scale,
            40 * scale
          )
          context.restore()
          context.draw(true, () => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: windowWidth,
              height: windowHeight,
              // destWidth: windowWidth,
              // destHeight: windowHeight,
              canvasId: 'log-bg',
              success: function(canvas_res) {
                wx.hideLoading();
                global['log_path'] = canvas_res.tempFilePath
              }
            })
          })
        },
        fail: () => {},
        complete: () => {}
      })

      context.setFillStyle('#FEA002')
      context.setFontSize(30 * scale)
      context.setTextAlign('center')
      context.fillText(
        global['commit_data'].start,
        100 * scale,
        (105 + margin_top) * scale
      )
      context.fillText(
        global['commit_data'].end,
        230 * scale,
        (105 + margin_top) * scale
      )
      context.fillText(
        global['commit_data'].money,
        196 * scale,
        (140 + margin_top) * scale
      )
      context.fillText(
        global['commit_data'].percent,
        194 * scale,
        (175 + margin_top) * scale
      )

      let target_name = global['commit_data'].names[0]
      global['cache_list'].map(phone => {
        phone.name == target_name &&
          wx.downloadFile({
            url: phone.img, // 下载资源的 url
            success: res => {
              wx.getImageInfo({
                src: res.tempFilePath,
                success: function(img_res) {
                  context.drawImage(
                    res.tempFilePath,
                    windowWidth * 0.15,
                    (220 + margin_top) * scale,
                    windowWidth * 0.7,
                    windowWidth * 0.7 / img_res.width * img_res.height
                  )

                  context.draw(true, () => {
                    wx.canvasToTempFilePath({
                      x: 0,
                      y: 0,
                      width: windowWidth,
                      height: windowHeight,
                      // destWidth: windowWidth,
                      // destHeight: windowHeight,
                      canvasId: 'log-bg',
                      success: function(canvas_res) {
                        wx.hideLoading();
                        global['log_path'] = canvas_res.tempFilePath
                      }
                    })
                  })
                }
              })
            },
            fail: () => {},
            complete: () => {}
          })
      })

      context.setFillStyle('#333333')
      context.setFontSize(12 * scale)
      context.setTextAlign('left')
      global['commit_data'].names.map((phone, index) => {
        if (index >= 3 * 4) {
          return
        }
        context.fillText(
          phone,
          (index % 3) * 80 * scale + 20 * scale,
          Math.floor(index / 3) * 20 * scale + windowHeight - 90 * scale,
          70 * scale
        )
      })

      context.drawImage(
        '../../copy-asset/assets/img/er_code.png',
        windowWidth - 95 * scale,
        windowHeight - 95 * scale,
        80 * scale,
        80 * scale
      )

      context.draw(true, () => {
        global['canvas_drawed'] = true
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: windowWidth,
          height: windowHeight,
          // destWidth: windowWidth,
          // destHeight: windowHeight,
          canvasId: 'log-bg',
          success: function(canvas_res) {
            wx.hideLoading();
            global['log_path'] = canvas_res.tempFilePath
          }
        })
      })
    },
    printBackEndPic() {
      console.warn('print_backend_pic')
      // let param = JSON.stringify(global['img_data']);
      let url =
        global['commit_data'].url ||
        'https://open.bleege.com/cgi/api/myPhone/getShareImage?pageData=eyJhdmF0YXIiOiJhdmF0YXIucG5nIiwiZW5kIjoiNEciLCJtb25leSI6OTk4LCJwZXJjZW50IjoiOTkuOSUiLCJzdGFydCI6IjgwIiwiYnJhbmRzIjpbWyJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciLCJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciLCJodHRwOi8vaW1nLmdhbWUud3hhZ2FtZS5jb20vbW9iaWxlX3BuZ3MvNTc1Ni5wbmciXSxbImh0dHA6Ly9pbWcuZ2FtZS53eGFnYW1lLmNvbS9tb2JpbGVfcG5ncy81NzU4LnBuZyJdLFsiaHR0cDovL2ltZy5nYW1lLnd4YWdhbWUuY29tL21vYmlsZV9wbmdzLzMwNzkucG5nIiwiaHR0cDovL2ltZy5nYW1lLnd4YWdhbWUuY29tL21vYmlsZV9wbmdzLzMwNzkucG5nIl0sW11dLCJuYW1lcyI6WyLlsI%2fnsbMmIzM5O1xcXCJNMSIsIuivuuWfuuS6mjUyMDAiLCIxMjMiLCLor7rln7rkupo1MjAw6K%2b65Z%2b65LqaNTIwMCIsIuivuuWfuuS6mjUyMDAiXX0%3d'
      let windowWidth = 0
      let windowHeight = 0
      let scale_base = 375
      let scale = 0
      wx.getSystemInfo({
        success: function(res) {
          windowWidth = res.windowWidth
          windowHeight = res.windowHeight
          scale = windowWidth / scale_base
        }
      })
      var context = wx.createCanvasContext('log-bg')
      wx.showLoading({
        title: '加载中。。。', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => {}
      })
      context.drawImage(
        '../../copy-asset/assets/img/bg_block.png',
        0,
        0,
        windowWidth,
        windowHeight
      )
      context.drawImage(
        '../../copy-asset/assets/img/index-bg.jpg',
        0,
        0,
        windowWidth,
        windowHeight
      )
      // wx.downloadFile({
      //   url: url,
      //   success: res => {
      wx.getImageInfo({
        src: global['tempUrl'],
        success: function(img_res) {
          let posY =
            windowHeight -
            windowWidth / img_res.width * img_res.height -
            95 * scale
          context.drawImage(
            global['tempUrl'],
            0,
            posY < 0 ? 0 : posY,
            windowWidth,
            windowWidth / img_res.width * img_res.height
          )

          context.draw(true, () => {
            wx.hideLoading()
            wx.canvasToTempFilePath({
              x: 0,
              y: posY < 0 ? 0 : posY,
              width: windowWidth,
              height: windowWidth / img_res.width * img_res.height,
              // height:200,
              // destWidth: windowWidth*3,
              // destHeight: windowWidth / img_res.width * img_res.height*3,
              // destHeight:200,
              canvasId: 'log-bg',
              success: canvas_res => {
                // console.log(canvas_res.tempFilePath)
                wx.hideLoading();
                global['canvas_drawed'] = true
                global['log_path'] = canvas_res.tempFilePath
              }
            })
          })
        }
      })
      //   },
      //   fail: () => {},
      //   complete: () => {}
      // })
    }
  },
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0
    }
  },
  created() {},
  onShareAppMessage(res) {
    return {
      title: '从80年代到4G时代，你用过几款手机？',
      path: '/pages/index/main',
      imageUrl: global['log_path']
    }
  }
}
</script>

<style lang="scss">
page {
  height: calc(100% - 160rpx);
  padding-top: 160rpx;
}
// .log-page {
//   width: 100%;
//   background: #c9baa8;
//   height: calc(100vh-160rpx);
//   display: flex;
//   flex-flow: column nowrap;
//   padding-top: 160rpx;
// }
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180rpx;
  background: rgba(#000, 0.7);
  z-index: 1000;
}
.log-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
ul.list-container {
  opacity: 0;
}
.list-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  .list-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    opacity: 0;
    &:not(:last-child) {
      border-right: 2rpx dashed #ddd1be;
    }
    &:first-child {
      color: #ffde5e;
    }
    &:nth-child(2) {
      color: #38eb95;
    }
    img {
      width: 67rpx;
      margin-bottom: 16rpx;
    }
  }
}
.btn-share {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
[canvas-id='share_friend'] {
  height: 100px;
  display: 'flex';
  padding: 0 !important;
}
[canvas-id='share_pengyouquan'] {
  height: 100px;
  display: 'flex';
  padding: 0 !important;
}
[canvas-id='reselect'] {
  height: 100px;
  display: 'flex';
  padding: 0 !important;
}
</style>
