<template>
  <view class="qrcode">
    <demo-block title="qrcode">
      <!-- <image v-if="picture2" :src="picture2" mode="widthFix"></image> -->
      <l-painter css="width: 100%;  background: #fff" @fail="fail" @done="done" pathType="url" ref="poster" performance isCanvasToTempFilePath @success="path = $event">
        <l-painter-view css="margin-top: 30rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 606rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
          <l-painter-image :src="downFile(qrCodeDetail.logo)" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 794rpx;" />
          <!-- <l-painter-image src="https://img.zcool.cn/community/01b31d5e876a98a801216518480e2f.jpg@1280w_1l_2o_100sh.jpg" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 794rpx;" /> -->
          <l-painter-view css="margin-top: 30rpx; display: flex; align-items: center;justify-content: space-between; padding: 0rpx 38rpx 42rpx; box-sizing: border-box;">
            <l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
              <l-painter-text :text="UserInfo.nickname" css="display: block; padding-bottom: 10rpx; color: #000; font-size: 32rpx; fontWeight: bold" />
              <l-painter-text text="邀请你加入宠物医院APP" css="color: rgba(0,0,0,.7); font-size: 24rpx" />
            </l-painter-view>
            <!-- 图片二维码 -->
            <!-- <l-painter-image src="https://img.zcool.cn/community/01b31d5e876a98a801216518480e2f.jpg@1280w_1l_2o_100sh.jpg" css="width: 128rpx; height: 128rpx;" /> -->
            <!-- <l-painter-image :src="downFile(qrCodeDetail.logo)" css="width: 128rpx; height: 128rpx;" /> -->
            <!-- 二维码 -->
            <l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="qrCodeDetail.qrcode"></l-painter-qrcode>
          </l-painter-view>
        </l-painter-view>
      </l-painter>
      <!-- <button type="default" @click="save">save</button> -->
    </demo-block>
    <view class="flexA ControlsBox">
      <view class="flexCCol item" v-for="(_, index) in ControlsList" :key="index" @click="clickControlsItemHandler(_)">
        <image :src="_.imgUrl" mode="aspectFill" />
        <view>{{ _.title }}</view>
      </view>
    </view>
    <view class="flexC" style="margin-top: 72rpx" @click="callbackHandler">
      <image src="/static/images/closeqrcode.png" mode="aspectFill" style="width: 80rpx; height: 80rpx" />
    </view>
  </view>
</template>

<script>
import { getInvite, getPaper_basedata, updateChange_invite_paper } from '../../api'
import { baseURL } from '../../utils/http'
import { permision } from '../../utils/permission'

export default {
  data: () => ({
    picture: '',
    path: '',
    picture2: '',
    show: false,
    ControlsList: [
      { title: '微信', imgUrl: '/static/images/wechat.png', type: 'wechat' },
      { title: '朋友圈', imgUrl: '/static/images/puq.png', type: 'puq' },
      { title: '保存图片', imgUrl: '/static/images/download.png', type: 'download' }
    ],
    qrCodeDetail: {},
    UserInfo: {}
  }),
  onLoad() {
    setTimeout(() => {
      console.log(this.path)
    }, 1000)
    this.UserInfo = uni.getStorageSync('UserInfo')
    this.getQrcodeHandler()
  },
  methods: {
    downFile(fileName) {
      if (fileName == '' || fileName == undefined) return ''

      if (fileName.indexOf(baseURL) > -1 || fileName.indexOf('http://') > -1 || fileName.indexOf('https://') > -1) return fileName

      return baseURL + fileName
    },
    async getQrcodeHandler() {
      const { result } = await getInvite()
      // const { result: Paper } = await getPaper_basedata()
      const Paper = {}
      this.qrCodeDetail = { ...result, ...Paper }
    },
    callbackHandler() {
      uni.navigateBack({ delta: 1 })
    },
    // WXSceneTimeline 朋友圈
    // WXSceneSession  聊天
    shareQrcodeHandler(scene, imageUrl) {
      uni.share({
        provider: 'weixin',
        scene: scene,
        type: 2,
        imageUrl: imageUrl,
        success: function (res) {
          console.log('success:' + JSON.stringify(res), '分享成功')
          uni.$u.toast('分享成功')
          setTimeout(() => uni.navigateBack(), 1200)
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err), '分享失败')
        }
      })
    },
    clickControlsItemHandler(_) {
      // console.log(_)
      let that = this
      this.$refs.poster.canvasToTempFilePathSync({
        fileType: 'jpg',
        quality: 1,
        success: res => {
          // console.log(res.tempFilePath.split('blob:'), '成功')
          // this.picture2 = res.tempFilePath.split('blob:')[1]
          // console.log(this.picture2, '11')
          uni.uploadFile({
            url: baseURL + '/sys/common/upload', //仅为示例，非真实的接口地址
            filePath: res.tempFilePath,
            name: 'file',
            formData: {
              user: 'test',
              token: uni.getStorageSync('token')
            },
            success: async uploadFileRes => {
              console.log(JSON.parse(uploadFileRes.data), '图片路径')
              const uploadUrl = JSON.parse(uploadFileRes.data).message
              await updateChange_invite_paper({ image: uploadUrl })
              if (['puq', 'wechat'].includes(_.type)) return that.shareQrcodeHandler({ puq: 'WXSceneTimeline', wechat: 'WXSceneSession' }[_.type], that.downFile(uploadUrl))
            }
          })
        },
        fail(e) {
          console.log('???????????', e)
        }
      })

      if (_.type === 'download') return this.save()
    },
    close() {
      this.show = false
    },
    fail(v) {
      console.log(v)
    },
    done(v) {
      console.log('绘制完成:')
    },
    async save() {
      // #ifdef APP-PLUS
      if (uni.getStorageSync('deviceType') === 'android') {
        const result = await permision.premissionCheck('EXTERNAL_STORAGE')
        if (result != 1) {
          console.log('拒绝')
          return
        }
      }
      // #endif
      this.$refs.poster.canvasToTempFilePathSync({
        fileType: 'jpg',
        quality: 1,
        success: res => {
          console.log(res.tempFilePath.split('blob:'), '成功')
          // this.picture2 = res.tempFilePath.split('blob:')[1]
          this.picture2 = res.tempFilePath
          console.log(this.picture2, '11')
          this.saveImage()
        },
        fail(e) {
          console.log('???????????', e)
        }
      })
    },
    // 保存图征
    saveImage() {
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: this.picture2,
        success(res) {
          uni.showToast({
            title: '已保存到相册',
            icon: 'success',
            duration: 2000
          })
        }
      })
      // #endif
    }
  }
}
</script>

<style>
page {
  background: #f7f8fa !important;
}
</style>

<style lang="scss" scoped>
.qrcode {
  box-sizing: border-box;
  padding: 68rpx 72rpx 0;

  .ControlsBox {
    margin-top: 46rpx;
    justify-content: space-around;
    .item {
      image {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-bottom: 12rpx;
      }
      color: #333333;
      font-size: 24rpx;
    }
  }
}
</style>