<template>
  <div class="uif-shake-warning" v-if="value">
    <u-icon type="circle-x-filled" scene="none"></u-icon>
    <div class="uif-shake-warning-text">{{value}}</div>
  </div>
</template>

<script>
import UIcon from '@uif/core/lib/components/icon'

export default {
  name: 'u-shake-warning',
  components: {UIcon},
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      value: ''
    }
  },
  watch: {
    message (value) {
      this.setValue(value)
    }
  },
  methods: {
    setValue (value) {
      if (this.value) {
        this.value = ''
        this.$nextTick(() => {
          this.value = value
        })
      } else {
        this.value = value
      }
    }
  }
}
</script>
