<template>
  <div>
    <div @touchend="handleTouchEnd">
      <dof-overlay
        :show="haveOverlay && isOverShow"
        v-if="show"
        ref="overlay"
        v-bind="overlayCfg"
        @dofOverlayBodyClicked="dofOverlayBodyClicking"
      ></dof-overlay>
    </div>
    <div
      ref="dof-popup"
      v-if="show"
      :height="_height"
      :hack="isNeedShow"
      @click="() => {}"
      :class="['dof-popup', pos]"
      :style="padStyle"
    >
      <slot></slot>
      <div v-if="button && button.length > 0" style="width:750px; height:20px; background-color:#F3F3F3"></div>
      <div v-if="button && button.length > 0" class="midea-actionsheet-bottom">
        <text class="midea-actionsheet-btn leftBtn" @click="actionsheetBtnClick(0, button[0])">{{ button[0] }}</text>
        <text
          v-if="button.length > 1"
          class="midea-actionsheet-btn rightBtn"
          @click="actionsheetBtnClick(1, button[1])"
          >{{ button[1] }}</text
        >
      </div>
      <div :style="{ height: show && isipx ? '68px' : '0px' }"></div>
    </div>
  </div>
</template>

<style scoped>
.dof-popup {
  position: fixed;
  width: 750px;
  z-index: 1000;
}
.top {
  left: 0;
  right: 0;
}
.bottom {
  left: 0;
  right: 0;
}
.left {
  bottom: 0;
  top: 0;
}
.right {
  bottom: 0;
  top: 0;
}

.midea-actionsheet-bottom {
  height: 100px;
  flex-direction: row;
  /* margin-top: 16px; */
  justify-content: space-between;
}
.midea-actionsheet-btn {
  font-size: 32px;
  color: #232323;
  background-color: #ffffff;
  line-height: 100px;
  text-align: center;
  flex: 1; /* add by lau resolve bottom button */
}
.leftBtn {
  color: #616C73;
  border-right-color: #e5e5e5;
  border-right-width: 1px;
  border-right-style: solid;
}
.rightBtn {
  color: #00A4F2;
}
.midea-actionsheet-btn:active {
  background-color: #f5f5f5;
}
</style>

<script>
const animation = weex.requireModule('animation')
const { platform } = weex.config.env
const isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'
import DofOverlay from '../dof-overlay'
import { Bridge } from 'dolphin-native-bridge'

export default {
  components: { DofOverlay },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pos: {
      type: String,
      default: 'bottom'
    },
    // 背景色  暂不开放
    popupColor: {
      type: String,
      default: '#FFFFFF'
    },
    overlayCfg: {
      type: Object,
      default: () => ({
        hasAnimation: true,
        timingFunction: ['ease-in', 'ease-out'],
        duration: 300,
        opacity: 0.3
      })
    },
    height: {
      type: [Number, String],
      default: 840
    },
    standOut: {
      type: [Number, String],
      default: 0
    },
    width: {
      type: [Number, String],
      default: 750
    },
    animation: {
      type: Object,
      default: () => ({
        // timingFunction: 'ease-in'
        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
      })
    },
    button: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    haveOverlay: true,
    isOverShow: true,
    bottomArc: 0
  }),
  computed: {
    isipx: function() {
      if (this.bottomArc) return true
      return (
        weex &&
        (weex.config.env.deviceModel === 'iPhone10,3' ||
        weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX
        weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR
        weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS
        weex.config.env.deviceModel === 'iPhone11,4' ||
        weex.config.env.deviceModel === 'iPhone11,6' || // iPhone XS Max
        weex.config.env.deviceModel === 'iPhone12,1' || // iPhone11
          weex.config.env.deviceModel === 'iPhone12,3' ||
          weex.config.env.deviceModel === 'iPhone12,5') // iPhone 11 Pro iPhone 11 Pro Max
      )
    },
    isNeedShow() {
      try {
        setTimeout(() => {
          this.appearPopup(this.show)
        }, 50)
      } catch (error) {
        this.$nextTick(() => {
          this.appearPopup(this.show)
        })
      }
      return this.show
    },
    _height() {
      let { height, isipx, pos } = this
      height = Number(height)
      height = isipx && pos == 'bottom' ? height + 68 : height
      this.appearPopup(this.show, 150)
      return height
    },
    transformValue() {
      return this.getTransform(this.pos, this.width, this.height, true)
    },
    padStyle() {
      const { pos, width, height, popupColor, _height } = this
      let style = {
        width: `${width}px`,
        backgroundColor: popupColor
      }
      pos === 'top' &&
        (style = {
          ...style,
          top: `${-height}px`,
          height: `${height}px`,
          borderBottomLeftRadius: '32px',
          borderBottomRightRadius: '32px'
        })
      pos === 'bottom' &&
        (style = {
          ...style,
          bottom: `${-_height}px`,
          height: `${_height}px`,
          borderTopLeftRadius: '32px',
          borderTopRightRadius: '32px'
        })
      pos === 'left' &&
        (style = {
          ...style,
          left: `${-width}px`
        })
      pos === 'right' &&
        (style = {
          ...style,
          right: `${-width}px`
        })
      return style
    }
  },
  created() {
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
  },
  methods: {
    actionsheetBtnClick(index, text) {
      this.appearPopup(false)
      this.$refs.overlay.appearOverlay(false)
      this.$emit('dofPopupButtonClicked', { index, text })
    },
    handleTouchEnd(e) {
      // 在支付宝上面有点击穿透问题
      const { platform } = weex.config.env
      platform === 'Web' && e.preventDefault && e.preventDefault()
    },
    hide() {
      this.appearPopup(false)
      this.$refs.overlay.appearOverlay(false)
    },
    dofOverlayBodyClicking() {
      this.isShow && this.appearPopup(false)
    },
    appearPopup(bool, duration = 300) {
      this.isShow = bool
      const popupEl = this.$refs['dof-popup']
      if (!popupEl) {
        return
      }
      animation.transition(
        popupEl,
        {
          styles: {
            transform: this.getTransform(this.pos, this.width, this._height, !bool) //_height解决iphonex系列向上过渡距离不够的问题
          },
          duration,
          delay: 0,
          ...this.animation
        },
        () => {
          if (!bool) {
            this.$emit('dofPopupOverlayClicked', { pos: this.pos })
          }
        }
      )
    },
    getTransform(pos, width, height, bool) {
      let _size = pos === 'top' || pos === 'bottom' ? height : width
      let _transform
      if (isWeb) {
        _size -= this.standOut
      }
      bool && (_size = 0)
      switch (pos) {
        case 'top':
          _transform = `translateY(${_size}px)`
          break
        case 'bottom':
          _transform = `translateY(-${_size}px)`
          break
        case 'left':
          _transform = `translateX(${_size}px)`
          break
        case 'right':
          _transform = `translateX(-${_size}px)`
          break
      }
      return _transform
    }
  }
}
</script>
