<template>
  <van-overlay :show="state.uploading" class-name="progress-overlay">
    <div class="progress-block">
      <div class="progress-title"><van-loading type="spinner" size="20px" />文件上传中，请稍候...</div>
      <van-progress :percentage="state.percent"></van-progress>
    </div>
  </van-overlay>
  <slot></slot>
</template>

<script>
import { defineComponent, reactive, provide } from 'vue'
import { Overlay, Progress, Loading } from 'vant'
export default defineComponent({
  name: "upload-progress",
  components: {
    [Overlay.name]: Overlay,
    [Progress.name]: Progress,
    [Loading.name]: Loading
  },
  setup() {
    const state = reactive({
      percent: 0,
      uploading: false
    })

    const startProgress = () => {
      state.percent = 0;
      state.uploading = true;
    }
    const updateProgress = (value) => {
      state.percent = value;
    }

    const endProgress = () => {
      state.uploading = false;
    }

    provide('startProgress', startProgress)
    provide('updateProgress', updateProgress)
    provide('endProgress', endProgress)

    return { state }
  }
});
</script>

<style scoped lang="less">
.progress-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;

  .progress-block {
    width: 90%;
    padding: 5%;
    height: 2rem;
    background: #FFFFFF;
    text-align: center;

    .progress-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      .van-loading {
        margin-right: 0.1rem;
      }
    }
  }
}
</style>
