<template>
  <template v-if="mode === 'DESIGN'">
    <el-button size="small" icon="Link" round>选择文件</el-button>
    <ellipsis :row="1" :content="placeholder + sizeTip" hoverTip slot="tip"/>
  </template>
  <template v-else>
    <template v-if="perm === 'E'">
      <el-upload :file-list="_value" action="#" :limit="maxSize" with-credentials :multiple="maxSize > 0"
                 :data="uploadParams"
                 :auto-upload="false" :before-upload="beforeUpload">
        <el-button size="small" icon="Link" round>选择文件</el-button>
        <ellipsis :row="1" :content="placeholder + sizeTip" hoverTip slot="tip"/>
      </el-upload>
    </template>
    <template v-else-if="perm === 'R'">
      {{ _value }}
    </template>
  </template>
</template>

<script setup>
import {defineProps,computed,ref} from "vue";
import {ElMessage} from "element-plus";
import Ellipsis from '../../process/common/Ellipsis.vue'
const disabled = ref(false)
const uploadParams = ref({})
const props = defineProps({
  mode:{
    type: String,
    default: 'DESIGN'
  },
  required:{
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择附件'
  },
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  perm: {
    type: String,
    default: 'E'
  },
  maxSize: {
    type: Number,
    default: 5
  },
  maxNumber: {
    type: Number,
    default: 10
  },
  fileTypes: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const emit = defineEmits(["input"])
const sizeTip = computed(() => {
  if (props.fileTypes.length > 0) {
    return ` | 只允许上传[${String(props.fileTypes).replaceAll(",", "、")}]格式的文件，且单个附件不超过${props.maxSize}MB`
  }
  return props.maxSize > 0 ? ` | 单个附件不超过${props.maxSize}MB` : ''

})
const _value = computed( {
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
})

const beforeUpload = (file) => {
  const alows = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
  if (alows.indexOf(file.type) === -1) {
    ElMessage.warning("存在不支持的图片格式")
  } else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
    ElMessage.warning(`单张图片最大不超过 ${this.maxSize}MB`)
  } else {
    return true
  }
  return false
}
const handleRemove = (file, fileList) => {
  console.log(file, fileList);
}
const handlePictureCardPreview = (file) => {
  console.log(file)
}
const handleDownload = (file) => {
  console.log(file)
}

</script>

