<template>
  <div v-if="showLoading" class="loading-model">
    <template v-if="needPercent">
      <div class="percent">
        <van-circle
          size="80px"
          v-model="currentRate"
          :rate="percent"
          :text="text"
          color="#1C9FFF"
          layer-color="#eee"
          :stroke-width="60"
        />
        <div class="cancel-upload" @click="onCancelUpload">取消上传</div>
      </div>
    </template>
    <template v-else>
      <div class="box">
        <WlPic class="icon" :src="loading_icon" />
        <!-- 这里content为双花括号 -->
        <span class="text">{{ content }}</span>
      </div>
    </template>
  </div>
</template>

<script>
import { loading_icon } from "@packages/utils/cdn";
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "WlLoading",
  components: { WlPic },
  data() {
    return {
      needPercent: false,
      showLoading: true,
      currentRate: 0,
      content: "",
      percent: 0,
      loading_icon,
    };
  },
  methods: {
    // 取消上传也必须关闭loading
    onCancelUpload() {
      this.showLoading = false;
      this.onCancel();
    },
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + "%";
    },
  },
};
</script>

<style lang="scss" scoped>
.loading-model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99999;
  @extend %flex-middle-center;
  .percent {
    width: j(150);
    padding: j(15) 0;
    flex-direction: column;
    border-radius: j(13);
    background: #fff;
    box-shadow: j(0) j(0) j(20) rgba(0, 0, 0, 0.1);
    @extend %flex-middle-center;
    ::v-deep .van-circle__text {
      font-size: j(14);
      color: #1c9fff;
      font-weight: 500;
    }
    .percent-loop {
      position: relative;
      width: j(80);
      height: j(80);
      border-radius: 50%;
      border: 6px solid rgba(207, 207, 207, 0.5);
      overflow: hidden;
      .circle-left,
      .circle-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
        & > div {
          width: 100%;
          height: 100%;
          transform-origin: right center;
        }
      }
      .circle-right {
        left: 50%;
        & > div {
          transform-origin: left center;
        }
      }
      .number {
        position: absolute;
        top: 9%;
        bottom: 9%;
        left: 9%;
        right: 9%;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
      }
    }
    .cancel-upload {
      margin-top: j(12);
      width: j(100);
      height: j(40);
      color: #979797;
      font-size: j(14);
      border-radius: j(999);
      text-align: center;
      background-color: #f4f4f4;
      @extend %flex-middle-center;
    }
  }
  .box {
    @extend %flex-middle-center;
    flex-direction: column;
    width: j(100);
    height: j(100);
    border-radius: j(10);
    background: #fff;
    box-shadow: j(0) j(0) j(20) rgba(0, 0, 0, 0.1);
    .icon {
      width: j(30);
      height: j(30);
      animation: rotating 1s linear infinite;
    }
    .text {
      @extend %flex-middle-center;
      font-size: j(14);
      padding-top: j(12);
      color: #666;
    }
  }
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
</style>
