<template>
  <div class="dk-music">
    <div v-if="iconType==='image'">
      <img :src="imgUrl" width="100%" :style="_style" :class="rotation" class="dk-music-img" alt="">
    </div>
    <van-icon v-else name="music-o" class="dk-music-icon" :class="rotation" :style="_style" />
  </div>
</template>

<script>

export default {
  name: 'DkMusic',
  props: {
    musicPath: { default: '', type: String },
    // common
    iconType: { default: '', type: String }, // 图标样式
    iconSize: { default: 40, type: Number }, // 图标尺寸
    rotation: { default: 'changeRight', type: String }, // 旋转方向
    speed: { default: 5, type: Number }, // 旋转速度
    // image
    imgUrl: { default: '', type: String }// 图片地址
  },
  data() {
    return {}
  },
  computed: {
    _style() {
      var speed = (11 - this.speed) + 's'
      return {
        width: this.iconSize + 'px',
        height: this.iconSize + 'px',
        fontSize: this.iconSize + 'px',
        animationDuration: speed,
        animationIterationCount: 'infinite',
        animationTimingFunction: 'linear'
      }
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-music {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .dk-music-icon {
    background: #fff;
    border-radius: 100%;
    border: 2px solid #fff;
    font-weight: 800;
    box-sizing: content-box;
    color: #f56c6c;
  }
  .dk-music-img{
    border-radius: 100%;
  }
  .changeRight{
    animation-name: changeRight;
  }
  .changeLeft{
    animation-name: changeLeft;
  }
}

@keyframes changeRight {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes changeLeft {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
</style>
