<script setup lang="ts">
/**
 * 文件职责：加料组编辑抽屉。
 * 1. 承载加料组基础字段和加料项编辑表单。
 * 2. 对外抛出表单变更与保存事件。
 */
import type { AddonEditorForm } from '../types';

import { onBeforeUnmount, watch } from 'vue';

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

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

const emit = defineEmits<{
  addItem: [];
  close: [];
  removeItem: [index: number];
  setDescription: [value: string];
  setItemName: [index: number, value: string];
  setItemPrice: [index: number, value: number];
  setItemStock: [index: number, value: number];
  setMaxSelect: [value: number];
  setMinSelect: [value: number];
  setName: [value: string];
  setRequired: [value: boolean];
  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 pad-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">
          <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="30"
            placeholder="请输入加料组名称，如：加料、配菜"
            @input="
              (event) =>
                emit('setName', (event.target as HTMLInputElement).value)
            "
          />
        </div>

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

        <div class="pad-sel-row">
          <span>选择数量：最少</span>
          <input
            class="g-input pad-input-num"
            type="number"
            min="0"
            :value="form.minSelect"
            @input="
              (event) =>
                emit(
                  'setMinSelect',
                  Number((event.target as HTMLInputElement).value || 0),
                )
            "
          />
          <span>最多</span>
          <input
            class="g-input pad-input-num"
            type="number"
            min="1"
            :value="form.maxSelect"
            @input="
              (event) =>
                emit(
                  'setMaxSelect',
                  Number((event.target as HTMLInputElement).value || 1),
                )
            "
          />
        </div>

        <div class="g-form-group">
          <label class="g-form-label required">选项列表</label>
          <div class="g-hint" style="margin-bottom: 8px">
            每个选项可设置加价和库存，加价为 0 表示免费
          </div>

          <div class="pad-opt-list-header">
            <span class="h-name">名称</span>
            <span class="h-price">加价(¥)</span>
            <span class="h-stock">库存</span>
            <span class="h-act"></span>
          </div>

          <div class="pad-opt-list">
            <div
              v-for="(item, index) in form.items"
              :key="item.id || `addon-item-${index}`"
              class="pad-opt-row"
            >
              <input
                class="pad-opt-name"
                type="text"
                :value="item.name"
                placeholder="请输入入选项名称"
                @input="
                  (event) =>
                    emit(
                      'setItemName',
                      index,
                      (event.target as HTMLInputElement).value,
                    )
                "
              />
              <input
                class="pad-opt-price"
                type="number"
                min="0"
                step="0.01"
                :value="item.price"
                @input="
                  (event) =>
                    emit(
                      'setItemPrice',
                      index,
                      Number((event.target as HTMLInputElement).value || 0),
                    )
                "
              />
              <input
                class="pad-opt-stock"
                type="number"
                min="0"
                :value="item.stock"
                @input="
                  (event) =>
                    emit(
                      'setItemStock',
                      index,
                      Number((event.target as HTMLInputElement).value || 0),
                    )
                "
              />
              <button
                type="button"
                class="pad-opt-del"
                @click="emit('removeItem', index)"
              >
                <IconifyIcon icon="lucide:trash-2" />
              </button>
            </div>
          </div>

          <button
            type="button"
            class="g-btn pad-btn-dashed"
            @click="emit('addItem')"
          >
            <IconifyIcon icon="lucide:plus" />
            添加选项
          </button>
        </div>

        <div class="g-form-group">
          <label class="g-form-label">备注</label>
          <textarea
            class="g-textarea"
            rows="2"
            maxlength="120"
            :value="form.description"
            placeholder="可选，如：仅限堂食商品使用"
            @input="
              (event) =>
                emit(
                  'setDescription',
                  (event.target as HTMLTextAreaElement).value,
                )
            "
          ></textarea>
        </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>
