<template>
  <div class="col-12 row" :style="{ height: height }">
    <!-- 文件上传 -->
    <n-spin v-if="!state.fileUrl" :show="state.uploadLoading">
      <div>
        <n-upload
          v-model:file-list="state.fileList"
          list-type="image-card"
          directory-dnd
          :disabled="disable"
          :accept="state.accept"
          :file-list-style="{
            display: 'flex',
            width: config.width || '80px',
            height: '80px',
          }"
          :max="1"
          :custom-request="customImageRequest"
          :show-remove-button="!disable && clearable"
          @remove="handleClear"
          @change="handleUploadChange"
          @update:file-list="handleFileListChange"
        />
      </div>
      <template #description> 上传中... </template>
    </n-spin>
    <!-- 文件展示 -->
    <div v-if="state.fileUrl" class="relative">
      <n-upload
        v-if="props.otherParams?.type === 'image'"
        v-model:file-list="state.fileList"
        list-type="image-card"
        directory-dnd
        :disabled="disable"
        :accept="state.accept"
        :file-list-style="{
          display: 'flex',
          width: config.width || '80px',
          height: '80px',
        }"
        :max="1"
        :custom-request="customImageRequest"
        :show-remove-button="!disable && clearable"
        @remove="handleClear"
        @change="handleUploadChange"
        @update:file-list="handleFileListChange"
      />
      <!-- 全部类型 -->
      <div
        v-if="otherParams?.type == 'all'"
        class="all-class"
        style="display: contents"
      >
        <div
          style="position: absolute; z-index: 20"
          v-if="
            state.fileUrl?.endsWith('.png') ||
            state.fileUrl?.endsWith('.jpg') ||
            state.fileUrl?.endsWith('.jpeg') ||
            state.fileUrl?.endsWith('.gif') ||
            state.fileUrl?.endsWith('.bmp')
          "
        >
          <img :src="state.fileUrl" class="width-100" />
        </div>
        <eye-outlined
          style="z-index: 999; position: relative"
          @click.stop="handleOpenLink(state.fileUrl)"
        />

        <div
          style="z-index: 999; position: relative"
          v-if="!disable && clearable"
          class="color-primary fl-ma-sm"
          @click.stop="handleClear(state.fileUrl)"
        >
          <delete-outlined style="color: red" />
        </div>
        <!-- 如果是图片，则显示预览图 -->
      </div>
      <!-- pdf -->
      <n-upload
        v-else-if="state.fileUrl?.endsWith('.pdf')"
        v-model:file-list="state.fileList"
        list-type="image-card"
        :directory-dnd="false"
        :accept="state.accept"
        :file-list-style="{
          display: 'flex',
          width: config.width || '80px',
          height: '80px',
        }"
        :max="1"
        :on-before-upload="beforeUpload"
        :on-preview="handlePreview"
        :show-remove-button="!disable && clearable"
        @remove="handleClear"
      />

      <!-- image width popover-->
      <n-popover
        v-else-if="config?.popover"
        :show-arrow="true"
        :scrollable="true"
      >
        <template #trigger>
          <img
            :src="state.fileUrl"
            style="max-width: 50vw; max-height: 50vh; object-fit: contain"
            alt="file"
            fallback-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
          />
        </template>
        <div style="padding: 4px">
          <n-image
            width="100%"
            height="80%"
            @click.stop=""
            :src="state.fileUrl"
            :preview-src="state.fileUrl"
            fallback-src="data:image/png;base64,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"
          >
          </n-image>
        </div>
      </n-popover>

      <!-- video -->
      <video
        v-else-if="otherParams?.type === 'video'"
        style="width: 100%; height: 100%"
        :src="state.fileUrl"
        controls="controls"
        autoplay="autoplay"
      ></video>

      <!-- video clear -->
      <img
        v-if="!disable && clearable && otherParams?.type === 'video'"
        class="absolute clear-icon"
        style="
          width: 20px;
          height: 20px;
          border-radius: 50%;
          right: -10px;
          top: -10px;
        "
        @click="handleClear"
      />
    </div>
  </div>
