<script lang="ts" setup>
/**
 * 排班时段行编辑器（通用小组件）
 * 复用场景：班次模板编辑、日历排班「自定义时段」——两处都是编辑 1~10 个
 * 「名称 + 开始/结束时间 + 号源数」的时段行，抽出来避免复制粘贴两套一样的行编辑 UI
 * 名称留空时后端会自动用「开始-结束」时间段命名（与 ScheduleDrawer 自定义模式约定一致）
 */
import type { ScheduleSlot } from '../../api/schedule';

import { useVModel } from '@vueuse/core';

import { Button, Input, InputNumber, message, TimePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

import { Icon } from '#/components/icon';

const props = defineProps<{ modelValue: ScheduleSlot[] }>();
const emit = defineEmits<{ 'update:modelValue': [value: ScheduleSlot[]] }>();

/** v-model 代理，直接对数组做增删改 */
const slots = useVModel(props, 'modelValue', emit);

/** 新增一行（上限 10 个，与后端 normalizeSlots 限制一致） */
function addRow() {
  if (slots.value.length >= 10) {
    message.warning('最多支持 10 个时段');
    return;
  }
  slots.value.push({ slot_name: '', start_time: '', end_time: '', capacity: 5 });
}

/** 删除一行（至少保留一个时段） */
function removeRow(index: number) {
  if (slots.value.length <= 1) {
    message.warning('至少保留一个时段');
    return;
  }
  slots.value.splice(index, 1);
}

/** TimePicker 变更（内部 dayjs 与 HH:mm 字符串互转） */
function onTimeChange(slot: ScheduleSlot, key: 'end_time' | 'start_time', val: any) {
  slot[key] = val ? dayjs(val, 'HH:mm').format('HH:mm') : '';
}
</script>

<template>
  <div class="slot-rows">
    <div v-for="(slot, index) in slots" :key="index" class="slot-rows__row">
      <Input
        v-model:value="slot.slot_name"
        :maxlength="16"
        class="slot-rows__name"
        placeholder="名称(可空)"
        size="small"
      />
      <TimePicker
        :value="slot.start_time ? dayjs(slot.start_time, 'HH:mm') : null"
        format="HH:mm"
        placeholder="开始"
        size="small"
        @update:value="(val: any) => onTimeChange(slot, 'start_time', val)"
      />
      <span class="slot-rows__sep">~</span>
      <TimePicker
        :value="slot.end_time ? dayjs(slot.end_time, 'HH:mm') : null"
        format="HH:mm"
        placeholder="结束"
        size="small"
        @update:value="(val: any) => onTimeChange(slot, 'end_time', val)"
      />
      <InputNumber
        v-model:value="slot.capacity"
        :max="999"
        :min="1"
        size="small"
        style="width: 78px"
      />
      <span class="slot-rows__unit">个号</span>
      <Button danger size="small" type="text" @click="removeRow(index)">
        <Icon icon="lucide:x" />
      </Button>
    </div>
    <Button block size="small" type="dashed" @click="addRow">
      <Icon icon="lucide:plus" />
      加时段
    </Button>
    <div class="slot-rows__tip">名称留空自动按时间段命名；时段之间不可重叠</div>
  </div>
</template>

<style scoped>
.slot-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-rows__row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: hsl(var(--muted) / 0.25);
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
}

.slot-rows__name {
  width: 96px;
  flex: none;
}

.slot-rows__sep,
.slot-rows__unit {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.slot-rows__tip {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
</style>
