<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false" @maskClick="emits('cancel')">
    <!-- 通用提示弹窗 用于提示用户 数据含义 -->
    <view class="card-wrapper">
      <view class="card-title flex-center">手持承诺函</view>
      <view class="image-wrapper">
        <view class="tips-title">手持承诺函示例图</view>
        <image src="/pageWork/static/images/authorize.svg" mode="aspectFit" />
        <view class="download" @tap="downLoad">模板下载</view>
      </view>
      <view class="card-button flex-center" hover-class="touch-hover" @tap="confirm"> 我知道了</view>
    </view>
  </uni-popup>
  <JeepayPopupConfirm ref="confirmSave" />
</template>

<script setup>
import { onMounted, reactive, ref, inject } from 'vue'

const emits = defineEmits(['cancel'])
const vdata = reactive({})
const popup = ref(null)
const confirmSave = ref(null)
const open = (url) => {
  vdata.url = url
  console.log('url', url)
  popup.value.open()
}
const confirm = () => {
  emits('cancel')
  popup.value.close()
}
const downLoad = () => {
  popup.value.close()
  // #ifdef  APP-PLUS
  confirmSave.value.open('确认下载模板吗？').then((res) => {
    uni.downloadFile({
      url: vdata.url, //仅为示例，并非真实的资源
      success: (res) => {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: function (val) {
            uni.openDocument({
              filePath: val.savedFilePath,
              success: function (res) {
                uni.showToast({
                  title: '保存成功',
                })
              },
              fail: function (err) {},
            })
          },
        })
      },
    })
  })
  // #endif
  //#ifdef MP-WEIXIN
  confirmSave.value
    .open('确认下载模板吗？')
    .then((res) => {
      uni.setClipboardData({ data: vdata.url }).then((res) => {
        uni.showToast({ title: '下载链接复制成功，请到浏览器中粘贴下载', icon: 'none' })
      })
      // downloadQR(vdata.url)
    })
    .catch(() => {
      popup.value.open()
    })
  //#endif
}
//#ifdef MP-WEIXIN
function downloadQR() {
  wx.getSetting({
    //获取权限
    success(res) {
      if (res.authSetting['scope.writePhotosAlbum']) {
        download(vdata.url)
      } else {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            download(vdata.url)
          },
        })
      }
    },
  })
}
function download(data) {
  wx.downloadFile({
    url: data,
    success: (res) => {
      const FileSystemManager = wx.getFileSystemManager()
      FileSystemManager.saveFile({
        tempFilePath: res.tempFilePath,
        filePath: wx.env.USER_DATA_PATH + '/' + '授权函模板' + '.docx',
        success: function (val) {
          console.log('val', val)
          console.log('val.savedFilePath', val.savedFilePath)
          uni.showToast({
            title: '下载成功保存路径' + val.savedFilePath,
            icon: 'none',
            mask: true,
          })
          uni.vibrateShort()
        },
        fail: function (err) {
          console.log('err', err)
          uni.showToast({
            title: '下载失败',
            icon: 'error|none',
            mask: true,
          })
        },
      })
    },
  })
}
//#endif
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card-wrapper {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
  max-height: 70vh;
  .card-title {
    margin-bottom: 20rpx;
    height: 110rpx;
    font-size: 30rpx;
    font-weight: 400;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .card-button {
    margin-top: 20rpx;
    height: 110rpx;
    font-size: 32rpx;
    color: #2980fd;
    border-top: 20rpx solid #f7f7f7;
  }
}
.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }
  .tips-title {
    margin: 20rpx 0;
    font-size: 25rpx;
    color: #888;
  }
  .download {
    margin: 30rpx 0;
    font-size: 32rpx;
    color: #2980fd;
  }
}
</style>
