<template>
  <u-popup
    v-model="props.show"
    mode="center"
    closeable
    border-radius="40"
    @close="handleClose"
  >
    <view class="qrcode">
      <view class="title">班级二维码</view>
      <view class="image">
        <u-image width="100%" height="100%" :src="baseUrl + '/' + Url" />
        <!-- <view class="refresh" @tap="updateImage">
          <u-icon name="reload" color="#000000" size="32"></u-icon>
        </view> -->
      </view>
      <view class="detail"
        ><text
          >扫描二维码快速进入班级群或截图保存二维码微信识别进入班级群</text
        ></view
      >
    </view>
    <!-- <view class="footer">
      <u-button type="primary" size="medium" @tap="updateImage"
        >更新二维码</u-button
      >
      <u-button type="primary" size="medium" @tap="saveImage"
        >保存二维码</u-button
      >
    </view> -->
  </u-popup>
</template>

<script setup lang="ts">
import { baseUrl } from "@/utils/request";
import { toast } from "@/utils/util";

const props = defineProps({
  show: Boolean,
  classId: Number,
  Url: String,
});

const emits = defineEmits(["init", "update:modelValue"]);

const updateImage = () => {
  uni.chooseImage({
    count: 1,
    success: (chooseImageRes) => {
      const tempFilePaths = chooseImageRes.tempFilePaths;
      uni.uploadFile({
        url:
          baseUrl +
          "/LQKJ.K3.PeiXunSystem.WebApi.WebApiEditService.ClassImage,LQKJ.K3.PeiXunSystem.WebApi.common.kdsvc",
        filePath: tempFilePaths[0],
        name: "image",
        formData: {
          classId: props.classId,
        },
        success: ({ data }: any) => {
          const res = JSON.parse(data);
          if (res.code == 200) {
            emits("init");
            emits("update:modelValue", false);
            toast("更新成功");
          }
        },
      });
    },
  });
};

const saveImage = () => {
  downloadImage(baseUrl + "/" + props.Url);
  // downloadFile(baseUrl + "/" + props.Url, "image.jpg");
};

function downloadFile(fileURL: string, fileName: string) {
  fetch(fileURL)
    .then((response) => response.blob())
    .then((blob) => {
      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = fileName;
      link.click();
      URL.revokeObjectURL(downloadUrl);
    });
}

function downloadImage(url: string) {
  const link = document.createElement("a");
  link.href = url;
  link.download = "image.jpg";
  link.style.display = "none";

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

const handleClose = () => emits("update:modelValue", false);
</script>

<style lang="scss" scoped>
:deep(.u-mode-center-box) {
  background-color: transparent;
}

:deep(.u-iconfont::before) {
  margin-top: 50rpx;
}
.qrcode {
  background-image: url("../../../static/img/bg2.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-bottom-right-radius: 15rpx;
  border-bottom-left-radius: 15rpx;

  .title {
    font-size: 34rpx;
    font-weight: 500;
    color: #000000;
    margin-top: 50rpx;
  }
  .image {
    position: relative;
    width: 350rpx;
    height: 330rpx;
    margin-top: 44rpx;
    margin: 44rpx 125rpx;
    .refresh {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(.u-iconfont::before) {
      margin-top: 0;
    }
  }

  .detail {
    text-align: center;
    margin-bottom: 60rpx;
    text {
      display: block;
      width: 520rpx;
      height: 68rpx;
      margin: 0 40rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #bcbcbc;
      line-height: 28rpx;
    }
  }
}
.footer {
  box-sizing: border-box;
  margin-top: 50rpx;
  background-color: #fff;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  padding: 20rpx;
  // display: flex;

  .u-btn {
    width: 100%;
  }
}
</style>
