<template>
  <div v-if="showLoadingValue" class="loading-model" data-weiling-mobile-ui-wl-loading>
    <template v-if="needPercent">
      <div class="percent">
        <Circle v-model:current-rate="currentRateValue" size="80px" :rate="percentValue" :text="text" color="var(--wl-primary-color)"
          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="loadingPhoto" />
        <!-- 这里content为双花括号 -->
        <span class="text" v-if="content">{{ content }}</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-10-26 17:45:23
 */
export default {
  name: "WlLoading",
}
</script>

<script setup lang="ts">
import { Circle } from 'vant';
import { computed, ref, watchEffect } from "vue";
import { loadingPic } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

type Props = {
  needPercent?: boolean;
  showLoading?: boolean;
  currentRate?: number;
  content?: string;
  percent?: number;
  backgroundColor?: string;
  loadingModelBackgroundColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  needPercent: false,
  showLoading: true,
  currentRate: 0,
  content: "正在加载中...",
  percent: 1,
  backgroundColor: "white",
  loadingModelBackgroundColor: "rgba(0, 0, 0, 0.45)"
});

const showLoadingValue = ref(false);
const currentRateValue = ref(0);
const percentValue = ref(0);

const loadingPhoto = loadingPic;

const onCancelUpload = () => {
  showLoadingValue.value = false;
};

const text = computed(() => {
  return props.currentRate.toFixed(0) + "%";
});

watchEffect(() => {
  showLoadingValue.value = props.showLoading;
})

watchEffect(() => {
  currentRateValue.value = props.currentRate;
})

watchEffect(() => {
  percentValue.value = props.percent;
})
</script>

<style lang="scss">
.loading-model[data-weiling-mobile-ui-wl-loading] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: v-bind(loadingModelBackgroundColor);
  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;

    :deep(.van-circle__text) {
      font-size: j(14);
      color: var(--wl-primary-color);
      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: var(--wl-text-color-secondary-2);
      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: v-bind(backgroundColor);
    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>
