<!-- 取餐号组件 -->
<template>
    <el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
        <el-input :type="props.inputType" v-model="number" :placeholder="props.placeholder" readonly></el-input>
        <div class="keybord_wrap">
            <div v-for="item in 9" :key="item">
                <el-button plain type="info" style="width: 100%" @click="inputHandle(item)">{{ item }}</el-button>
            </div>
            <div>
                <el-button plain type="info" style="width: 100%" @click="inputHandle('.')">.</el-button>
            </div>
            <div>
                <el-button plain type="info" style="width: 100%" @click="inputHandle(0)">0</el-button>
            </div>
            <div>
                <el-button plain type="info" icon="CloseBold" style="width: 100%" @click="delHandle"></el-button>
            </div>
        </div>
        <div class="footer">
            <el-button type="primary" style="width: 100%" :disabled="number <= 0" :loading="loading"
                @click="confirmHandle">确认</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { clearNoNum } from '@/utils/index.js'

const props = defineProps({
    type: {
        type: [String, Number],
        default: 1, // 1取餐号 2密码
    },
    inputType: {
        type: String,
        default: 'text'
    },
    title: {
        type: String,
        default: "标题",
    },
    placeholder: {
        type: String,
        default: "提示",
    },
});

const dialogVisible = ref(false);
const number = ref("");

const emit = defineEmits(["success"]);

function show() {
    dialogVisible.value = true;
}

function opne() {
    number.value = "";
}

// 输入
function inputHandle(n) {
    number.value += n;
    number.value = clearNoNum({ value: number.value })
}

// 删除
function delHandle() {
    if (!number.value) return;
    number.value = number.value.substring(0, number.value.length - 1);
}

const loading = ref(false)
// 确认
function confirmHandle() {
    if (!number.value || number.value <= 0) return
    if (props.type == 2) {
        if (number.value.length < 6) {
            ElMessage.error('请输入正确的密码')
            return
        } else {
            loading.value = true
            emit("success", number.value);
            dialogVisible.value = false;
            setTimeout(() => {
                loading.value = false
            }, 1000)
        }
    } else {
        emit("success", number.value);
        dialogVisible.value = false;
    }
}

defineExpose({
    show,
});
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
    height: 60px;
    font-size: 36px;
}

.keybord_wrap {
    padding: var(--el-font-size-base) 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: var(--el-font-size-base);

    :deep(.el-button--large) {
        height: 60px;
    }
}
</style>
