<script>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
export default {
  props: [
    "accept",
    "value",
    "modelValue",
    "maxSize",
    "multiple",
    "listtype",
    "limit",
    "title",
    "uploadtip",
  ],
  setup(props, context) {
    const state = reactive({
      uploadtip: props.uploadtip ?? {
        text: "",
        color: "",
      },
      title: props.title ?? "上传图片",
      limit: props.limit ?? 1,
      multiple: props.multiple ?? false,
      urls: props.modelValue || [],
      accept: props.accept || "",
      listtype: props.listtype ?? "text",
    });
    const handlePreview = (info) => {
      window.open(info.url);
    };
    const handleBefore = (file) => {
      if (props.maxSize) {
        const maxSize = props.maxSize * 1024 * 1024;
        if (file.size > maxSize) {
          ElMessage({
            message: `文件大小超过了${state.maxSize / (1024 * 1024)}MB的限制`,
            type: "warning",
          });
          return false;
        }
        return;
      }
    };
    const httpRequest = (data) => {
      let rd = new FileReader();
      let file = data.file;
    };
    onMounted(() => {});
    watch(
      state.urls,
      (newVal, oldVal) => {
        context.emit("update:modelValue", newVal);
      },
      {
        deep: true,
      }
    );
    const handleExceed = (files, fileList) => {
      ElMessage.warning("最多只能上传" + state.limit + "个文件");
    };
    return {
      handleExceed,
      httpRequest,
      state,
      handlePreview,
      handleBefore,
    };
  },
  methods: {},
};
</script>
  
  <template>
  <el-upload
    class="upload-demo"
    :action="``"
    :multiple="state.multiple"
    :limit="state.limit"
    :http-request="httpRequest"
    :accept="state.accept"
    :on-exceed="handleExceed"
    :list-type="state.listtype"
    v-model:file-list="state.urls"
    :before-upload="handleBefore"
    :on-preview="handlePreview"
  >
    <el-button size="small" type="primary">{{ state.title }}</el-button>
    <template v-if="state.uploadtip" #tip>
      <div
        class="el-upload__tip text-red"
        :style="{ color: state.uploadtip.color }"
      >
        {{ state.uploadtip.text }}
      </div>
    </template>
  </el-upload>
  <!-- {
			tag: 'formdataUpload',
			label: '版头文件:',
			key: 'titleDocAttachId',
			value: [],
			default: [],
			width: '80%',
      type:"formdata",
			rules: [
				{ required: true, message: '请上传版头文件', trigger: 'change' },
			],
			attribute: {//属性
				uploadtip: {
					text: '上传文件',
					color: '#000',
				},
				multiple: true,
				listtype: "picture-card",
				limit: 10,
				maxSize: 10,
			},
		}, -->
</template>
  
  <style scoped>
.upload-demo {
  text-align: left;
}
/* :deep(.el-upload-list__item-name){color:white} */
/* :deep(.el-upload-list__item-name .el-icon){color:white} */
</style>
  