<template>
  <div
    :style="{ backgroundColor: bgColor }"
    class="item"
    v-on:click="click"
    v-on:touchstart="touchstart"
    v-on:touchend="touchend">
    <slot></slot>
  </div>
</template>

<script>
  module.exports = {
    props:  {
      bgColor: { default: '#ffffff' }
    },
    methods: {
      click: function () {
        this.$emit('click')
      },
      touchstart: function() {
        // FIXME android touch
        // TODO adaptive opposite bgColor
        // this.bgColor = '#e6e6e6';
      },
      touchend: function() {
        // FIXME android touchend not triggered
        // this.bgColor = '#ffffff';
      }
    }
  }
</script>

<style scoped>
  .item {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 35px;
    padding-right: 35px;
    height: 160px;
    justify-content: center;
    /*margin-bottom: 1px; FUTURE */
    border-bottom-width: 1px;
    border-color: #dddddd;
  }
</style>