<template>
  <div class="upload-box">
    <div v-for="(item, index) in fileList" class="items">
      <img v-if="item.filePath" :src="item.filePath" class="upload-image" />
      <div class="upload-handle" @click.stop>
        <div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
          <el-icon :size="props.iconSize">
            <Edit />
          </el-icon>
        </div>
        <div class="handle-icon" @click="onPreview(index)">
          <el-icon :size="props.iconSize">
            <ZoomIn />
          </el-icon>
        </div>
        <div class="handle-icon" @click="handleRemove(index)" v-if="!self_disabled">
          <el-icon :size="props.iconSize">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
    <el-upload
      action="#"
      :id="uuid"
      class="upload-demo my-upload-images"
      :class="fileList.length > 0 && !loading ? 'success-file' : ''"
      :multiple="multiple"
      ref="uploadRef"
      :disabled="loading ? true : self_disabled || fileList.length >= props.limit"
      :http-request="handleHttpUpload"
      :before-upload="beforeUpload"
      list-type="picture-card"
      :limit="limit"
      :file-list="fileList"
      :show-file-list="false"
      v-if="!self_disabled"
      :on-exceed="onExceed"
      :accept="props.fileType"
    >
      <el-icon v-if="!loading">
        <Plus />
      </el-icon>
      <el-progress type="circle" v-else :percentage="progress" />
    </el-upload>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
  import type { UploadProps, UploadRequestOptions } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  import OSS from "ali-oss";
  import { generateUUID } from '@/utils/auth';

  const uploadRef = ref<UploadInstance>();
  import { upload,getOssConfig } from '@/api/common';

  // 接受父组件参数
  const props = defineProps({
    zIndex: {
      default: -1,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    btnTip: {
      type: String,
      default: '',
    },
    limit: {
      type: Number,
      default: undefined,
    },
    width: {
      type: String,
      default: '120px',
    },
    height: {
      type: String,
      default: '120px',
    },
    borderRadius: {
      type: String,
      default: '8px',
    },
    fileList: {
      type: Array,
      required: true,
      default: [],
    },
    disabled: {
      default: false,
    },
    fileSize: {
      default: 200,
    },
    orderNo: {
      default: '',
    },
    fileType: {
      default: '',
    },
    name: {
      default: '',
    },
  });
  // 生成组件唯一id
  const uuid = ref('id-' + generateUUID());

  // 判断是否禁用上传和删除
  const self_disabled = computed(() => {
    return props.disabled;
  });
  let editIndex = '';

  const emit = defineEmits(['upload']);
  const progress = ref(0);
  const loading = ref(false);
  //接口上传
  const handleHttpUpload = async (options: UploadRequestOptions) => {
    loading.value = true;
    try {
      const formData = new FormData();
      formData.append('file', options.file);
      formData.append('name', props.name);
      const res = await upload(formData);
      if (props.multiple) {
        let list = JSON.parse(JSON.stringify(props.fileList));
        if (editIndex !== '') {
          list.splice(editIndex, 1, {
            url: res.fileUrl,
            name: res.originalName,
            filePath: res.fileUrl,
            fileName: res.originalName,
          });
          editIndex = '';
        } else {
          list.push({
            url: res.fileUrl,
            name: res.originalName,
            filePath: res.fileUrl,
            fileName: res.originalName,
          });
        }
        emit('upload', list, props.zIndex);
      } else {
        emit('upload', res, props.zIndex);
      }
    } catch (error) {
      ElNotification({
        title: '温馨提示',
        message: '上传文件失败！',
        type: 'error',
      });
      if (props.multiple) {
        emit('upload', props.fileList, props.zIndex);
      } else {
        uploadRef.value!.clearFiles();
        emit('upload', '', props.zIndex);
      }
      options.onError(error as any);
    } finally {
      progress.value = 0;
      loading.value = false;
    }
  };
  //oss上传
  const handleHttpUploads = async (options: UploadRequestOptions) => {
    const configData = await getOssConfig()
    let date = new Date();
    let year = date.getFullYear();
    let month: string | number = date.getMonth() + 1;
    month = month < 10 ? ("0" + month) : month;
    let day: string | number = date.getDate();
    day = day < 10 ? ("0" + day) : day;
    let h: string | number = date.getHours();
    h = h < 10 ? ("0" + h) : h;
    let minute: string | number = date.getMinutes();
    minute = minute < 10 ? ("0" + minute) : minute;
    let second: string | number = date.getSeconds();
    second = second < 10 ? ("0" + second) : second;
    let time = h + "" + minute + "" + second;
    let fileName = (props.orderNo ? (time + '-' + props.orderNo) : time) + "-" + options.file.name
    fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
    let filePath = props.typeName + "/" + year + "/" + month + "/" + day + "/" + fileName;
    loading.value = true;
    try {
      const headers = {
        "Access-Control-Allow-Origin": "*"
      };
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        endpoint: configData.oss_endpoint,
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        secure: true,
        region: configData.oss_region,
        accessKeyId: configData.oss_accessKeyId,
        accessKeySecret: configData.oss_accessKeySecret,
        // 填写Bucket名称。
        bucket: configData.oss_bucketName,
        timeout: 600000
      });
      const res = await client.multipartUpload(filePath, options.file, {
        headers: headers,
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          progress.value = parseFloat(parseFloat(p * 100).toFixed(2))
          options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
        },
        // 设置并发上传的分片数量。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        mime: options.file.type
      });
      console.log(res)
      if (props.multiple) {
        let list = JSON.parse(JSON.stringify(props.fileList))
        if (editIndex !== '') {
          list.splice(editIndex, 1, {
            url:res.res.requestUrls[0],
            name: options.file.name,
            filePath: res.res.requestUrls[0],
            fileName: options.file.name
          })
          editIndex = ''
        } else {
          list.push({
            url: res.res.requestUrls[0],
            name: options.file.name,
            filePath: res.res.requestUrls[0],
            fileName: options.file.name
          })
        }
        emit('upload', list,props.zIndex)
      } else {
        emit("upload", res.res.requestUrls[0], options.file.name, props.zIndex);
      }
    } catch (error) {
      ElNotification({
        title: "温馨提示",
        message: "上传文件失败！",
        type: "error"
      });
      if (props.multiple) {
        emit('upload', props.fileList, props.zIndex);
      } else {
        uploadRef.value!.clearFiles();
        emit('upload', '', props.zIndex);
      }
      options.onError(error as any);
    } finally {
      progress.value = 0
      loading.value = false;
    }
};

  const onPreview = (index: any) => {
    window.open(props.fileList[index].filePath);
  };

  const handleEdit = (index: any) => {
    editIndex = index;
    const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
    dom && dom.dispatchEvent(new MouseEvent('click'));
  };
  const handleRemove = (index: any) => {
    editIndex = index;
    if (props.multiple) {
      emit(
        'upload',
        props.fileList.filter((f, i) => !(editIndex == i)),
        props.zIndex,
      );
    } else {
      uploadRef.value!.clearFiles();
      emit('upload', '', props.zIndex);
    }
  };

  const onExceed = () => {
    if (props.limit) {
      ElNotification({
        title: '温馨提示',
        message: `最多支持上传${props.limit}张`,
        type: 'warning',
      });
    }
  };

  /**
   * @description 文件上传之前判断
   * @param rawFile 选择的文件
   * */
  const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
    if (!imgSize) {
      ElNotification({
        title: '温馨提示',
        message: `上传文件大小不能超过 ${props.fileSize}M！`,
        type: 'warning',
      });
      return false;
    }
    if (props.fileType) {
      let fileType = props.fileType.replace(/\s/g, '');
      fileType.split('.').join('|');
      let fileIndex = rawFile.name.lastIndexOf('.');
      let substrName = rawFile.name.substr(fileIndex);
      if (fileType.indexOf(substrName) == -1) {
        ElNotification({
          title: '温馨提示',
          message: '上传文件不符合所需的格式！',
          type: 'warning',
        });
        return false;
      }
    }
    return true;
  };
