<template>
    <view class="drawer" 
     :class="{
      'animation':props.isShowDrawer,
      'anumationBack':!isInit && !props.isShowDrawer
     }">
        <view class="drawer_mask" @click="closeDrawer"></view>
        <view class="drawer_content">
            <slot></slot>
        </view>
    </view>
</template>

<script lang="ts" setup >
import { watch,ref } from 'vue';


interface PropsType {
  isShowDrawer: boolean
}

const isInit = ref(true)
const props = defineProps<PropsType>()

watch(() => props.isShowDrawer,
() => {
  isInit.value = false
})

const emit = defineEmits<{
  (e: 'closeDrawer', data: boolean): void
}>()

function closeDrawer(){
    // console.log('关闭dialog')
    emit('closeDrawer',false)
}

</script>

<style lang="scss" scoped>
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }
.drawer{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    transform: translateX(-100%); /* 元素从左侧100%的位置开始 */

    .drawer_mask{
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.1);
    }


    .drawer_content{
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background-color: #fff;
    }
}

.animation{
  animation: example 1s ease-out forwards; /* 应用动画，持续时间为2秒，缓动函数为ease-out，forwards保持动画结束时的状态 */
}

.anumationBack{
  animation: exampleBack 1s ease-out forwards; /* 应用动画，持续时间为2秒，缓动函数为ease-out，forwards保持动画结束时的状态 */
}

@keyframes example {
  from {
    // background-color: red;
    transform: translateX(-100%); /* 元素从左侧100%的位置开始 */
    opacity: 0; /* 初始透明度为0 */
  }
  to {
    transform: translateX(0); /* 元素移动到原始位置 */
    opacity: 1; /* 最终透明度为1 */
  }
}

@keyframes exampleBack {
  from {
    // background-color: red;
    transform: translateX(0); /* 元素移动到原始位置 */
    opacity: 1; /* 最终透明度为1 */
  }
  to {
    transform: translateX(-100%); /* 元素从左侧100%的位置开始 */
    opacity: 0; /* 初始透明度为0 */
  }
}
</style>