<template>
    <el-dialog v-model="showAddTable" :title="addTabForm.id ? '编辑桌型' : '新增桌型'" top="10vh" @closed="addTabFormReset">
        <el-form ref="AddTabFormRef" :model="addTabForm" :rules="addTabFormRules" label-position="left"
            label-width="100">
            <el-form-item label="名称" prop="name">
                <el-input v-model="addTabForm.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="描述" prop="note">
                <el-input v-model="addTabForm.note" placeholder="请输入描述，例如1-2人" />
            </el-form-item>
            <el-form-item label="等待时间" prop="waitTime">
                <el-input v-model="addTabForm.waitTime" placeholder="0">
                    <template #append>分钟/1桌</template>
                </el-input>
            </el-form-item>
            <el-form-item label="号码前缀" prop="prefix">
                <el-input v-model="addTabForm.prefix" placeholder="请输入英文字母，不支持中文" />
            </el-form-item>
            <el-form-item label="开始号码" prop="start">
                <el-input v-model="addTabForm.start" placeholder="请输入开始号码" />
            </el-form-item>
            <el-form-item label="过号保留">
                <el-input v-model="addTabForm.nearNum" :disabled="!addTabForm.isPostpone" placeholder="临近几桌提醒">
                    <template #prepend>
                        <el-checkbox v-model="addTabForm.isPostpone" :true-value="1" :false-value="0" label="开启顺延" />
                    </template>
                    <template #append>桌</template>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="footer" style="display: flex;">
            <el-button style="width: 100%" @click="showAddTable = false">
                取消
            </el-button>
            <el-button type="primary" style="width: 100%" :loading="addTabFormLoading" @click="addTabConfirmHandle">
                确认
            </el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { addCallTable } from '@/api/queue.js'
import { useUser } from "@/store/user.js"
const store = useUser()

const emits = defineEmits(['success'])

const showAddTable = ref(false)
const addTabFormLoading = ref(false)
const AddTabFormRef = ref(null)
const resetAddTabForm = ref({})
const addTabForm = ref({
    name: '',
    note: '',
    waitTime: '',
    prefix: '',
    start: '',
    isPostpone: 0,
    nearNum: ''
})

const addTabFormRules = ref({
    name: [
        {
            required: true,
            message: ' ',
            trigger: 'blur',
        }
    ],
    waitTime: [
        {
            required: true,
            message: ' ',
            trigger: 'blur',
        }
    ],
    prefix: [
        {
            required: true,
            message: ' ',
            trigger: 'blur',
        }
    ],
    start: [
        {
            required: true,
            message: ' ',
            trigger: 'blur',
        }
    ],
})

// 初始化
function addTabFormReset() {
    addTabForm.value = { ...resetAddTabForm.value }
    AddTabFormRef.value.resetFields()
}

// 提交
function addTabConfirmHandle() {
    AddTabFormRef.value.validate(async valid => {
        try {
            if (valid) {
                addTabFormLoading.value = true
                addTabForm.value.shopId = store.userInfo.shopId
                if (addTabForm.value.id) {
                    addTabForm.value.callTableId = addTabForm.value.id
                }
                const res = await addCallTable(addTabForm.value)
                addTabFormLoading.value = false
                showAddTable.value = false
                ElMessage.success(addTabForm.value.id ? '编辑成功' : '添加成功')
                emits('success')
            }
        } catch (error) {
            addTabFormLoading.value = false
            console.log(error);
        }
    })
}

function show(obj) {
    if (obj && obj.id) {
        addTabForm.value = { ...obj }
    }
    showAddTable.value = true
}

defineExpose({
    show
})

onMounted(() => {
    resetAddTabForm.value = { ...addTabForm.value }
})
</script>