<script setup lang="ts">
import { ref } from "vue";
import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";

const open = ref(true);

// 切换抽屉状态
const toggleDrawer = () => {
  open.value = !open.value;
};
</script>

<template>
  <!-- <div class="rightContentDrawer"> -->
  <!-- 保持原有的 drawer 参数不变 -->
  <a-drawer
    :mask="false"
    placement="right"
    :open="true"
    width="450"
    :closable="false"
    :headerStyle="{ color: '#FAFCFE' }"
    :rootClassName="{ 'drawer-collapsed': !open }"
    :getContainer="false"
    :destroyOnClose="false"
  >
    <!-- 箭头按钮 - 始终显示在左侧中间位置 -->
    <div class="toggle-button" :class="{ collapsed: !open }" @click="toggleDrawer">
      <span class="arrow-icon" v-if="!open">
        <LeftOutlined />
      </span>
      <span class="arrow-icon" v-else>
        <RightOutlined />
      </span>
    </div>
    <slot />
  </a-drawer>
  <!-- </div> -->
</template>
<style scoped lang="scss">
.rightContentDrawer {
  height: 100%;
}

    .toggle-button {
        width: 18px;
        position: absolute;
        right: 10px;
        cursor: pointer;
        z-index: 10;
        height: 88px;
        line-height: 88px;
        top: 45%;
        left: -18px;
        vertical-align: middle;
        background-image: url('@/assets/bg-toggle.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        &.collapsed {
            left: -20px;
            border-radius: 0 4px 4px 0;
        }

        .arrow-icon {
            color: rgb(81, 131, 169);
            font-size: 18px;
            transition: transform 0.3s ease;
        }
    }

    :deep(.ant-drawer) {

        .ant-drawer-content-wrapper {
            right: 0;
            bottom: 0px;
            border: 2px solid #c5d6e2 !important;
            box-shadow: 3px 3px 3px 9px #e5edf3 !important;
            display: flex;
            flex-direction: column;
        }
    }
</style>
