<!--
 * @Author: Gui
 * @Date: 2023-05-12 11:36:28
 * @LastEditors: guicheng 1625811865@qq.com
 * @LastEditTime: 2024-06-20 16:14:29
 * @Description: kxs files
 * @filePath: 
-->
<template lang="pug">
el-upload(
ref="uploadRef"
v-model:file-list="fileList"
action="http://oss.kexiaoshuang.com"
list-type="picture-card"
:on-change="onChange"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="props.limit"
)
  IconifyIconOnline( icon="material-symbols:add-rounded" width="60px" height="60px" style="margin:0 auto;color:#999")
  template(#tip)
    .el-upload__tip.text-red 最多上传{{props.limit}}张图片
el-dialog( v-model="dialogVisible" title="图片预览" width="80%" draggable :destroy-on-close="true")
  div(class="flex justify-center align-middle" )
    img.preview(w-full :src="dialogImageUrl" alt="Preview Image" style="width:100%;height:100%;")

el-dialog(v-model="clipPhoto" title="裁剪图片" :destroy-on-close="true" draggable width="30vw")

  ReCropper(
    ref="refCropper"
    class="w-[30vw] h-[30vh]"
    :src="selectImg"
    :options={aspectRatio:aspectRatio}
  )
  template( #footer="")
    .flex
      el-button( @click="clipPhoto = false") 取消 
      el-button( type="primary" @click="confirmAdd") 确定

</template>
<script lang="ts" setup>
import { getConfig } from "@/config";
import { ref, nextTick, onMounted, watch } from "vue";
import Ossupload from "@/utils/OSSupload";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ElMessage } from "element-plus";
import ReCropper from "@/components/ReCropper";

type Res = {
  uploadurl?: string; // 上传地址
  url?: string; // 上传地址（+域名）
};
const props = defineProps({
  limit: {
    type: Number,
    default: 1
  },
  cropper: {
    type: Boolean,
    default: false
  },
  callBack: {
    type: Function,
    default: () => { }
  },
  imgList: {
    type: Object,
    default: []
  },

});
onMounted(() => {
  console.log(props.imgList, 12312)
  if (props.imgList && props.imgList.length > 0) {
    props.imgList.forEach(item => {
      fileList.value.push({ name: "1", url: item });
      UrlList.value.push(item.split(getConfig().UploadUrl + '/')[1]);
    })
  }
  console.log(fileList.value, 'fileList', UrlList.value)
})
// watch(
//   () => props.imgList,
//   newValue => {
//     console.log(newValue)
//     if (newValue) {
//       initImg()
//       newValue.forEach(item => {
//         fileList.value.push({ name: "1", url: item });
//         UrlList.value.push(item.split(getConfig().UploadUrl + '/')[1]);
//       })
//     } else {
//       initImg()
//     }
//     console.log(fileList.value, 'fileList', UrlList.value)
//   }
// );
const aspectRatio = ref(1);
// 文件列表
const fileList = ref<UploadUserFile[]>([]);
// 上传路径列表
const UrlList = ref<UploadUserFile[]>([]);
// 图片上传、预览、裁剪
const dialogImageUrl = ref("");
// 是否预览
const dialogVisible = ref(false);
// 是否裁剪图片
const clipPhoto = ref(false);
// 裁剪的图片
const selectImg = ref("");
// 裁剪之后的图片
const cropperImgName = ref("");
const uploadRef = ref();
const refCropper = ref();

const onChange = (file: any) => {
  if (
    file.raw.type == "image/webp" ||
    file.raw.type == "image/png" ||
    file.raw.type == "image/jpeg"
  ) {
    if (file.status == "ready") {
      // 裁剪
      if (props.cropper) {
        selectImg.value = file!.url;
        cropperImgName.value = file.name;
        clipPhoto.value = true;
      } else {
        // 直接上传，不需要裁剪
        OssUp(file.raw);
      }
    }
  } else {
    ElMessage({
      message: "仅支持png/jpg/webp 格式的图片文件",
      type: "error"
    });
  }
  nextTick(() => {
    uploadRef.value.clearFiles(["ready", "uploading", "fail"]);
  });
};
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
  // console.log(uploadFiles, '--删除', uploadFile)
  let uploadFilesdata = []
  uploadFiles.forEach((item: any) => {
    uploadFilesdata.push(item.url.split(getConfig().UploadUrl + '/')[1])
  })
  UrlList.value = uploadFilesdata
};
const initImg = () => {

  fileList.value = []
  UrlList.value = []
  // fileList.value.push({ name: cropperImgName.value, url: res.url });
  // UrlList.value.push(res.uploadurl);

}
const confirmAdd = (): void => {
  nextTick(() => {
    refCropper.value.cropper.getCroppedCanvas().toBlob(blob => {
      // upload to oss
      const file = new File([blob], cropperImgName.value, {
        type: "image/png"
      });
      OssUp(file);
    }, "image/jpeg");
    clipPhoto.value = false;
  });
};
const OssUp = file => {
  Ossupload(file, "KxsAdmin/UploadImg").then((res: Res) => {
    fileList.value.push({ name: cropperImgName.value, url: res.url });
    UrlList.value.push(res.uploadurl);


    props.callBack(UrlList.value.join(","));
  });
};
</script>
