<template>
  <div class="container">
    <dof-overlay
      :show="show && hasOverlay"
      v-if="show"
      v-bind="mergeOverlayCfg"
      :opacity="opacity"
      @dofOverlayBodyClicked="dofOverlayBodyClicked"
    ></dof-overlay>
    <div ref="dof-mask" class="dof-mask" v-if="show" :hack="shouldShow" :style="maskStyle">
      <div :style="contentStyle">
        <slot></slot>
      </div>
      <div class="mask-bottom" :style="{ width: width + 'px' }" v-if="showClose">
        <!-- <dof-image :src="closeIcon" :placeholder='closeIcon'  @click="cancel" class="closeIcon"></dof-image> -->
        <image class="closeIcon" @click="cancel" :placeholder="localCloseIcon" :src="closeIcon"></image>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: fixed;
  /* width: 750px; */
  /*兼容H5异常*/
  z-index: 99999;
}

.dof-mask {
  position: fixed;
  z-index: 1003;
}

.mask-bottom {
  margin-top: 92px;
  background-color: transparent;
  /* background-color: #00A4F2; */
  justify-content: center;
  align-items: center;
}

.closeIcon {
  width: 70px;
  height: 70px;
  z-index: 999;
}
</style>

<script>
const animation = weex.requireModule('animation')
import DofOverlay from '../dof-overlay'
import DofImage from '../dof-image'
import Icon from '../setting/icon.base64'
const modal = weex.requireModule('modal')

export default {
  components: { DofOverlay, DofImage },
  props: {
    height: {
      type: [String, Number],
      default: 800
    },
    width: {
      type: [String, Number],
      default: 540
    },
    top: {
      type: Number,
      default: 0
    },
    show: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [String, Number],
      default: 300
    },
    hasOverlay: {
      type: Boolean,
      default: true
    },
    hasAnimation: {
      type: Boolean,
      default: true
    },
    timingFunction: {
      type: Array,
      default: () => ['ease-in', 'ease-out']
    },
    overlayCfg: {
      type: Object,
      default: () => ({
        hasAnimation: true,
         timingFunction: ['cubic-bezier(0.25, 0.1, 0.25, 1.0)', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'],
        //timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
        canAutoClose: false,
        duration: 300,
        opacity: 0.3
      })
    },
    borderRadius: {
      type: [String, Number],
      default: 32
    },
    // overlayCanClose: {
    //   type: Boolean,
    //   default: true
    // },
    maskBgColor: {
      type: String,
      // default: '#ffffff'
      default: 'transparent'
    },
    opacity: {
      type: [Number, String],
      default: 0.3
    },
    screenWidth: {
      type: Number,
      default: 750
    }
  },
  data: () => ({
    localCloseIcon: '/assets/img/check/home_ic_closepop@3x.png',
    closeIcon: Icon.closeIcon,
    maskTop: 264,
    opened: false
  }),
  computed: {
    mergeOverlayCfg() {
      return {
        ...this.overlayCfg,
        hasAnimation: this.hasAnimation
      }
    },
    maskStyle() {
      const { width, height, showClose, hasAnimation, opened, top, screenWidth } = this
      const newHeight = showClose ? height - 0 + 180 : height
      const { deviceHeight, deviceWidth, platform } = weex.config.env
      const _deviceHeight = deviceHeight || 1334
      const isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'
      const navHeight = isWeb ? 0 : 130
      const pageHeight = (_deviceHeight / deviceWidth) * screenWidth - navHeight
      return {
        width: width + 'px',
        height: newHeight + 'px',
        left: (screenWidth - width) / 2 + 'px',
        top: (top || (pageHeight - height) / 2) + 'px',
        opacity: hasAnimation && !opened ? 0 : 1
      }
    },
    contentStyle() {
      return {
        width: this.width + 'px',
        backgroundColor: this.maskBgColor,
        height: this.height + 'px',
        borderRadius: this.borderRadius + 'px',
        overflow: 'hidden'
      }
    },
    shouldShow() {
      const { show, hasAnimation } = this
      hasAnimation &&
        setTimeout(() => {
          this.appearMask(show)
        }, 50)
      return show
    }
  },
  methods: {
    // bottombar click to close
    closeIconClicked() {
      console.log('closeIconClicked...')
      this.appearMask(false)
    },

    onImageLoad(event) {
      modal.toast({
        message: `event:${JSON.stringify(event)}`
      })
      if (event.success) {
        // Do something to hanlde success
      }
    },

    cancel() {
      this.appearMask(false)
    },

    dofOverlayBodyClicked() {
      // console.log("mergeOverlayCfg",this.mergeOverlayCfg)
      console.log('this.overlayCfg.overlayCanClose', this.mergeOverlayCfg.canAutoClose)
      if (this.mergeOverlayCfg.canAutoClose) {
        this.show && this.appearMask(false)
      }
    },
    needEmit(bool = false) {
      this.opened = bool
      !bool && this.$emit('dofMaskSetHidden', {})
    },
    appearMask(bool, duration = this.duration) {
      const { hasAnimation, timingFunction } = this
      const maskEl = this.$refs['dof-mask']
      if (hasAnimation && maskEl) {
        animation.transition(
          maskEl,
          {
            styles: {
              opacity: bool ? 1 : 0
            },
            duration,
            timingFunction: timingFunction[bool ? 0 : 1],
            delay: 0
          },
          () => {
            this.needEmit(bool)
          }
        )
      } else {
        this.needEmit(bool)
      }
    }
  }
}
</script>
