<template>
  <el-affix class="home-setting" :offset="20" position="bottom" target="body">
    <el-button class="refresh-btn" type="info" circle plain :icon="Setting" :disabled="loading" @click="toShow"></el-button>
  </el-affix>
</template>

<script setup lang="ts" name="homeDragBall">
import { nextTick, ref } from "vue";
import { Setting } from "@element-plus/icons-vue";

const emit = defineEmits(["setting"]);
const loading = ref(false);

/**
 * @description 拖拽球
 */
function toShow() {
  loading.value = true;
  setTimeout(() => {
    emit("setting", () => {
      loading.value = false;
    });
  }, 1);
}

defineExpose({
  toShow
});
</script>

<style lang="scss" scoped>
.home-setting {
  position: fixed;
  right: $space-b3;
  bottom: $space-b3;
  z-index: 99;
}
</style>
