<template>
  <div class="demo-upload-basic">
    <ui-alert
      v-if="alertMsg"
      :title="alertMsg"
      class="demo-upload-alert"
      type="warning"
      show-icon>
    </ui-alert>
    <ui-upload
      :url="url"
      :multiple="true"
      :limit="3"
      :list-type="'pictureCard'"
      :on-exceed="onExceed"
      :on-change="onChange">
      <template #thumbnail="{ file, index, deleteHandle }">
        <img
          :src="getPreviewUrl(file.file)"
          class="mm-upload-picture-card-thumbnail"
          @load="revokeUrl" />
        <div
          v-if="file.status === 'uploading'"
          class="mm-upload-picture-card--uploading">
          <ui-progress
            v-if="file.status === 'uploading'"
            type="circle"
            :width="78"
            :percentage="file.progress"
            :format="formatProgress"></ui-progress>
        </div>
        <div
          v-else
          class="mm-upload-picture-card--not-uploading">
          <ui-icon
            name="delete"
            size="24px"
            class="mm-upload-picture-card-delete-icon"
            @click.native.stop="deleteHandle(index)"></ui-icon>
        </div>
      </template>
    </ui-upload>
  </div>
</template>

<script>
import { Upload, Alert, Icon } from "amumu-ui"
import picture from "../mixins/picture"

export default {
  components: {
    "ui-upload": Upload,
    "ui-alert": Alert,
    "ui-icon": Icon,
  },
  mixins: [picture],
  data() {
    return {
      url: "https://jsonplaceholder.typicode.com/posts/",
      alertMsg: "",
    }
  },
  methods: {
    onExceed(current, limit) {
      this.alertMsg = `最多只能上传${limit}个文件，当前已选中${current}个文件，请重新选择`
    },
    onChange() {
      this.alertMsg = ""
    },
  },
}
</script>

<style lang="scss">
.demo-upload-basic {
  position: relative;
}

.demo-upload-alert {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
}
</style>
