<template>
  <div style="width: 100%;">
    <div v-if="type === 'drag'">
       <div v-if="disabled">
      <div v-for="(item, index) in fileList" :key="index" class="file-item" @click="$emit('preview', item)">
        <img :src="getSrc(item)">
        <span>{{ item?.name || '--' }}</span>
      </div>
    </div>
    <el-upload v-else :style="disabled ? { pointerEvents: 'none' } : {}" :on-preview="(e: any) => $emit('preview', e)"
      :file-list="fileList" :on-remove="(a: any) => handFileRemove(a)" :before-upload="beforeUpload" class="upload-demo"
      drag :http-request="(event: any) => handUpload(event)" multiple>
      <svg t="1711095694315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5394" width="42" height="42">
        <path
          d="M821.76 479.488c0 0-6.272-206.4-174.4-247.424S398.208 368.192 396.544 373.248C394.88 378.304 386.624 376 386.624 376c-13.44-12.736-72.704-41.984-134.976-4.48-62.208 37.504-39.68 108.736-39.68 108.736S119.744 472.768 72.448 615.168c-47.232 142.528 118.464 182.912 118.464 182.912l278.144 0 0-151.616-55.68 0L408.512 646.464 404.736 646.464l0-0.256c-3.2 0-5.76-2.56-5.76-5.824 0-1.92 1.024-3.584 2.56-4.672l113.984-119.872c1.6-1.792 3.84-3.008 6.464-3.008 2.688 0 5.056 1.344 6.656 3.328l113.152 118.912c0.192 0.128 0.384 0.32 0.576 0.512l1.088 1.152-0.384 0c0.576 1.024 0.96 1.92 0.96 3.136 0 3.584-2.88 6.528-6.528 6.528-0.128 0-0.128-0.128-0.256-0.128l0 0.256L575.936 646.528l0 151.616 252.48 0c0 0 120.384-30.144 131.008-154.432C970.176 519.424 821.76 479.488 821.76 479.488z"
          fill="#8F9EB2" p-id="5395"></path>
      </svg>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    </div>

    <!-- 按钮 -->
    <div v-if="type === 'btn'" class="file-btn">
    <el-upload :before-upload="beforeUpload" class="upload-demo":http-request="(event: any) => handUpload(event)" multiple>
      <el-button plain type="primary">文件上传</el-button>
    </el-upload>
    </div>

    <!-- 进度条展示 -->
    <div v-for="(item, fileName) in uploadFiles" :key="fileName" class="progress-item">
      <div class="progress-info">
        <span class="file-name">{{ item.file.name }}</span>
        <span class="progress-text">{{ item.progress }}%</span>
      </div>
      <el-progress :percentage="item.progress" :status="item.progress === 100 ? 'success' : ''" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import CryptoJS from 'crypto-js';
import PDF from '@/assets/icons/svg/pdf.svg'
import WORD from '@/assets/icons/svg/word.svg'
import JPG from '@/assets/icons/svg/jpg.svg'
import PNG from '@/assets/icons/svg/png.svg'
import ELXS from '@/assets/icons/svg/elxs.svg'
import OTHER from '@/assets/icons/svg/other.svg'

const FILE_MAP = {
  'pdf': PDF,
  'doc': WORD,
  'docx': WORD,
  'jpg': JPG,
  'png': PNG,
  'elxs': ELXS,
  'xlxs': ELXS,
  'other': OTHER
}

const props = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: () => false,
	},
  uploadFiles: {
	type: Array<{ file: File; progress: number }>,
	default: () => [],
  },
  type: {
    type: String,
    default: () => 'drag',
  }
})

const emit = defineEmits(['onRemove', "onUpload", "preview"]);

const state = reactive({
  uploadFileArr: [] as any[],
})

const getSrc = (file: any) => {
  const fileType = file.name.split('.').pop();
  return FILE_MAP[fileType] ? FILE_MAP[fileType] : FILE_MAP['other'];
}

// 上传前的钩子
const beforeUpload = (file: File) => {
  // props.uploadFiles = [
  //   {
  //   name: file.name,
  //   progress: 0
  // }
  // ]
  return true
}

const handUpload = (event: any) => {
	// 计算hash值
	var reader = new FileReader();
	reader.onload = (e: any) => {
		var fileData = e.target.result;
		var wordArray = CryptoJS.lib.WordArray.create(fileData);
		var hash = CryptoJS.SHA1(wordArray).toString();
		emit('onUpload', { file: event.file, hash: hash },);
	};
	reader.readAsArrayBuffer(event.file);
	state.uploadFileArr.push(event.file);
};

const handFileRemove = (a: any) => {
  if (props.disabled) return;
  // 删除的文件
  emit('onRemove', a);
};

onMounted(() => {
})

</script>

<style scoped>
.file-btn{
:deep(.el-upload-list) {
  display: none;
}
}

.file-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.file-item img {
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

.progress-item {
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.file-name {
  color: #606266;
  flex: 1;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-text {
  color: #909399;
  min-width: 45px;
  text-align: right;
}
</style>
