<template>
  <section :class="c()" :style="style">
    <slot/>
  </section>
</template>

<script>
import { base } from '../../common/mixins'

export default {
  name: 'SwipeItem',
  mixins: [ base ],

  data () {
    return {
      offset: 0,
    }
  },
  computed: {
    style () {
      const { vertical, width, height } = this.$parent

      return {
        width: width + 'px',
        height: vertical ? height + 'px' : '100%',
        transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`,
      }
    },
  },
  mounted () {
    this.$parent && this.$parent.swipes.push(this)
  },
  destroyed () {
    this.$parent && this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1)
  },
}
</script>