</script>
<style scoped lang="scss">
  .success-file {
    .el-upload {
      .el-upload-dragger {
        border-width: 3px;
        border-color: var(--el-color-success) !important;
      }
    }
  }

  .my-upload-images {
    .el-upload-dragger {
      padding: var(--el-upload-dragger-padding-vertical);
    }

    .el-upload-list__item.is-success.el-list-leave-active.el-list-leave-to {
      display: none;
    }

    .el-icon--close-tip {
      display: none !important;
    }
  }

  .el-form-item.is-error {
    .el-upload-dragger {
      border-width: 3px;
      border-color: var(--el-color-error) !important;
    }
  }

  :deep(.el-upload-list__item) {
    transition: none !important;
  }

  .upload-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    > div {
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;

      &.items {
        width: v-bind(width);
        height: v-bind(height);
        border: 1px dashed var(--el-border-color-darker);
        border-radius: v-bind(borderRadius);
        padding: 5px;
      }

      &:hover {
        .upload-handle {
          opacity: 1;
        }
      }
    }

    .upload-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    :deep(.el-upload--picture-card) {
      --el-upload-picture-card-size: v-bind(width);
    }
    .upload-handle {
      position: absolute;
      top: 0;
      right: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background: rgb(0 0 0 / 60%);
      opacity: 0;
      transition: var(--el-transition-duration-fast);

      .handle-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 6%;
        color: aliceblue;

        .el-icon {
          margin-bottom: 40%;
          font-size: 130%;
          line-height: 130%;
        }

        span {
          font-size: 85%;
          line-height: 85%;
        }
      }
    }
  }
</style>
