<script lang="ts" setup>
import { ref } from "vue";
import { type UploadUserFile, type UploadProps, ElMessage } from "element-plus";
import { useUserStore } from "/@/store/modules/user";
import { useResponseHandle } from "/@/hooks";
import { httpImageUpload, baseUrl } from "/@/api/other";
import { getToken } from "/@/utils/auth";

import { useVModel } from "@vueuse/core"

import { isEncoded } from "/@/utils/global"

const emit = defineEmits(["change"]);

const types = ["image/png", "image/jpg", "image/bmp", "image/jpeg"];

const props = defineProps<{
  multiple?: boolean;
  modelValue?: Array<string>
}>();

const fileList = ref<UploadUserFile[]>([]);
const imgs = useVModel(props, 'modelValue')
const responseHandle = useResponseHandle();

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const onBeforeReturnImageUpload: UploadProps["beforeUpload"] = ({ type, size }) => {
  if (!types.includes(type)) {
    ElMessage.error("请上传jpg.png.bmp.jpeg类型图片");
    return false;
  }

  if (size / 1024 / 1024 > 1) {
    ElMessage.error("图片大小超过1M");
    return false;
  }
};


// @EveryOne
// request response
const handleRequest: UploadProps["httpRequest"] = async ({ file }) => {
  const _formData = new FormData();
  const token = getToken();
  _formData.append("image", file);
  _formData.append("token", token);

  const { message, code, data } = await httpImageUpload(_formData);

  responseHandle({
    code,
    message,
    handler: () => {
      const url = baseUrl + "/" + data[0].url
      imgs.value.push(isEncoded(url) ? url : encodeURI(url));
      emit("change", imgs.value.join(","));
    }
  });
};

const handleExceed: UploadProps["onExceed"] = () => {
  ElMessage.error("回执图片不能超过十张");
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const handleRemove: UploadProps["beforeRemove"] = uploadFile => {
  const delIndex = fileList.value.findIndex(({ uid }) => uid === uploadFile.uid);
  imgs.value.splice(delIndex, 1);

  emit(
    "change", 
    imgs.value.join(","), 
    imgs
  );
  
  return true;
};
</script>

<template>
  <el-upload
    :before-upload="onBeforeReturnImageUpload"
    :on-preview="handlePictureCardPreview"
    :http-request="handleRequest"
    :before-remove="handleRemove"
    v-model:file-list="fileList"
    :on-exceed="handleExceed"
    list-type="picture-card"
    :accept="types.join(',')"
    :multiple="multiple"
    :limit="10"
  >
    <div class="add-icon">+</div>
  </el-upload>

  <el-dialog v-model="dialogVisible" :close-on-click-modal="false">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<style lang="scss">
.add-icon {
  font-size: 18px;
}

.el-upload-list {
  width: 48px !important;
  height: 48px !important;

  .el-upload{
    height: 48px !important;
    width: 48px !important;
  }
}

.el-upload-list__item{
    height: 42px !important;
    width: 42px !important;
  }

  .el-upload-list--picture-card{
    width: 100% !important;
    display:flex;
  }
</style>
