<template>
  <section :class="[c(),cusClass]" :style="style">
    <slot/>
  </section>
</template>

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

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

    data() {
      return {
        offset: 0,
      }
    },
    props: {
      cusClass: {
        type: String,
        default: ''
      }
    },
    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() {
      console.log('mounted');
      this.$parent && this.$parent.swipes.push(this);
      const rect =  this.$el.getBoundingClientRect()
      debugger;
      this.$parent && this.$parent.itemsHeight.push(this.$el.offsetHeight);
    },
    activated(){
      console.log('updated');
    },
    destroyed() {
      this.$parent && this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1)
    },
  }
</script>