<template>
  <view>
<!--    <canvas-->
<!--        canvas-id="canvas"-->
<!--            :style="{-->
<!--      width: 549+'px',-->
<!--      height: 849+'px',-->
<!--      'transform': `scale(${1})`-->
<!--    }">-->

<!--    </canvas>-->
<!--    <canvas canvas-id="myCanvas"></canvas>-->
    <button @click="clear">清除</button>
    <button @click="setI">设置</button>
    <button @click="exportPng">导出</button>
    <e-canvas ref="rCanvas" ></e-canvas>
  </view>
</template>

<script>
import ECanvas from "./e-canvas";
import mergeImages from "./mergeImages";
export default {
  name: "index",
  components: {ECanvas},
  data(){
    return{
      index: 0
    }
  },
  methods:{
    downLoadNetworkFile(url){
      return new Promise((resolve,reject)=>{
        uni.downloadFile({
          url,
          success:(res)=>{
            if(res.statusCode == 200){
              resolve(res.tempFilePath)
            }else{
              reject("Download Image Fail:102")
            }
          },
          fail:(err)=>{
            reject("Download Image Fail:101")
          }
        })
      })
    },
    urlToBase64(config){
      return new Promise(async (resolve,reject)=>{
        if (typeof window != 'undefined') {
          await this.downLoadNetworkFile(config.url).then(res=>{ // two function
            resolve(res)
          }).catch(err=>{
            reject(err)
          })
        }else if (typeof plus != 'undefined') {
          plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{
            obj.file((file)=>{
              let fileReader = new plus.io.FileReader()
              fileReader.onload = (res)=>{
                resolve(res.target.result)
              }
              fileReader.onerror = (err)=>{
                reject(err)
              }
              fileReader.readAsDataURL(file)
            }, (err)=>{
              reject(err)
            })
          },(err)=>{
            reject(err)
          })
        }else if(typeof wx != 'undefined'){
          wx.getFileSystemManager().readFile({
            filePath: config.url,
            encoding: 'base64',
            success: function(res) {
              resolve('data:image/png;base64,' + res.data)
            },
            fail: function(error) {
              reject(error)
            }
          })
        }
      })
    },
    exportPng(){
      uni.canvasToTempFilePath({
        canvasId: "canvas",
        quality: 1,
        // x: 100,
        // y: 200,
        width: 549,
        fileType:'jpg',
        height: 849,
        // destWidth: 100,
        // destHeight: 100,
        success: (res)=>{
          this.urlToBase64({
            url: res.tempFilePath
          }).then(i =>{
            console.log(i)
          })
          console.log('res',res.tempFilePath)
        },
        fail:(err)=>{
          console.log(JSON.stringify(err)|| "Failed to generate poster:101")
        }
      },this)
    },
    async setImg(){
      let sources = [
        'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/020141d6-840d-48f8-9b4d-bb3905583d05',
        'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/d691790d-ccf7-4e29-a9ac-69a8c058cb82',
        'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/8965770b-d673-4285-b472-6c4c1be662d9',
      ]
      let images = [
        await this.downLoadNetworkFile(sources[1]),
        await this.downLoadNetworkFile(sources[2]),
        await this.downLoadNetworkFile(sources[0]),
        "../../static/images/brank/lightxin.png",
        "../../static/images/brank/thumb.png"
      ];
      const ctx = uni.createCanvasContext("canvas",this),
          ww = 549, hh = 849;
      ctx.drawImage(images[0], 0, 0, ww, hh)
      ctx.drawImage(images[1], 0, 0, ww, hh)
      ctx.drawImage(images[2], 0, 0, ww, hh)
      // ctx.drawImage(images[1],  30, hh - 87, 50, 50);
      // ctx.drawImage(images[2],  ww - 90, hh - 92, 60, 60);
      ctx.draw();
    },
    getBaseUrl(){
      // #ifdef H5
      return process.env.NODE_ENV === 'development' ? '/images/': ''
      // #endif
      // #ifdef APP-PLUS
      return this.$IMG_URL;
      // #endif
    },
    async setI(){
      let baseUrl = this.getBaseUrl();
      let sources = [
        `${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05`,
        `${baseUrl}d691790d-ccf7-4e29-a9ac-69a8c058cb82`,
        `${baseUrl}8965770b-d673-4285-b472-6c4c1be662d9`,
        `${baseUrl}c24c2d77-2a53-4782-bec3-c66185a0ce10`,
      ]
      let images = [
        await this.downLoadNetworkFile(sources[1]),
        await this.downLoadNetworkFile(sources[2]),
        await this.downLoadNetworkFile(sources[0]),
        await this.downLoadNetworkFile(sources[3]),
      ]
      await this.$refs.rCanvas.mergeImageByImg(images[0],images[1])
    },
    async clear(){
      await this.$refs.rCanvas.clearCanvas()
    }
  },
  onReady(){
    this.$nextTick(async ()=>{

      // const context = uni.createCanvasContext('myCanvas')
      //
      // uni.downloadFile({
      //   url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
      //   success: function (res) {
      //     context.save()
      //     context.beginPath()
      //     context.arc(96, 96, 48, 0, 2 * Math.PI)
      //     context.clip()
      //     context.drawImage(res.tempFilePath, 48, 48)
      //     context.restore()
      //     context.draw()
      //   }
      // })

      const ctx = uni.createCanvasContext("canvas",this)
      // // 初始化
      await this.$refs.rCanvas.init({
        canvas_id: "rCanvas"
      })
      let baseUrl = this.getBaseUrl();
      let sources = [
          `${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05`,
          `${baseUrl}d691790d-ccf7-4e29-a9ac-69a8c058cb82`,
          `${baseUrl}8965770b-d673-4285-b472-6c4c1be662d9`,
          `${baseUrl}c24c2d77-2a53-4782-bec3-c66185a0ce10`,
          // '${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05',
          // '${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05',
          // 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/d691790d-ccf7-4e29-a9ac-69a8c058cb82',
          // 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/8965770b-d673-4285-b472-6c4c1be662d9',
          // // 上色用 图
          // 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/c24c2d77-2a53-4782-bec3-c66185a0ce10',
      ]
      let images = [
        await this.downLoadNetworkFile(sources[1]),
        await this.downLoadNetworkFile(sources[2]),
        await this.downLoadNetworkFile(sources[0]),
        await this.downLoadNetworkFile(sources[3]),
      ]
      // images.forEach((image) =>{
      //   let ww = 549, hh = 849;
      //   ctx.drawImage(image, 0, 0, ww, hh)
      // })
      // ctx.draw();


      // await this.$refs.rCanvas.mergeImages(sources);
      await this.$refs.rCanvas.mergeImageByImg(images[0],images[3])
    })
  }
}
</script>

<style scoped>

</style>
