<template>
  <div class="page" style="width: 100%; height: 100%">
    <!-- 上传 -->
    <el-upload
      show-file-list="false"
      :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
      append-to-body="true"
      destroy-on-close="true"
      get-container="#app"
      v-model="dialogVisible"
      title="Tips"
      width="60%"
      :before-close="handleClose"
    >
      <!-- <img :src="option.img" alt="" /> -->
      <!-- 123321 -->
      <div style="height: 500px; width: 100%">
        <VueCropper
          :style="{ width: '100%', height: '100%' }"
          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="sendImgData"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
// import "vue-cropper/dist/index.css";
// import { VueCropper } from "vue-cropper";
import { ElMessage } from "element-plus/es";
import { ref, reactive, watch } from "vue";
import { awsImgUpload, saveImgApi } from "../apis/createVideo";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const lanChange = ref(locale);
const emit = defineEmits(["reGetpersonBGIList", "reGetpersonSCIList"]);
const props = defineProps({
  type: {
    default: 4,
    type: Number,
  },
  videoType: {
    default: 1,
    type: Number,
  },
});
//#region 选择好文件后
const dialogVisible = ref(false); //弹框显隐
function beforeAvatarUpload(file) {
  let data = window.URL.createObjectURL(file);
  option.img = data; //给裁剪图片的路径
  dialogVisible.value = true;
}
// 防止组件自动上传报错
function myUpload(params) {}
//#endregion ------------------------
const cropper = ref(null);
const option = reactive({
  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 裁剪图片
const cropperOverData = ref(null);
function sendImgData() {
  cropper.value.getCropBlob(async (data) => {
    try {
      const res = await awsImgUpload(data);
      const res2 = await saveImgApi({
        type: props.type,
        videoType: props.videoType,
        material: res.data.url,
      });
      ElMessage.success(
        lanChange.value == "zh-cn"
          ? "图片上传成功!"
          : "Picture uploaded successfully!"
      );
      // 重新获取列表
      if (props.type == 4) {
        emit("reGetpersonBGIList");
        dialogVisible.value = false;
      } else if (props.type == 5) {
        emit("reGetpersonSCIList");
        dialogVisible.value = false;
      }
    } catch (error) {
      ElMessage.error(error.message);
    }
  });
}
//#endregion ------------------------

//#region
watch(
  () => props.videoType,
  (newValue, oldValue) => {
    if (props.type == 4 && props.videoType == 1) {
      option.autoCropWidth = 1080 + "px"; // 默认生成截图框宽度
      option.autoCropHeight = 1920 + "px"; // 默认生成截图框高度
      option.fixed = true;
      option.fixedNumber = [1080, 1920];
    }
    if (props.type == 4 && props.videoType == 2) {
      option.autoCropWidth = 1920 + "px"; // 默认生成截图框宽度
      option.autoCropHeight = 1080 + "px"; // 默认生成截图框高度
      option.fixed = true;
      option.fixedNumber = [1920, 1080];
    }
  },
  { deep: true }
);

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

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.avatar-uploader {
  width: 100%;
  height: 100%;
}
:deep(.el-upload--text) {
  width: 100%;
  height: 100%;
}
:deep(.el-upload) {
  width: 100%;
  height: 100%;
}
:deep(.el-icon) {
  width: 100%;
  height: 100%;
}
:deep(.avatar-uploader-icon) {
  width: 100%;
  height: 100%;
}
</style>

<!-- <style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 100%;
  height: 200px;
  display: block;
  overflow: hidden;
}
.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;
}
:deep(.el-upload-list) {
  display: none;
}
</style> -->
