<template>
    <ut-confirm-dialog v-model:show="visable" :title="title" width="680rpx" @close="onClose">
        <template #content>
            <scroll-view scroll-y class="scroll-view-content" style="max-height: 60vh">
                <view class="p-rtv pd4-0-24-24-24">
                    <up-form ref="formRef" :model="form" :rules="rules" labelWidth="auto" class="p-rtv" labelPosition="top">
                        <up-form-item borderBottom label="货架名称" required prop="shelvesName">
                            <up-input v-model="form.shelvesName" placeholder="请输入货架名称" border="none" clearable></up-input>
                        </up-form-item>
                        <up-form-item borderBottom label="货架编号" prop="sn">
                            <up-input v-model="form.sn" placeholder="请输入货架编号" border="none" clearable></up-input>
                        </up-form-item>
                        <up-form-item label="备注" prop="remark">
                            <up-textarea v-model="form.remark" placeholder="请输入备注" autoHeight></up-textarea>
                        </up-form-item>
                    </up-form>
                </view>
            </scroll-view>
        </template>
        <template #footer>
            <view class="pd-24 d-flex a-c">
                <up-button class="mr-16" @click="onClose">取消</up-button>
                <up-button type="primary" @click="onConfirm">确定</up-button>
            </view>
        </template>
    </ut-confirm-dialog>
</template>

<script setup lang="ts" name="FormPlot">
import { WarehouseShelfAddDTO } from '../index';
const props = withDefaults(
    defineProps<{
        show: boolean;
        title?: string;
        modelValue?: WarehouseShelfAddDTO;
    }>(),
    {
        show: false,
        title: '添加货位',
        modelValue: () => ({
          shelvesName: '',
          sn: '',
          remark: '',
          warehouseId: 0,
        }),
    }
);

const visable = ref(props.show);
const emit = defineEmits<{
    'update:show': [value: boolean];
    close: [];
    submit: [data: WarehouseShelfAddDTO];
}>();

const formRef = ref();
const submitting = ref(false);
const form = ref<WarehouseShelfAddDTO>({
    shelvesName: '',
    sn: '',
    remark: '',
    warehouseId: 0,
});

const rules = reactive({
    shelvesName: [{ required: true, message: '请输入货架名称', trigger: ['blur', 'change'] }],
    // sn 可选，如需唯一校验可在外部提交前处理
});

const onClose = () => {
    emit('update:show', false);
    emit('close');
};
watch(
    () => props.show,
    (newVal) => {
        visable.value = newVal;
    }
);
const onConfirm = async () => {
    try {
        // uview-plus 的 up-form 暴露 validate 方法
        await formRef.value?.validate();
        emit('submit', form.value);
        emit('update:show', false);
    } catch (e) {
        // 校验不通过
    }
};
watch(
    () => props.modelValue,
    (newVal) => {
        if (!newVal) return;
        // 合并外部传入的初值（包含 warehouseId）
        Object.assign(form.value, newVal);
    },
    { immediate: true }
);
</script>

<style scoped lang="scss"></style>
