<template>
  <div :class="{'active': state == 1}" class="show-picture show-picture-backdrop">
    <view-box>
      <div
        :class="{'show-picture-up': state == 1}"
        class="content scroll-content ionic-scroll show-picture-wrapper">
        <div ref="pad" class="pad">
          <img
            v-hls-img-zoom
            v-tap="hide"
            v-longtap="sharePicture"
            :src="imgUrl"
            :alt="imgTitle">
        </div>
      </div>
    </view-box>
  </div>
</template>
<style lang="less" scoped>
  .show-picture-backdrop {
    -webkit-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: transparent;
    .weui-tab {
      width: 100%;
    }
    &.active {
      background-color: rgba(0, 0, 0, 0.6);
    }
    .show-picture-wrapper {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
      transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
      position: absolute;
      width: 100%;
      //max-width: 500px;
      height: 100%;
      margin: auto;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      .pad {
        //width: 100%;
        //height: 100%;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        img {
          width: 100%;
          height: 100%;
          display: -webkit-flex;
          display: flex;
          justify-content: center;
          align-items: center;
          -webkit-justify-content: center;
          -webkit-align-items: center;
        }
      }

    }
    .show-picture-up {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .modal-open [vum-show-picture] {
    pointer-events: auto;
  }
</style>
<script>

import assign from 'object-assign'

export default {
  data () {
    return {
      defaultOptions: {
        imgUrl: '',
        imgTitle: '',
        index: '1',
        width: '100',
      },
      imgUrl: '',
      imgTitle: '',
      index: '1',
      state: 0,
      width: '100',
    }
  },

  mounted () {
    this.$el.setAttribute('vum-show-picture', '')
  },

  destroyed () {
    document.body.removeChild(this.$el)
  },

  methods: {
    show (options) {
      let vm = this
      let _options = assign({}, this.defaultOptions, options)
      this.imgUrl = _options.imgUrl
      this.imgTitle = _options.imgTitle
      this.width = _options.width
      this.state = 1
      if (!this.width) {
        this.width = 100
      }
      vm.$refs.pad.style.width = this.width + '%'
    },

    hide () {
      this.state = 0
      let wrapper = document.querySelector('[vum-show-picture]')
      wrapper.addEventListener('webkitTransitionEnd', () => {
        this.$destroy()
      }, false)
    },

    getState () {
      return this.state
    },
    sharePicture () {
      // var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
      window.plugins.socialsharing.share(null, null, this.imgUrl, null)
    },
  },
}
</script>
