<template>
  <div class="imagebox" :style="styleColor"><img :class="transStyle.startRotate?'startImg':''" :style="imgStyle" :src="imgStyle.imageAdress" alt=""></div>
</template>
<script>
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095500.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095502.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095503.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095504.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095506.jpg
export default {
  name: 'WidgetImage',
  components: {},
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
    }
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options)
    },
    styleColor() {
      return {
        position: this.ispreview ? 'absolute' : 'static',
        background: this.transStyle.background,
        'text-align': this.transStyle.textAlign,
        width: this.transStyle.width + 'px',
        height: this.transStyle.height + 'px',
        left: this.transStyle.left + 'px',
        top: this.transStyle.top + 'px',
        right: this.transStyle.right + 'px',

      }
    },
    imgStyle() {
      return {
        imageAdress: this.transStyle.imageAdress,
        'border-radius': this.transStyle.borderRadius + 'px',
        opacity: this.transStyle.transparency / 100,
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value
  },
  methods: {},
}
</script>

<style scoped lang="scss">
.imagebox {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.imagebox img {
  width: 100%;
  height: 100%;
}
.startImg {
  animation:turn 1s linear infinite;  
}
 @keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
</style>
