<template>
  <a-layout style="height: 100%">
    <a-layout-header
      :style="{
        height: '30px',
        padding: '0px',
        width: collapsed == true ? '40px' : '100%',
      }"
    >
      <menu-unfold-outlined
        v-if="collapsed == true"
        class="trigger"
        style="margin-top: 5px; margin-right: 10px; float: right; font-size: 16px; color: white"
        @click="handleChangeMenu"
      />
      <menu-fold-outlined
        v-else
        class="trigger"
        @click="handleChangeMenu"
        style="margin-top: 5px; margin-right: 10px; float: right; font-size: 16px; color: white"
      />
    </a-layout-header>
  </a-layout>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'LtAFrameBtn',
    components: {
      MenuUnfoldOutlined,
      MenuFoldOutlined,
    },
    props: {
      collapsed: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, { emit }) {
      const handleChangeMenu = function () {
        emit('menu-btn-click', 1);
      };
      return { handleChangeMenu, MenuFoldOutlined, MenuUnfoldOutlined };
    },
  });
</script>
