<script setup lang="ts">
/**
 * 文件职责：标签编辑抽屉。
 * 1. 承载标签名称、颜色、排序、启停表单。
 * 2. 对外抛出字段变更与保存事件。
 */
import type { LabelColorOption, LabelEditorForm } from '../types';

import { computed, onBeforeUnmount, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { normalizeLabelColor } from '../composables/labels-page/constants';

const props = defineProps<{
  colorOptions: LabelColorOption[];
  form: LabelEditorForm;
  open: boolean;
  submitText: string;
  submitting: boolean;
  title: string;
}>();

const emit = defineEmits<{
  close: [];
  setColor: [value: string];
  setName: [value: string];
  setSort: [value: number];
  submit: [];
  toggleStatus: [];
}>();

const previewText = computed(() => props.form.name.trim() || '标签名称');

const previewColor = computed(() => normalizeLabelColor(props.form.color));

function closeDrawer() {
  emit('close');
}

function submit() {
  if (props.submitting) return;
  emit('submit');
}

function setBodyLock(locked: boolean) {
  if (typeof document === 'undefined') return;
  document.body.style.overflow = locked ? 'hidden' : '';
}

watch(
  () => props.open,
  (open) => {
    setBodyLock(open);
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  setBodyLock(false);
});
</script>

<template>
  <Teleport to="body">
    <div class="g-drawer-mask" :class="{ open }" @click="closeDrawer"></div>

    <div
      class="g-drawer plbl-editor-drawer"
      :class="{ open }"
      style="width: 460px"
    >
      <div class="g-drawer-hd">
        <span class="g-drawer-title">{{ title }}</span>
        <button type="button" class="g-drawer-close" @click="closeDrawer">
          <IconifyIcon icon="lucide:x" />
        </button>
      </div>

      <div class="g-drawer-bd">
        <div class="g-form-group">
          <label class="g-form-label required">标签名称</label>
          <input
            type="text"
            class="g-input"
            :value="form.name"
            maxlength="20"
            placeholder="请输入标签名称，如：新品、招牌"
            @input="
              (event) =>
                emit('setName', (event.target as HTMLInputElement).value)
            "
          />
        </div>

        <div class="g-form-group">
          <label class="g-form-label required">标签颜色</label>
          <div class="plbl-color-grid">
            <button
              v-for="item in colorOptions"
              :key="item.value"
              type="button"
              class="plbl-color-swatch"
              :class="{
                selected: normalizeLabelColor(form.color) === item.value,
              }"
              :style="{ background: item.value }"
              @click="emit('setColor', item.value)"
            >
              <span class="plbl-check">
                <IconifyIcon icon="lucide:check" />
              </span>
            </button>
          </div>
        </div>

        <div class="g-form-group">
          <label class="g-form-label">预览</label>
          <div class="plbl-preview-area">
            <span class="plbl-pill" :style="{ background: previewColor }">
              {{ previewText }}
            </span>
          </div>
        </div>

        <div class="g-form-group">
          <label class="g-form-label">排序</label>
          <input
            type="number"
            min="0"
            class="g-input"
            :value="form.sort"
            placeholder="数字越小越靠前，如：0"
            @input="
              (event) =>
                emit(
                  'setSort',
                  Number((event.target as HTMLInputElement).value || 0),
                )
            "
          />
        </div>

        <div class="g-form-group">
          <label class="g-form-label">启用状态</label>
          <div class="plbl-toggle-row">
            <button
              type="button"
              class="g-toggle"
              :class="{ on: form.status === 'enabled' }"
              @click="emit('toggleStatus')"
            ></button>
            <span class="g-toggle-label">
              {{ form.status === 'enabled' ? '启用' : '停用' }}
            </span>
          </div>
        </div>
      </div>

      <div class="g-drawer-ft">
        <button type="button" class="g-btn" @click="closeDrawer">取消</button>
        <button
          type="button"
          class="g-btn g-btn-primary"
          :disabled="submitting"
          @click="submit"
        >
          {{ submitText }}
        </button>
      </div>
    </div>
  </Teleport>
</template>
