<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" :hack="isNeedShow" @click="() => {}" :class="['dof-popup', pos]" :style="padStyle">
      <slot name="title">
        <text
          v-if="title || $slots.title"
          class="title"
          :style="
            Object.assign({}, titleStyle, {
              'border-top-left-radius': borderRadius,
              'border-top-right-radius': borderRadius
            })
          "
          >{{ title }}</text
        >
      </slot>
      <div class="midea-actionsheet-content">
        <div
          v-bind:class="['midea-actionsheet-list', !title && index === 0 ? 'midea-actionsheet-list-first' : '']"
          v-for="(item, index) in items"
          :key="index"
          @click="actionsheetItemClick(item, index)"
          :style="
            Object.assign({}, itemStyle, {
              'border-top-left-radius': index == 0 && !title ? borderRadius : '0px',
              'border-top-right-radius': index == 0 && !title ? borderRadius : '0px'
            })
          "
        >
          <slot :name="'item-' + index">
            <div class="midea-actionsheet-textWrapper">
              <text :class="['midea-actionsheet-text']" :style="textStyleOps(item)">{{
                item.title ? item.title : item
              }}</text>
            </div>
          </slot>
        </div>
      </div>
      <div v-if="button && button.length > 0" class="midea-actionsheet-bottom" :style="bottomIpxStyle">
        <text class="midea-actionsheet-btn leftBtn" @click="actionsheetBtnClick(button)" :style="defaultBtnStyle">{{
          button
        }}</text>
      </div>
      <div :style="{ height: '0px', 'background-color': _isDiablo ? diabloBg : '#ffffff' }"></div>
    </div>
  </div>
</template>

<style scoped>
.dof-popup {
  position: fixed;
  /* width: 750px; */
  overflow: hidden;
  z-index: 1000;
}

.title {
  padding: 30px;
  text-align: center;
  font-size: 28px;
  color: #8E969B;
  line-height: 48px;
  background-color: #ffffff;
}

