<template>
  <div :class="{'active': state == 1}" class="show-picture show-picture-backdrop">
    <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"
          v-lazy="imgUrl"
          v-if="!imgList.length"
          :alt="imgTitle">
        <swipe
          v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false">
          <swipe-item
            v-for="(item,index) in imgList" :key="index">
            <img
              v-hls-img-zoom
              v-tap="hide"
              v-longtap="sharePicture"
              v-lazy="item.imgUrl || item.content"
              :alt="imgTitle">
          </swipe-item>
        </swipe>
      </div>
      <div v-if="imgList.length" class="indicators">{{ startPosition + 1 }}/{{ imgList.length }}</div>
    </div>
  </div>
</template>
<style lang="less">
  .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%;
      background-color: rgba(0, 0, 0, .5);
      //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: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          object-fit: cover;
         // width: fit-content;
        }
      }

    }

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

    .hls-swipe {
      .hls-swipe-track {
        display: flex !important;
        align-items: center !important;

        .hls-swipe-item {
          display: flex;
          justify-content: center;
        }
      }
    }
    .indicators{
      top:20px;
      position: absolute;
      color: #fff;
      font-size: 16px;
    }
  }

  .modal-open [vum-show-picture] {
    pointer-events: auto;
  }
  .platform-ios{
    .show-picture-backdrop {
      .indicators{
        top:40px;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .show-picture-backdrop {
        .indicators{
          top:60px;
        }
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .show-picture-backdrop {
        .indicators{
          top:60px;
        }
      }
    }
  }

</style>
<script>
import assign from 'object-assign'
import SwipeItem from '../Swipe/SwipeItem'
import Swipe from '../Swipe/index'

export default {
  component: {
    'swipe': Swipe,
    'swipe-item': SwipeItem,
  },
  data () {
    return {
      defaultOptions: {
        imgUrl: '',
        imgList: [],
        startPosition: 0,
        imgTitle: '',
        width: '100',
      },
      imgUrl: '',
      imgList: [],
      startPosition: 0,
      imgTitle: '',
      state: 0,
      width: '100',
    }
  },

  mounted () {
    this.$el.setAttribute('vum-show-picture', '')
    if (window.history && window.history.pushState) {
      window.addEventListener('popstate', this.hide, false)// false阻止默认事件
    }
  },

  destroyed () {
    document.body.removeChild(this.$el)
    window.removeEventListener('popstate', this.hide, false)// false阻止默认事件
  },

  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.imgList = _options.imgList || []
      this.startPosition = _options.startPosition
      this.state = 1
      if (!this.width) {
        this.width = 100
      }
      debugger
      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>
