<template>
  <uni-popup
    ref="popup"
    type="center"
    borderRadius="12px 12px 0 0"
    @change="changePopup"
    background-color="#F6F6F6"
  >
    <view class="popup-inner">
      <view class="title">请扫码上传附件</view>
      <view class="img-box">
        <canvas canvas-id="qrcode" id="qrcode" />
      </view>
      <view class="close-btn" @click="close"></view>
    </view>
  </uni-popup>
</template>

<script setup>
import uQRCode from '@/static/js/qrcode';
import { ref, inject, getCurrentInstance } from 'vue';
const emit = defineEmits(['onSend', 'onClose']);
const { $api } = inject('globalFunction');
const instance = getCurrentInstance();
const popup = ref(null);

function open() {
  popup.value.open();
  makeQrcode();
}

function close() {
  popup.value.close();
}

function changePopup(e) {
  if (e.show) {
  } else {
    emit('onClose');
  }
}

function makeQrcode() {
  const code = '111'
  setTimeout(() => {
    uQRCode.make({
      canvasId: 'qrcode',
      text: code,
      size: uni.upx2px(300),
      margin: 0,
      backgroundColor: '#ffffff',
      foregroundColor: '#1677ff',
      fileType: 'png',
      correctLevel: uQRCode.defaults.correctLevel,
      success: (res) => {
        console.log(res,'++');
      },
    });
  }, 100);
}

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.popup-inner{
    padding:  30rpx;
    padding-bottom: 40rpx;
    width: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    font-size: 30rpx;
    color: #333;
    margin-bottom: 30rpx;
    font-weight: bold;
}
.img-box {
  margin: 0 auto;
  width: 300rpx;
  height: 300rpx;
  canvas {
    width: 100%;
    height: 100%;
  }
}
.close-btn {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  width: 56rpx;
  height: 56rpx;
  &::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    width: 4rpx;
    height: 28rpx;
    border-radius: 2rpx;
    background: #5a5a68;
    transform: translate(50%, -50%) rotate(-45deg);
  }
  &::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    width: 4rpx;
    height: 28rpx;
    border-radius: 2rpx;
    background: #5a5a68;
    transform: translate(50%, -50%) rotate(45deg);
  }
}
</style>
