<template>
  <view class="drawer-home">
    <view class="drawer-home-nav">
      <uni-icons
        type="closeempty"
        size="22"
        color="#333333"
        class="close-icon"
        @click="closeDrawer"
      />
      <text class="title">我的</text>
    </view>

    <MineSetting v-if="isDrawerVisible" @closeDrawer="closeDrawer" />
  </view>
</template>

<script setup>
import { defineEmits, ref, onMounted, onUnmounted } from "vue";
import MineSetting from "../MineSetting/index.vue";

const emits = defineEmits(["closeDrawer"]);

const isDrawerVisible = ref(false);
const closeDrawer = () => {
  console.log("关闭抽屉");
  isDrawerVisible.value = false;
  emits("closeDrawer");
};

// 监听抽屉显示事件
const handleDrawerShow = () => {
  isDrawerVisible.value = true;
};

// 监听抽屉隐藏事件
const handleDrawerHide = () => {
  isDrawerVisible.value = false;
};

onMounted(() => {
  uni.$on("drawerShow", handleDrawerShow);
  uni.$on("drawerHide", handleDrawerHide);
});

onUnmounted(() => {
  uni.$off("drawerShow", handleDrawerShow);
  uni.$off("drawerHide", handleDrawerHide);
});
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
