<template>
  <div>
    <panel title="Transform" type="primary">
      <button value="Rotate" @click.native="rotate" type="primary" size="middle"></button>
      <button value="Scale" @click.native="scale" type="primary" size="middle" style="margin-top:12px;"></button>
      <button value="Translate" @click.native="translate" type="primary" size="middle"
                 style="margin-top:12px;"></button>
      <button value="Transform" @click.native="transform" type="success" size="middle"
                 style="margin-top:12px;"></button>
    </panel>

    <panel title="Others" type="primary">
      <button value="BgColor" @click.native="color" type="primary" size="middle"></button>
      <button value="Opacity" @click.native="opacity" type="primary" size="middle"
                 style="margin-top:12px;"></button>
      <button value="All" @click.native="composite" type="success" size="middle" style="margin-top:12px;"></button>
    </panel>

    <div ref="block" class="block" :style="{ transformOrigin: transformOrigin }">
      <text class="block-txt">Anim</text>
    </div>
  </div>
</template>

<script>
  var animation = weex.requireModule('animation')
  module.exports = {
    data: function () {
      return {
        transformOrigin: 'center center',
        current_rotate: 0,
        current_scale: 1,
        current_color: '#FF0000',
        current_opacity: 1,
        current_translate: '',
        current_transform: '',
        isStop: true
      }
    },
    components: {
      panel: require('./include/panel.vue'),
      button: require('./include/button.vue')
    },
    methods: {
      anim: function(styles, timingFunction, duration, callback) {
        animation.transition(this.$refs.block, {
          styles: styles,
          timingFunction: timingFunction,
          duration: duration
        }, callback);
      },
      rotate: function() {
        var self = this;
        self.current_rotate += 90;
        self.anim({
          transform: 'rotate(' + self.current_rotate + 'deg)'
        }, 'ease-in-out', 500, function() {
          if (self.current_rotate === 360) {
            self.current_rotate = 0;
          }
          else {
            self.rotate();
          }
        });
      },
      translate: function() {
        this.current_translate = this.current_translate ? '' : 'translate(50%, 50%)';
        this.anim({
          transform: this.current_translate
        }, 'ease-in', 500, function() {
        });
      },
      scale: function() {
        var self = this;
        self.current_scale = self.current_scale === 2 ? .5 : 2
        self.anim({
          transform: 'scale(' + self.current_scale + ')'
        }, 'linear', 500, function() {
        });
      },
      transform: function() {
        var self = this;
        this.current_transform = this.current_transform ? '' : 'rotate(45deg) scale(1.5)';
        this.anim({
          transform: this.current_transform,
          transformOrigin: 'left top'
        }, 'ease-out', 500, function() {
          if (self.current_transform !== '') {
            self.anim({
              transform: 'rotate(-90deg) scale(1.2)',
              transformOrigin: 'left top'
            }, 'ease-out', 500, function() {
            })
          }
          else {

          }
        });
      },
      composite: function() {
        var self = this;
        self.current_transform = self.current_transform ? '' : 'rotate(45deg) scale(1.5) translate(50%, 50%)';
        self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
        self.current_opacity = self.current_opacity === 1 ? 0.1 : 1;
        this.anim({
          transform: this.current_transform,
          transformOrigin: 'left top',
          backgroundColor: self.current_color,
          opacity: self.current_opacity
        }, 'ease-out', 1000, function() {
        });
      },
      color: function() {
        var self = this;
        self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
        self.anim({
          backgroundColor: self.current_color
        }, 'linear', 500, function() {
        });
      },
      opacity: function() {
        var self = this;
        self.current_opacity = self.current_opacity === 1 ? 0.1 : 1;
        self.anim({
          opacity: self.current_opacity
        }, 'linear', 500, function() {
        });
      }
    }
  };
</script>

<style scoped>
  .block {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 300px;
    left: 400px;
    background-color: #F0AD4E;
    align-items: center;
    justify-content: center;
  }

  .block-txt {
    color: #FFFFFF;
    font-size: 70px;
  }
</style>