<template>
  <div>
    <div v-if="supportAndroid"
         ref="dof-pan-item"
         @horizontalpan="dispatchPan"
         @appear="onItemAppear"
         @disappear="onItemDisAppear"
         @click="itemClicked">
      <slot></slot>
    </div>
    <div v-else
         ref="dof-pan-item"
         @click="itemClicked">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import Binding from 'weex-bindingx/lib/index.weex.js';
  import Utils from '../utils';
  import BindEnv from '../utils/bind-env';

  export default {
    props: {
      url: {
        type: String,
        default: ''
      },
      needSlider: {
        type: Boolean,
        default: true
      }
    },
    data: () => ({
      isPanning: false,
      appearMap: [],
      supportAndroid: BindEnv.supportsEBForAndroid()
    }),
    mounted () {
      setTimeout(() => {
        if (this.supportAndroid && this.needSlider) {
          const element = this.$refs['dof-pan-item'];
          Binding.prepare && Binding.prepare({
            anchor: element.ref,
            eventType: 'pan'
          });
        }
      }, 300);
    },
    methods: {
      itemClicked () {
        if (this.isPanning) {
          return;
        }
        this.url && Utils.goToH5Page(this.url, true);
        this.$emit('dofPanItemClicked', { extId: this.extId });
      },

      dispatchPan (e) {
        if (this.supportAndroid && this.needSlider) {
          if (e.state === 'start') {
            this.isPanning = true;
            const element = this.$refs['dof-pan-item'];
            element && this.$emit('dofPanItemPan', { element, extId: this.extId });
          } else if (e.state === 'end') {
            setTimeout(() => {
              this.isPanning = false;
            }, 50);
          }
        }
      }
    }
  };
</script>
