<template>
  <div class="publicImgFileUpload">
    <el-upload
      v-model:file-list="fileList"
      action="#"
      :auto-upload="false"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :limit="limit"
      :show-file-list="false"
      :list-type="listType"
      :accept="accept.join()"
      :class="{ hide: fileList.length >= limit }"
    >
      <el-button type="primary" icon="Plus" v-if="listType == 'text'">点击上传文件</el-button>
    </el-upload>
  </div>
</template>
<script setup name="ImageFileUpload">
import { videoupload } from '@/api/voice/recordpage.js';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const props = defineProps({
  // 数组值
  saveFileArr: {
    type: Array,
    default: () => [],
  },
  // 文件列表的类型 'text' | 'picture' | 'picture-card'
  listType: {
    type: String,
    default: 'picture',
  },
  // 数量限制
  limit: {
    type: Number,
    default: 3,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 5,
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ['jpg', 'png', 'jpeg', 'svg', 'gif'],
  },
  uploadbusinessSourceCode: {
    type: String,
    default: 'text',
  },
});
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const fileList = ref([]);
const uploadList = ref([]);

const handleChange = file => {
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize;
    if (!isLt) {
      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
      fileList.value.pop(); //删除失败的
      return false;
    }
  }
  if (file.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    fileList.value.pop(); //删除失败的
    return false;
  }
  proxy.$modal.loading('正在上传音频，请稍候...');
  let formData = new FormData();
  formData.append('file', file.raw);
  formData.append('businessSourceCode', props.uploadbusinessSourceCode);
  formData.append('createBy', userStore.userInfo.userName);
  videoupload(formData).then(res => {
    console.log(res);
    if (res.code == 200) {
      let datas = res.data;
      // datas.refField = props.refField; //关联字段
      datas.voiceId = res.data.voiceId; //关联类型
      datas.voiceFilePath = pathToUrl(res.data.voiceFilePath); //关联类型
      uploadList.value.push(datas);
      props.saveFileArr.push(datas);
      // 文件状态改为上传成功
      fileList.value.map(item => (item.status = 'success'));
    } else {
      fileList.value.pop(); //删除失败的
      proxy.$modal.msgError('上传失败');
    }
    proxy.$modal.closeLoading();
  });
};
// 图片删除
const handleRemove = file => {
  // console.log('图片删除--', file);
  let fileIndex = null;
  uploadList.value.map((item, index) => {
    meituan;
    if (file.name == item.originalName || file.originalName == item.originalName) {
      fileIndex = index;
    }
  });
  uploadList.value.splice(fileIndex, 1);
  props.saveFileArr.splice(fileIndex, 1);
};

function pathToUrl(path) {
  if (path) {
    const parts = path.split('\\');
    const fileName = parts[parts.length - 1];
    if (process.env.NODE_ENV === 'development') {
      // 在开发环境中，您可能需要使用不同的逻辑来处理 URL
      return `http://192.168.20.43:9100/voice/file/${encodeURIComponent(parts[1])}/${fileName}`;
    } else {
      // 在生产环境中，使用实际的服务器地址和端口
      return `${window.location.origin}/voice-file${path}`;
    }
  } else {
    return '';
  }
}

// 上传的文件类型
const accept = computed(() => {
  if (props.fileType.length) {
    let data = [];
    data = props.fileType.map(val => {
      return `.${val}`;
    });
    return data;
  } else {
    return [];
  }
});
function editPic() {
  // console.log('修改时图片回显--', props.saveFileArr);
  // 修改时图片回显
  fileList.value = [];
  uploadList.value = [];
  props.saveFileArr.map(item => {
    let params = {
      id: item.id,
      name: item.name,
      originalName: item.originalName,
      status: 'success',
      url: item.url,
    };
    fileList.value.push(params);
    uploadList.value.push(params);
  });
}
watch(
  () => props.saveFileArr,
  () => {
    setTimeout(() => {
      editPic();
    });
  },
  { immediate: true }
);
onMounted(() => {});
onBeforeMount(() => {
  fileList.value = [];
  uploadList.value = [];
});
</script>
<style lang="scss">
.publicImgFileUpload {
  width: 100%;
  .hide .el-upload {
    display: none;
  }
  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 10px;
  }
  .el-upload-list--picture {
    display: flex;
    flex-wrap: wrap;
    .el-upload-list__item {
      width: 48%;
      margin-right: 5px;
      .el-upload-list__item-file-name {
        width: 65%;
      }
    }
  }
  .el-upload-list--text {
    .el-upload-list__item {
      border-top: 1px dashed #c6c6c6;
      padding: 10px;
      margin-top: 10px;
    }
  }
}
</style>