Component({
  properties: {
    show: {
      type: Boolean,
      value: false,
    },
    position: {
      type: String,
      value: 'right',
    },
    duration: {
      type: Number,
      value: 300,
    },
    round: {
      type: Boolean,
      value: false,
    },
    overlay: {
      type: Boolean,
      value: true,
    },
    height: {
      type: String,
      value: '100%',
      observer: function(val) {
        const h = val || '100%'
        const customStyle = 'height: '+ h +'; z-index:999'
        this.setData({ customStyle })
      }
    },
    overlayColor: {
      type: String,
      value: 'black',
      observer: function(val) {
        let overlayStyle = 'z-index:99'
        switch(val) {
          case 'white':
            overlayStyle += 'background-color: rgba(255, 255, 255, 0.7)'
            break
          case 'blur':
            overlayStyle += 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
            break
          default:
            overlayStyle += 'background-color: rgba(0, 0, 0, 0.7)'
        }
        this.setData({ overlayStyle })
      }
    }
  },
  data: {
    customStyle: '',
    overlayStyle: ''
  },
  methods: {
    onBeforeEnter(e) {},
    onEnter(e) {},
    onAfterEnter(e) {},
    onBeforeLeave(e) {},
    onLeave(e) {
      this.triggerEvent('close', e)
    },
    onAfterLeave(e) {},
    onClickOverlay(e) {
      this.triggerEvent('close', e)
    }
  }
})
