<template>
  <div class="dz-wave-container">
      <div class="dz-wave-circle">
        <svg viewBox="0 0 100 100">
          <defs>
            <linearGradient id="gradRed" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" :style="{'stop-color': circleStokeMap.red[0], 'stop-opacity': 1}" />
              <stop offset="100%" :style="{'stop-color': circleStokeMap.red[1], 'stop-opacity': 1}" />
            </linearGradient>
            <linearGradient id="gradOrange" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" :style="{'stop-color': circleStokeMap.orange[0], 'stop-opacity': 1}" />
              <stop offset="100%" :style="{'stop-color': circleStokeMap.orange[1], 'stop-opacity': 1}" />
            </linearGradient>
            <linearGradient id="gradYellow" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" :style="{'stop-color': circleStokeMap.yellow[0], 'stop-opacity': 1}" />
              <stop offset="100%" :style="{'stop-color': circleStokeMap.yellow[1], 'stop-opacity': 1}" />
            </linearGradient>
          </defs>
          <path d="
            M 50 50
            m 0 -47
            a 47 47 0 1 1 0 94
            a 47 47 0 1 1 0 -94
            " stroke="rgb(45,51,71)" stroke-width="4.8" fill="none" class="el-progress-circle__track" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path><path d="
            M 50 50
            m 0 -47
            a 47 47 0 1 1 0 94
            a 47 47 0 1 1 0 -94
            " :stroke="`url(#${color === 'red' ? 'gradRed' : (color === 'orange' ? 'gradOrange': 'gradYellow')}`" fill="none" stroke-linecap="round" stroke-width="4.8" class="el-progress-circle__path" style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"></path>
        </svg>
      </div>
      <div class="dz-wave-content">
        <div class="boll">
          <div class="text">
            {{title}}
          </div>
          <div :class="['water', waterClassName]"></div>
        </div>
      </div>
  </div>
</template>

<!-- <script lang="ts">
export default {
    name: "DzMoveWave",
};
</script> -->

<script lang="ts" setup name="DzMoveWave">
import {computed, ref} from 'vue'

const props = withDefaults(defineProps<{
  title?: string | Number
  color?: 'red' | 'orange' | 'yellow'
}>(),
{
  title:'',
  color: 'red'
})

const circleStokeMap = ref({
  red: ['#ED112E', '#F85115'],
  orange: ['#ED5411', '#F8A615'],
  yellow: ['#FFAB00', '#F5F815']
})

const colorRed = ref('red')

const waterClassName = computed(() => {
  props.color ? `${props.color}-water` : 'red-water'
}) 


</script>

<style lang='less' scoped>
  @-webkit-keyframes move_wave {
    0% { background-position:532px 0 }
    to { background-position:0 0 }
  }

  @keyframes move_wave {
    0% { background-position:532px 0 }
    to { background-position:0 0 }
  }
  .dz-wave-container {
    width: 76px;
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #171C2D;
    border-radius: 38px;
    transform: rotateY(180deg);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    .dz-wave-circle {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 70px !important;
      height: 70px !important;
    }
  }
  .dz-wave-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .boll {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    float: left;
    position: relative;
    font-size: 14px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    text-align: center;
    color: #fff;
    transform: rotateY(-180deg);
  }

  .num {
    font-size: 30px;
  }

  .water {
    height: 50%;
    position: absolute;
    top: 60%;
    width: 100%;
    -webkit-animation: move_wave 15s linear infinite;
    animation: move_wave 15s linear infinite;
  }

  .red-water {
    background: url(./imgs/red.png) repeat-x;
    background-size: 130% 80%;
  }
  .orange-water {
    background: url(./imgs/orange.png) repeat-x;
    background-size: 130% 80%;
  }
  .yellow-water {
    background: url(./imgs/yellow.png) repeat-x;
    background-size: 130% 80%;
  }
</style>
