<template>
  <div>
    <div @touchend="handleTouchEnd">
      <dof-overlay
        :show="overlayShow"
        ref="overlay"
        v-bind="overlayCfg"
        :canAutoClose="isOverLayClickHide"
        @dofOverlayBodyClicked="dofOverlayBodyClicking"
      ></dof-overlay>
    </div>
    <div ref="dof-popup" v-if="show_" :height="_height" @click="() => {}" :class="['dof-popup', pos]" :style="padStyle">
      <slot></slot>
      <div class="btnGap" v-if="button && button.length > 0" style=" height:20px;"></div>
      <div v-if="button && button.length > 0" class="midea-actionsheet-bottom">
        <text
          v-for="(btn, index) in button"
          :key="index"
          :class="['midea-actionsheet-btn']"
          :style="{
            color: btn.hasOwnProperty('textColor')
              ? btn.textColor
              : _isColmo
              ? 'rgba(255,255,255,0.80)'
              : index === 0 && !_isDiablo
              ? '#616C73'
              : index === 0 && _isDiablo
              ? '#797c7e'
              : '#00A4F2'
          }"
          @click="actionsheetBtnClick(index, btn.hasOwnProperty('text') ? btn.text : btn)"
          >{{ btn.hasOwnProperty('text') ? btn.text : btn }}</text
        >
      </div>
      <div
        :style="{
          height: show && isipx ? sageHeight + 'px' : '0px',
          backgroundColor: safeAreaBgColor ? safeAreaBgColor : _isColmo ? '#151617' : padStyle.backgroundColor
        }"
      ></div>
    </div>
  </div>
</template>

<style scoped>
.dof-popup {
  position: fixed;
  z-index: 1000;
  /* width: 750px; */
}
.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;
}
.btnGap {
  background-color: #f3f3f3;
}
</style>
<style scoped src="./colmo.css"></style>
<style scoped src="./diablo.css"></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 Utils from '../utils'
import { Bridge } from 'dolphin-native-bridge'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofOverlay },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pos: {
      type: String,
      default: 'bottom'
    },
    // 背景色  暂不开放
    popupColor: {
      type: String,
      default: ''
    },
    overlayCfg: {
      type: Object,
      default: () => ({
        hasAnimation: true,
        timingFunction: ['ease-in', 'ease-out'],
        duration: 300
      })
    },
    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: () => []
    },
    borderRadius: {
      type: String,
      default: '32px'
    },
    isOverLayClickHide: {
      type: Boolean,
      default: false
    },
    safeAreaBgColor: {
      type: String,
      default: ''
    }
  },
  data: () => ({
    haveOverlay: true,
    isOverShow: true,
    bottomArc: 0,
    show_: false,
    overlayShow: false,
    sageHeight: 68
  }),
  computed: {
    isipx: function() {
      if (this.bottomArc) return true
      if(weex && weex.config.env.platform == 'harmony' && weex.config.env.safeAreaBottomHeight) 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
        weex.config.env.deviceModel === 'iPhone13,1' ||
        weex.config.env.deviceModel === 'iPhone13,2' || // iPhone12 Mini && iPhone12
        weex.config.env.deviceModel === 'iPhone13,3' || //iPhone12 Pro
        weex.config.env.deviceModel === 'iPhone13,4' || // iPhone12 Pro Max
        weex.config.env.deviceModel === 'iPhone14,4' || //iPhone 13 mini
        weex.config.env.deviceModel === 'iPhone14,5' || //iPhone 13
        weex.config.env.deviceModel === 'iPhone14,2' || //iPhone 13 Pro
          weex.config.env.deviceModel === 'Iphone14,3') //iPhone 13 Pro Max
      )
    },
    _height() {
      let { height, isipx, pos } = this
      height = Number(height)
      height = isipx && pos == 'bottom' ? height + this.sageHeight : height
      return height
    },
    transformValue() {
      return this.getTransform(this.pos, this.width, this.height, true)
    },
    _popupColor() {
      if (this.popupColor) return this.popupColor
      return this._isColmo ? '#232529' : this._isDiablo ? '#1e2326' : '#fff'
    },
    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: this._isColmo ? 0 : this.borderRadius,
          borderBottomRightRadius: this._isColmo ? 0 : this.borderRadius
        })
      pos === 'bottom' &&
        (style = {
          ...style,
          bottom: `${-_height - 1}px`,
          height: `${_height}px`,
          borderTopLeftRadius: this._isColmo ? 0 : this.borderRadius,
          borderTopRightRadius: this._isColmo ? 0 : this.borderRadius
        })
      pos === 'left' &&
        (style = {
          ...style,
          left: `${-width}px`
        })
      pos === 'right' &&
        (style = {
          ...style,
          right: `${-width}px`
        })
      return style
    },
    buttonComp() {
      return this.button
    }
  },
  watch: {
    _height() {
      this.appearPopup(this.show_, 0)
    },
    show_(val) {
      setTimeout(() => {
        val && this.appearPopup(val)
      }, 100)
    },
    show: {
      handler(val, oldVal) {
        if (val) {
          this.overlayShow = true
          setTimeout(() => {
            this.show_ = true
          }, 0)
        } else {
          if (oldVal !== true) return
          this.appearPopup(false, 300, () => {})
          setTimeout(() => {
            this.show_ = false
            this.overlayShow = false
          }, 400)
        }
      },
      immediate: true
    }
  },
  mounted() {
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
    if(weex && weex.config.env.platform == 'harmony' && weex.config.env.safeAreaBottomHeight){
      this.sageHeight = weex.config.env.safeAreaBottomHeight / weex.config.env.scale
    }
  },
  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.isOverLayClickHide && this.isShow && this.appearPopup(false)
      setTimeout(() => {
        this.$emit('dofPopupOverlayClicked')
      }, 100)
    },
    appearPopup(bool, duration = 300, cb = () => {}) {
      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
        },
        () => {
          cb()
          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
    }
  },
  genBtnText(item) {
    if (Utils.isPlainObject(item)) {
      return item.text
    } else {
      return item
    }
  }
}
</script>
