<template>
  <div v-if="show" class="bg" @click="cancel">
    <div class="dof-confirm-box-wrap" ref="boxWrap" :style="{ height: wrapHeight, bottom: '0px' }">
      <text v-if="title" class="title">{{ title }}</text>
      <dof-image
        src="../../assets/img/check/disuncheked.png"
        @click="cancel"
        class="closeIcon"
        width="40px"
        height="40px"
      ></dof-image>
      <div class="slot-floor">
        <slot></slot>
      </div>
      <!-- <div :class="['confirm-buttons', 'row-sb', isipx?'bottom-offset':'']">
        <text class="left-button" @click="leftBtnClick">{{leftBtnText}}</text>
        <text class="right-button" @click="rightBtnClick">{{rightBtnText}}</text>
      </div> -->

      <div :class="[isipx ? 'bottom-offset-padding' : '']"></div>
    </div>
  </div>
</template>

<script>
import DofImage from '../dof-image'
// import { DofImage, DofMinibar } from "../../index";
var animation = weex.requireModule('animation')
import { Bridge } from 'dolphin-native-bridge'

export default {
  components: { DofImage },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 600
    },

    title: {
      type: String,
      default: ''
    },

    leftBtnText: {
      type: String,
      default: '取消'
    },
    rightBtnText: {
      type: String,
      default: '确定'
    }
  },
  data() {
    return {
      bottomArc: 0
    }
  },

  watch: {},

  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
      )
    },
    wrapHeight: function() {
      let tmp = ''
      if (this.isipx) {
        tmp = this.height + 34
      } else {
        tmp = this.height
      }
      return tmp + 'px'
    }
  },
  methods: {
    // cancel() {
    //   this.show = false;
    //   this.$emit('dofPopupOverlayClicked');
    // },

    open() {
      var _this = this
      console.log('open')
      var el = this.$refs.boxWrap
      var translate = 'translate(0px, 0px)'
      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function() {
        _this.show = true // overlay show = false
        _this.$emit('dofPopupOverlayClicked')
      })
    },

    cancel() {
      var _this = this
      console.log('cancel')
      var el = this.$refs.boxWrap
      var translate = 'translate(0px, ' + this.height + 'px)'
      _this.animationFn(el, translate, 'cubic-bezier( 1.0, 0.25, 0.1, 0.25)', function() {
        _this.show = false // overlay show = false
        _this.$emit('dofPopupOverlayClicked')
      })
    },

    leftBtnClick() {
      this.$emit('leftBtnClick')
    },
    rightBtnClick() {
      this.$emit('rightBtnClick')
    },

    animationFn(el, translate, timing, fn) {
      animation.transition(
        el,
        {
          styles: {
            transform: translate,
            transformOrigin: 'center center'
          },
          duration: 300, // ms
          timingFunction: timing,
          delay: 0 // ms
        },
        function() {
          fn && fn()
        }
      )
    }
  },
  mounted() {},
  created() {
    Bridge.getAllBarHeight().then(res => {
      this.bottomArc = res.bottomArc || 0
    })
  }
}
</script>

<style>
.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.dof-confirm-box-wrap {
  background-color: #ffffff;
  width: 750px;
  position: fixed;
  bottom: 0;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  overflow: hidden;
  transition: ease-in-out all 0.5s;
  /* padding: 16px; */
}
.slot-floor {
  /* width: 750px; */
  /* height: 500px; */
  background-color: #ffffff;
  font-size: 28px;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}
.row-sb {
  flex-direction: row;
  justify-content: space-between;
}
.confirm-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 16px;
  background-color: #f2f2f2;
}
.left-button,
.right-button {
  width: 375px;
  line-height: 96px;
  flex: 1;
  text-align: center;
  background-color: #ffffff;
}
.left-button {
  font-size: 32px;
  color: #616C73;
  border-right-width: 1px;
  border-right-color: #e5e5e5;
}
.right-button {
  font-size: 32px;
  color: #1E2E37;
}
.bottom-offset {
  height: 154px;
}

.bottom-offset-padding {
  height: 68px;
}

.title {
  color: #1E2E37;
  font-size: 32px;
  line-height: 106px;
  border-bottom-color: #f2f2f2;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  /* border-bottom: solid 4px #8E969B; */
  padding-left: 32px;
}

.closeIcon {
  position: absolute;
  top: 37px;
  right: 37px;
}
</style>
