<template>
  <div class="dv-decoration-2" :style="{ position: 'absolute', top: '20px', width: width + 'px', height: '20px' }">
    <svg :width="width + 'px'" :height="height + 'px'">
      <rect x="0" y="15" :width="width" height="1" :fill="warnTheme === 'dark' ? '#00CED1' : 'aaa'">
        <animate
          attributeName="width"
          from="0"
          :to="width"
          dur="7s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".42,0,.58,1"
          repeatCount="indefinite"
        ></animate>
      </rect>
      <rect x="0" y="15" width="1" height="1" :fill="warnTheme === 'dark' ? '#FAD400' : '#aaa'">
        <animate
          attributeName="x"
          from="0"
          :to="width"
          dur="7s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines="0.42,0,0.58,1"
          repeatCount="indefinite"
        ></animate>
      </rect>
    </svg>
  </div>
</template>

<script> 
import { mapState } from 'vuex'

export default {
  name: 'DvDecoration2',
  props: {
    corColor: {
      type: String,
      default: '#1E90FF'
    }
  },
  data: function () {
    return {
      width: 0,
      height: 0
    }
  },
  watch: {
  },
  methods: {
    setA (rect) {
      this.width = rect.w
      this.height = rect.h
    }
  },
  mounted: function () {
  },
  computed: {
    ...mapState({
      warnTheme: state => state.app.warnTheme
    })
  }
}
</script>

<style lang="less" scoped>
.dv-decoration-2 {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
</style>