.midea-actionsheet-content {
  flex-direction: column;
  flex: 1;
  /* background-color: #ffffff; */
}
.midea-actionsheet-list-first {
  /* border-top-left-radius: 32px;
  border-top-right-radius: 32px; */
  border-top-width: 0px;
  background-color: #ffffff;
}
.midea-actionsheet-list-first:active {
  background-color: #f5f5f5;
}
.midea-actionsheet-list {
  border-top-width: 2px;
  border-top-color: #f9f9f9;
  background-color: #ffffff;
}
.midea-actionsheet-list:active {
  background-color: #f5f5f5;
}
.midea-actionsheet-textWrapper {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.midea-actionsheet-text {
  font-family: PingFangSC-Regular;
  text-align: center;
  font-size: 32px;
  line-height: 96px;
  /* color: #1E2E37; */
}

.midea-actionsheet-bottom {
  flex-direction: row;
  margin-top: 16px;
  justify-content: space-between;
}
.midea-actionsheet-btn {
  font-size: 32px;
  color: #232323;
  background-color: #ffffff;
  line-height: 92px;
  text-align: center;
  flex: 1; /* add by lau resolve bottom button */
}
.leftBtn {
  color: #616C73;
}

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

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

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

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

@media screen and (weex-theme: diablo) {
  .title {
    color: #797c7e;
    background-color: #1e2326;
  }
  .midea-actionsheet-list-first {
    /* border-top-left-radius: 32px;
    border-top-right-radius: 32px; */
    border-top-width: 0px;
    background-color: #1e2326;
  }
  .midea-actionsheet-list-first:active {
    background-color: #1e2326;
  }
  .midea-actionsheet-list {
    border-top-width: 2px;
    border-top-color: #303538;
    background-color: #1e2326;
  }
  .midea-actionsheet-list:active {
    background-color: #1e2326;
  }
  .midea-actionsheet-btn {
    color: #cfcfd0;
    background-color: #1e2326;
  }
  .leftBtn {
    color: #cfcfd0;
  }
}
</style>

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

export default {
  mixins: [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,
        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)'
      })
    },
    title: {
      type: String,
      default: ''
    },
    button: {
      type: String,
      default: '取消'
    },
    items: {
      type: Array,
      default: () => []
    },
    titleStyle: {
      type: Object,
      default: () => {}
    },
    defaultBtnStyle: {
      type: Object,
      default: () => ({})
    },
    itemStyle: {
      type: Object,
      default: () => {}
    },
    borderRadius: {
      type: String,
      default: '32px'
    }
  },
  data: () => ({
    haveOverlay: true,
    isOverShow: true,
    bottomArc: 0,
    diabloBg: '#1e2326'
  }),
  computed: {
    isNeedShow() {
      try {
        setTimeout(() => {
          this.appearPopup(this.show)
        }, 50)
      } catch (error) {
        this.$nextTick(() => {
          this.appearPopup(this.show)
        })
      }
      return this.show
    },
    // _height() {
    //   this.appearPopup(this.show, 150)
    //   return this.popHeight
    // },
    // transformValue() {
    //   return this.getTransform(this.pos, this.width, this.popHeight, true)
    // },
    padStyle() {
      const { pos, width, popupColor } = this
      const style = {
        width: `${width}px`,
        backgroundColor: popupColor ? popupColor : this._isDiablo ? '#101315' : '#F9F9F9'
        // backgroundColor: '#616C73'
      }
      if (pos === 'bottom') {
        style.bottom = '0px'
        style.transform = 'translateY(100%)'
        style.borderTopLeftRadius = this.borderRadius
        style.borderTopRightRadius = this.borderRadius
      }
      return style
    },
    bottomIpxStyle() {
      const style = {
        backgroundColor: this._isDiablo ? this.diabloBg : '#ffffff',
        paddingBottom: `${this.isipx ? 84 : 16}px`
      }
      return style
    },
    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
        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
      )
    }

    // popHeight() {
    //   // 根据下拉菜单内容计算bottom距离
    //   // var length = this.items.length
    //   //add by lau 可以不传递item,并且自动获取高度
    //   var length = (this.items && this.items.length) || 0
    //   var height,
    //     extraHeight = this.isipx ? 84 : 16 // 84=16+68

    //   if (this.items && this.items.length > 0) {
    //     // var len = (length + 1) * 100 + 80;
    //     height = (length + 1) * 96 + extraHeight
    //   } else {
    //     height = this.popHeight + 80
    //   }
    //   height = this.title ? height + 108 : height
    //   return height
    // }
  },
  created() {
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
  },
  methods: {
    // '取消'按钮点击事件
    actionsheetBtnClick(buttonText) {
      this.appearPopup(false)
      this.$refs.overlay.appearOverlay(false)
      this.$emit('dofCancelClick', { buttonText })
    },

    // 菜单项点击事件
    actionsheetItemClick(item, index) {
      this.appearPopup(false)
      this.$refs.overlay.appearOverlay(false)
      this.$emit('dofItemClick', { item, index })
    },

    handleTouchEnd(e) {
      // 在支付宝上面有点击穿透问题
      const { platform } = weex.config.env
      platform === 'Web' && e.preventDefault && e.preventDefault()
    },
    hide() {
      this.appearPopup(false)
      this.$refs.overlay.appearOverlay(false)
    },
    dofOverlayBodyClicking() {
      this.show && this.appearPopup(false)
    },
    appearPopup(show, duration = 300) {
      const popupEl = this.$refs['dof-popup']
      if (!popupEl) {
        return
      }
      animation.transition(
        popupEl,
        {
          styles: {
            transform: this.getTransform(this.pos, show)
          },
          duration,
          delay: 0,
          ...this.animation
        },
        () => {
          if (!show) {
            this.$emit('dofPopupOverlayClicked', { pos: this.pos })
          }
        }
      )
    },
    getTransform(pos, show) {
      let _transform
      switch (pos) {
        case 'top':
        case 'left':
          _transform = `translateY(${show ? 0 : -100}%)`
          break
        case 'bottom':
        case 'right':
          _transform = `translateY(${show ? 0 : 100}%)`
          break
      }
      return _transform
    },
    textStyleOps(item) {
      return item.textColor ? { color: item.textColor } : { color: this._isDiablo ? '#cfcfd0' : '#1E2E37' }
    }
  }
}
</script>
