<template>
  <div>
    <div @touchend="handleTouchEnd">
      <dof-overlay
        ref="overlay"
        v-if="show"
        :show="haveOverlay && isOverShow"
        v-bind="overlayCfg"
        v-on:dofOverlayBodyClicked="dofOverlayBodyClicking"
      >
      </dof-overlay>
    </div>
    <div
      ref="dof-confirm"
      v-if="show"
      :height="_height"
      :hack="isNeedShow"
      :class="['dof-confirm', pos]"
      :style="padStyle"
    >
      <!-- add slot by hairong -->
      <slot name="confirmContent"></slot>

      <text v-if="title" class="confirm-title">{{ title }}</text>
      <div class="confirm-content-wrapper">
        <text class="confirm-content">{{ content }}</text>
      </div>
      <div class="confirm-buttons">
        <div class="confirm-button-left" @click="leftBtnClick">
          <text class="left-button">{{ leftBtnText }}</text>
        </div>
        <div class="confirm-button-right" @click="rightBtnClick">
          <text class="right-button">{{ rightBtnText }}</text>
        </div>
      </div>
      <!-- add by lau  解决iPhonex xr xs等机型的低栏问题 留白 -->
      <div :style="{ height: isipx ? '68px' : '0px', 'background-color': '#ffffff' }"></div>
    </div>
  </div>
</template>

<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: {
    title: String,
    content: String,
    leftBtnText: {
      type: String,
      default: '取消'
    },
    rightBtnText: {
      type: String,
      default: '确定'
    },
    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: 420
    },
    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)'
      })
    }
  },
  data: () => ({
    haveOverlay: true,
    isOverShow: true,
    bottomArc: 0
  }),

  computed: {
    // add by lau
    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
      )
    },

    isNeedShow() {
      setTimeout(() => {
        this.appearPopup(this.show)
      }, 50)
      return this.show
    },
    _height() {
      this.appearPopup(this.show, 150)
      return this.height
    },
    transformValue() {
      return this.getTransform(this.pos, this.width, this.height, true)
    },
    padStyle() {
      const { pos, width, height, popupColor } = this
      let style = {
        width: `${width}px`,
        backgroundColor: popupColor
      }
      pos === 'bottom' &&
        (style = {
          ...style,
          bottom: `${-height}px`,
          height: `${height}px`
        })
      return style
    }
  },

  created() {
    console.log('weeks', weex)
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
  },
  methods: {
    leftBtnClick() {
      this.appearPopup(false)
      this.$emit('leftBtnClick', false)
    },
    rightBtnClick() {
      this.appearPopup(false)
      this.$emit('rightBtnClick', true)
    },
    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) {
      // 解决iphonex,xr,xs.11机型低栏的问题
      var height = this.isipx ? this.height + 68 : this.height
      this.isShow = bool
      const popupEl = this.$refs['dof-confirm']
      if (!popupEl) {
        return
      }
      animation.transition(
        popupEl,
        {
          styles: {
            transform: this.getTransform(this.pos, this.width, height, !bool)
          },
          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>

<style scoped>
.dof-confirm {
  position: fixed;
  width: 750px;
  background: #ffffff;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.bottom {
  left: 0;
  right: 0;
}

.confirm-title {
  line-height: 88px;
  height: 88px;
  text-align: center;
  color: #1E2E37;
  font-size: 36px;
  background-color: #ffffff;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.confirm-content-wrapper {
  /* height: 233px; */
  padding-top: 10px;
  padding-bottom: 31px;
  padding-left: 21px;
  padding-right: 21px;
  display: flex;
  justify-content: center;
}

.confirm-content {
  color: #020f13;
  font-size: 28px;
  line-height: 30px;
  /* text-align: justify;
  flex: 1;
  justify-content: space-between; */
}

.confirm-content::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.confirm-buttons {
  overflow: hidden;
  position: relative;
  padding-top: 14px;
  background-color: #f2f2f2;
  text-align: center;
  font-size: 36px;
  flex-direction: row;
}

.confirm-button-left,
.confirm-button-right {
  width: 375px;
  text-align: center;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
}

.confirm-button-left {
  border-right-width: 1px;
  border-right-color: #e5e5e5;
}

.left-button {
  line-height: 100px;
  font-size: 36px;
  color: #232323;
}

.right-button {
  line-height: 100px;
  font-size: 36px;
  color: #1E2E37;
}
</style>
