<template>
  <div class="bg-upload-image user-upload-image">
    <el-upload
      ref="upload"
      action="#"
      :auto-upload="false"
      :on-change="onChangeFile"
      :file-list="fileList"
      :disabled="disabled">
      <template #trigger>
        <div class="trigger-content">
          <div v-if="modelValue" class="image-trigger">
            <img :src="modelValue" />
            <div class="refresh-image">
              <i class="el-icon-refresh-right"></i>
            </div>
          </div>
          <div v-else class="upload-trigger">
            <span class="upload-icon"></span>
          </div>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  onMounted,
  reactive,
  ref,
  nextTick,
  toRefs,
} from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue"]);

const state = reactive({
  fileList: [],
});

const handleAvatarSuccess = ({ data }) => {
  emit("update:modelValue", data.visitURL);
};
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
  const isLt1M = file.size / 1024 / 1024 < 1;

  if (!isJPG) {
    ElMessage.error("上传的图片只能是 JPG、PNG 格式!");
  }
  if (!isLt1M) {
    ElMessage.error("上传的图片大小不能超过 1MB!");
  }

  return isJPG && isLt1M;
};
const onChangeFile = (file, fileList) => {
  console.log(file, fileList);
  if (!beforeAvatarUpload(file.raw)) {
    return;
  }
  var reader = new FileReader();
  reader.readAsDataURL(file.raw); // 一定要传入file格式
  reader.onload = () => {
    emit("update:modelValue", reader.result);
  };
};

const { fileList } = toRefs(state);
</script>

<style scoped>
.user-upload-image :deep() .el-upload-list {
  display: none;
}
</style>
