<template>
  <transition name="wrap">
    <div class="lyf-ui-drawer" v-show="visible">
      <transition name="fade" v-show="visible">
        <div class="lyf-mask" @click="close" @touchmove="touchmoveEvent"></div>
      </transition>
      <transition :name="direction">
        <div 
          v-show="visible"
          class="lyf-ui-drawer-inner"
          :class="[
            direction
          ]"
        >
          <div class="lyf-ui-drawer-head" v-if="title || showClose">
            <div class="lyf-ui-drawer-title" v-if="title">{{ title }}</div>
            <div class="lyf-ui-drawer-close" v-if="showClose" @click="close">
              <lyf-icon icon="close1" :size="21" />
            </div>
          </div>
          <div class="lyf-ui-drawer-body">
            <slot></slot>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'LyfDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'b2t'
    },
    showClose: {
      type: Boolean,
      default: true
    },
    title: String,
    // 禁止遮罩底部内容滑动
    stopMaskSlip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  emits: ['touch-move'],
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    touchmoveEvent(e) {
      if (this.stopMaskSlip) {
        e.preventDefault()
      } else {
        this.$emit('touch-move', e)
      }
    }
  }
}
</script>

<style scoped>
.lyf-ui-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--drawer-z-index);
}
.lyf-ui-drawer .lyf-ui-drawer-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--background-color_2);
}
.lyf-ui-drawer .lyf-ui-drawer-inner.b2t {
  left: 0;
  width: 100%;
}
.lyf-ui-drawer .lyf-ui-drawer-inner.b2t {
  bottom: 0;
  height: var(--drawer-height);
  border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
}
.lyf-ui-drawer .lyf-ui-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 var(--space_16);
  border-bottom: solid var(--border-width) var(--border-color_1);
}
.lyf-ui-drawer .lyf-ui-drawer-title {
  color: var(--font-color_1);
  font-size: 16px;
  font-weight: 500;
}
.lyf-ui-drawer .lyf-ui-drawer-body {
  flex: 1;
  overflow: auto;
}
</style>