</template>
<script setup>
import {
  PlusOutlined,
  LoadingOutlined,
  DeleteOutlined,
  EyeOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import {
  reactive,
  onBeforeMount,
  onMounted,
  ref,
  getCurrentInstance,
  watch,
  createVNode,
  nextTick,
} from "vue";
import staticpdf from "@/assets/file/pdf.png";
import { processError } from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;

const emit = defineEmits([
  "triggerUpload",
  "triggerValChange",
  "upLoadFile",
  "triggerUploadLoading",
]);
let props = defineProps({
  val: String,
  title: String,
  fatherData: Object,
  height: {
    type: String,
    default: () => "80px",
  },
  disable: {
    type: Boolean,
    default: () => false,
  },
  otherParams: {
    type: Object,
    default: () => {
      type: "image";
    },
  },
  clearable: {
    type: Boolean,
    default: () => true,
  },
  visible: {
    type: Boolean,
    default: () => true,
  },
  config: {
    type: Object,
  },
  type: {
    type: String,
  },
  showDeleteModel: {
    // 确认是否删除
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  uploadUrl: "upload/img",
  fileUrl: "",
  uploadLoading: false,
  accept: "",
  fileList: [],
  uploadFile: null,
});

watch(
  () => props.val,
  () => {
    if (state.fileUrl !== props.val) {
      state.fileUrl = props.val;
    }
  }
);
watch(
  () => state.fileUrl,
  () => {
    if (state.fileUrl) {
      state.fileList = [
        {
          id: state.fileUrl,
          name: state.fileUrl,
          status: "finished",
          url: state.fileUrl?.endsWith(".pdf") ? staticpdf : state.fileUrl,
        },
      ];
    } else {
      state.fileList = [];
    }
  }
);
onBeforeMount(() => {
  if (props.val) {
    state.fileUrl = props.val;
  }
  state.accept = calcFileAccept();
});

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}

const handlePreview = () => {
  if (state.fileUrl?.endsWith(".pdf")) {
    window.open(state.fileUrl);
  }
};

const calcFileAccept = () => {
  if (!props.otherParams) {
    return "";
  }
  if (props.config?.otherFileType) {
    return props.config?.otherFileType;
  }
  if (props.otherParams?.type === "image") {
    return ".jpg, .jpeg, .png, .bmp, .avif";
  }
  if (props.otherParams?.type === "video") {
    return ".mov, .mp4, .mp3";
  }
  if (props.otherParams?.type === "file") {
    return ".zip, .pdf";
  }
};

const beforeUpload = (file) => {
  // const isJpgOrPng =
  //   file.type === "image/jpeg" ||
  //   file.type === "image/png" ||
  //   file.type === "image/bmp";

  // if (!isJpgOrPng) {
  //   message.error("You can only upload image file!");
  // }

  // const isLt2M = file.size / 1024 / 1024 < 2;

  // if (!isLt2M) {
  //   message.error("Image must smaller than 2MB!");
  // }
  return true;
  // return isJpgOrPng && isLt2M;
};

const customImageRequest = (e) => {
  emit("upLoadFile", e);
  let { file } = e.file;
  state.uploadFile = file;
  handleCalcLimit(file).then((uploadable) => {
    if (uploadable) {
      let url = state.uploadUrl;
      let params = { file: state.uploadFile };
      Object.assign(params, props.otherParams);
      state.uploadLoading = true;
      calcUploadLoading(true);
      $request.HTTP.components.uploadFormData(url, params).then(
        (res) => {
          calcUploadLoading(false);
          if (res.status === 0) {
            state.fileUrl = res.data.ori_url;
            if (props.otherParams?.type === "video") {
              emit("triggerUpload", res.data);
              emit("triggerValChange", {
                val: res.data.ori_url,
                cover_url: res.data.cover_url,
              });
            } else {
              emit("triggerUpload", res.data.ori_url);
              emit("triggerValChange", { val: res.data.ori_url });
            }
          } else {
            state.fileList = [];
            processError(res.msg || "操作失败!");
          }
          state.uploadLoading = false;
        },
        (err) => {
          state.uploadLoading = false;
          processError(err.message);
        }
      );
    }
  });
};
const calcUploadLoading = (loading) => {
  if (props.config.field) {
    let obj = {};
    obj[props.config.field] = loading;
    emit("triggerUploadLoading", obj);
  }
};
const handleClear = () => {
  if (props.showDeleteModel) {
    Modal.confirm({
      title: "确认删除操作，无法恢复？",
      icon: createVNode(ExclamationCircleOutlined),
      content: "",
      okText: "确认",
      okType: "danger",
      class: "deleteModel",
      cancelText: "取消",
      onOk() {
        state.fileUrl = null;
        emit("triggerUpload", null);
        emit("triggerValChange", { val: null });
      },
      onCancel() {},
    });
  } else {
    state.fileUrl = null;
    emit("triggerUpload", null);
    emit("triggerValChange", { val: null });
  }
};
const handleUploadChange = () => {
  console.log("handleUploadChange");
};
const handleFileListChange = () => {
  console.log("handleFileListChange");
};
const handleOpenLink = (url) => {
  window.open(url);
};

const handleCalcLimit = (file) => {
  if (props.otherParams.type !== "image") {
    return Promise.resolve(true);
  }
  return calcLimit(file).then((res) => {
    if (props.config?.limit4096) {
      state.uploadFile = res.file;
    }
    if (res.width > 4096 || res.height > 4096) {
      processError(`${file.name} 长或宽超出4096限制`);
      return false; //不符合比例也暂时让其上传成功
    }
    if (!props.config.limit) {
      return true;
    }
    let limitArr = props.config.limit.split("*");
    // 宽不限制 null*xxx
    if (limitArr[0] === "null") {
      console.log("高限，宽不限");
      if (
        (limitArr[1] * 1 >= res.height &&
          (limitArr[1] * 1) % res.height === 0) ||
        (limitArr[1] * 1 < res.height && res.height % (limitArr[1] * 1) === 0)
      ) {
        return true;
      }
      processError(`${file.name} 不符合尺寸比例`);
      return true; //不符合比例也暂时让其上传成功
    }

    // 高不限制 xxx*null
    if (limitArr[1] === "null") {
      console.log("宽限，高不限");
      if (
        (limitArr[0] * 1 >= res.width && (limitArr[0] * 1) % res.width === 0) ||
        (limitArr[0] * 1 < res.width && res.width % (limitArr[0] * 1) === 0)
      ) {
        return true;
      }
      processError(`${file.name} 不符合尺寸比例`);
      return true; //不符合比例也暂时让其上传成功
    }
    if ((limitArr[0] * 1) / (limitArr[1] * 1) === res.width / res.height) {
      return true;
    } else {
      processError(`${file.name} 不符合尺寸比例`);
      return true; //不符合比例也暂时让其上传成功
    }
  });
};
const calcLimit = (file) => {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (evt) {
      var replaceSrc = evt.target.result;
      var imageObj = new Image();
      imageObj.src = replaceSrc;
      imageObj.onload = function () {
        let width = imageObj.width;
        let height = imageObj.height;
        if (width > 4096 || height > 4096) {
          if (width > height) {
            height = Math.round((height * 4096) / width);
            width = 4096;
          } else {
            width = Math.round((width * 4096) / height);
            height = 4096;
          }
        }
        if (props.config?.limit4096) {
          var canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(imageObj, 0, 0, width, height);
          canvas.toBlob(function (blob) {
            const compressedFile = new File([blob], file.name, {
              type: file.type,
              lastModified: file.lastModified,
            });
            resolve({
              width: width,
              height: height,
              file: compressedFile,
            });
          }, file.type);
        } else {
          resolve({
            width: width,
            height: height,
          });
        }
      };
    };
  });
};
</script>
<style scoped>
:deep(.n-upload-file-list .n-upload-file.n-upload-file--image-card-type) {
  width: 100%;
  height: 100%;
}

:deep(.n-upload-trigger.n-upload-trigger--image-card) {
  width: 100%;
  height: 100%;
}
</style>
