<template>
  <div style="width: 100%; height: 100%">
    <!-- 上传 -->
    <el-upload
      :http-request="myUpload"
      ref="uploader"
      class="avatar-uploader"
      accept="image/*"
      :before-upload="beforeAvatarUpload"
    >
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <!-- 弹框 -->
    <el-dialog
      get-container="#app"
      v-model="dialogVisible"
      title="Tips"
      width="60%"
      :before-close="handleClose"
    >
      <!-- <img :src="option.img" alt="" /> -->
      <!-- 123321 -->
      <div style="height: 500px; width: 500px">
        <VueCropper
          style="height: 500px; width: 500px"
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :high="option.high"
          :mode="option.mode"
        />
      </div>

      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { VueCropper } from "vue-cropper";
import "vue-cropper/dist/index.css";
import { ref } from "vue";

//#region 选择好文件后
const dialogVisible = ref(true); //弹框显隐
function beforeAvatarUpload(file) {
  let data = window.URL.createObjectURL(file);
  option.value.img = data; //给裁剪图片的路径
  dialogVisible.value = true;
}
// 防止组件自动上传报错
function myUpload(params) {}
//#endregion ------------------------
const cropper = ref(null);
const option = ref({
  img: "",
  outputSize: 0.5, //图片质量
  info: false, // 裁剪框的大小信息
  // outputType: 'jpeg', // 裁剪生成图片的格式
  outputType: "png", // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
  autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
  high: true, // 是否按照设备的dpr 输出等比例图片
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: false, // 是否开启截图框宽高固定比例
  // fixedNumber: [1, 1], // 截图框的宽高比例
  full: true, // 是否输出原图比例的截图
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  mode: "100% auto", // 图片默认渲染方式
});
//#region 裁剪图片

//#endregion ------------------------
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 100%;
  height: 200px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
