<script setup lang="ts">
/**
 * 门店编辑抽屉：
 * - 负责新增/编辑表单渲染
 * - 字段更新通过回调上抛，不直接改父级对象
 */
import type { SelectOptionItem } from '../types';

import type { ServiceType } from '#/api/store';

import { Button, Drawer, Form, FormItem, Input } from 'ant-design-vue';

interface Props {
  address: string;
  contactPhone: string;
  isSubmitting: boolean;
  managerName: string;
  name: string;
  onSetAddress: (value: string) => void;
  onSetContactPhone: (value: string) => void;
  onSetManagerName: (value: string) => void;
  onSetName: (value: string) => void;
  onSetServiceTypes: (value: ServiceType[]) => void;
  open: boolean;
  serviceTypeOptions: SelectOptionItem<ServiceType>[];
  serviceTypes: ServiceType[];
  title: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

/** 读取字符串输入值。 */
function readTextValue(value: string | undefined) {
  return value ?? '';
}

/** 切换服务方式。 */
function toggleServiceType(value: ServiceType) {
  const current = [...props.serviceTypes];
  const index = current.indexOf(value);
  if (index === -1) {
    current.push(value);
  } else {
    current.splice(index, 1);
  }
  props.onSetServiceTypes(current);
}
</script>

<template>
  <Drawer
    class="store-editor-drawer-wrap"
    :open="props.open"
    :title="props.title"
    :width="520"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <Form layout="vertical" class="store-drawer-form">
      <div class="store-drawer-section-title">基本信息</div>
      <FormItem label="门店名称" required>
        <Input
          :value="props.name"
          placeholder="请输入门店名称"
          @update:value="(value) => props.onSetName(readTextValue(value))"
        />
      </FormItem>
      <FormItem label="联系电话" required>
        <Input
          :value="props.contactPhone"
          placeholder="请输入联系电话"
          @update:value="
            (value) => props.onSetContactPhone(readTextValue(value))
          "
        />
      </FormItem>
      <FormItem label="负责人" required>
        <Input
          :value="props.managerName"
          placeholder="请输入负责人姓名"
          @update:value="
            (value) => props.onSetManagerName(readTextValue(value))
          "
        />
      </FormItem>
      <FormItem label="门店地址" required>
        <Input
          :value="props.address"
          placeholder="请输入详细地址"
          @update:value="(value) => props.onSetAddress(readTextValue(value))"
        />
      </FormItem>

      <div class="store-drawer-section-title">营业设置</div>
      <FormItem label="配送方式">
        <div class="flex gap-3">
          <div
            v-for="option in props.serviceTypeOptions"
            :key="option.value"
            class="cursor-pointer select-none rounded-full border px-4 py-1.5 text-sm transition-all"
            :class="
              props.serviceTypes.includes(option.value)
                ? 'border-primary bg-primary/5 font-medium text-primary'
                : 'border-gray-200 text-gray-500 hover:border-primary/50 hover:text-primary/80'
            "
            @click="toggleServiceType(option.value)"
          >
            {{ option.label }}
          </div>
        </div>
      </FormItem>
    </Form>

    <template #footer>
      <div class="store-drawer-footer">
        <Button @click="emit('update:open', false)">取消</Button>
        <Button
          type="primary"
          :loading="props.isSubmitting"
          @click="emit('submit')"
        >
          {{ props.title.includes('编辑') ? '保存修改' : '新增并保存' }}
        </Button>
      </div>
    </template>
  </Drawer>
</template>
