<script setup lang="ts">
interface Props {
  dirty: boolean;
  saving: boolean;
}
defineProps<Props>();
const emit = defineEmits<{
  (e: 'save'): void;
  (e: 'cancel'): void;
  (e: 'reset'): void;
  (e: 'open-library'): void;
}>();
</script>

<template>
  <div class="edit-overlay">
    <span class="edit-overlay__hint">
      <SvgIcon icon="mdi:cursor-move" />
      正在编辑布局——拖动模块换位 / 抽屉里把隐藏模块拖回来
    </span>
    <div class="edit-overlay__actions">
      <ElButton @click="emit('open-library')">
        <SvgIcon icon="mdi:view-grid-plus-outline" class="edit-overlay__btn-icon" />
        模块库
      </ElButton>
      <ElButton @click="emit('reset')">重置默认布局</ElButton>
      <ElButton @click="emit('cancel')">取消</ElButton>
      <ElButton type="primary" :loading="saving" :disabled="!dirty && !saving" @click="emit('save')">
        保存{{ dirty ? '*' : '' }}
      </ElButton>
    </div>
  </div>
</template>

<style scoped>
.edit-overlay {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-5);
  border-radius: 10px;
}
.edit-overlay__hint {
  color: var(--el-color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.edit-overlay__actions {
  display: inline-flex;
  gap: 8px;
}
.edit-overlay__btn-icon {
  margin-right: 4px;
}
</style>
