<template>
  <el-icon class="collapse-icon" @click="changeCollapse">
    <img class="img-size" :src="globalStore.isCollapse ? expandImage : foldImage" />
  </el-icon>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/stores/modules/global";
import expandImage from "@/assets/images/expand-image.png";
import foldImage from "@/assets/images/fold-image.png";

const globalStore = useGlobalStore();
const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
</script>

<style scoped lang="scss">
.collapse-icon {
  margin-right: 20px;
  font-size: 22px;
  color: var(--el-header-text-color);
  cursor: pointer;
}

.img-size {
  width: 18px;
  height: 18px;
}
</style>
