<script setup lang="ts">
/**
 * 文件职责：规格做法模板编辑抽屉。
 * 1. 承载模板基本信息与选项编辑表单。
 * 2. 向父级抛出表单变更与提交事件。
 */
import type { SpecEditorForm } from '../types';

import { onBeforeUnmount, watch } from 'vue';

const props = defineProps<{
  form: SpecEditorForm;
  open: boolean;
  submitText: string;
  submitting: boolean;
  title: string;
}>();

const emit = defineEmits<{
  addOption: [];
  close: [];
  removeOption: [index: number];
  setName: [value: string];
  setOptionExtraPrice: [index: number, value: null | number];
  setOptionName: [index: number, value: string];
  setRequired: [value: boolean];
  setSelectionType: [value: SpecEditorForm['selectionType']];
  setType: [value: SpecEditorForm['type']];
  submit: [];
}>();

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 psp-editor-drawer"
      :class="{ open }"
      style="width: 520px"
    >
      <div class="g-drawer-hd">
        <span class="g-drawer-title">{{ title }}</span>
        <button type="button" class="g-drawer-close" @click="closeDrawer">
          ×
        </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="psp-pill-group">
            <button
              type="button"
              class="psp-pill-btn"
              :class="{ active: form.type === 'spec' }"
              @click="emit('setType', 'spec')"
            >
              规格
            </button>
            <button
              type="button"
              class="psp-pill-btn"
              :class="{ active: form.type === 'method' }"
              @click="emit('setType', 'method')"
            >
              做法
            </button>
          </div>
          <div class="g-hint">规格影响价格和库存，做法仅影响制作方式</div>
        </div>

        <div class="g-form-group">
          <label class="g-form-label required">选择方式</label>
          <div class="psp-pill-group">
            <button
              type="button"
              class="psp-pill-btn"
              :class="{ active: form.selectionType === 'single' }"
              @click="emit('setSelectionType', 'single')"
            >
              单选
            </button>
            <button
              type="button"
              class="psp-pill-btn"
              :class="{ active: form.selectionType === 'multi' }"
              @click="emit('setSelectionType', 'multi')"
            >
              多选
            </button>
          </div>
        </div>

        <div class="g-form-group">
          <label class="g-form-label">是否必选</label>
          <div class="g-toggle-wrap">
            <label class="g-toggle-input">
              <input
                type="checkbox"
                :checked="form.isRequired"
                @change="
                  (event) =>
                    emit(
                      'setRequired',
                      (event.target as HTMLInputElement).checked,
                    )
                "
              />
              <span class="g-toggle-sl"></span>
            </label>
            <span class="g-toggle-label">{{
              form.isRequired ? '是' : '否'
            }}</span>
          </div>
        </div>

        <div class="g-form-group">
          <label class="g-form-label required">选项列表</label>
          <div class="psp-opt-list">
            <div
              v-for="(item, index) in form.values"
              :key="index"
              class="psp-opt-row"
            >
              <input
                type="text"
                :value="item.name"
                placeholder="选项名称，如：大杯"
                @input="
                  (event) =>
                    emit(
                      'setOptionName',
                      index,
                      (event.target as HTMLInputElement).value,
                    )
                "
              />
              <div class="psp-price-wrap">
                <span>¥</span>
                <input
                  type="number"
                  :value="item.extraPrice === 0 ? '' : item.extraPrice"
                  placeholder="加价金额"
                  @input="
                    (event) => {
                      const target = event.target as HTMLInputElement;
                      const next = target.value.trim();
                      emit(
                        'setOptionExtraPrice',
                        index,
                        next === '' ? null : Number(next),
                      );
                    }
                  "
                />
              </div>
              <button
                type="button"
                class="psp-opt-del"
                @click="emit('removeOption', index)"
              >
                ×
              </button>
            </div>
          </div>
          <button
            type="button"
            class="g-btn psp-btn-dashed"
            @click="emit('addOption')"
          >
            + 添加选项
          </button>
        </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>
