<!-- 称重商品组件 -->
<template>
    <el-dialog title="称重商品" width="400" :close-on-click-modal="false" v-model="dialogVisible" top="10vh"
        @closed="reset">
        <div class="input_wrap">
            <div class="item">
                <div class="title">单价</div>
                <el-button type="primary" plain>￥{{ goodsItem.lowPrice }}/{{ goodsItem.unitName }}</el-button>
            </div>
            <div class="item">
                <div class="title" v-if="goodsItem.skuList && goodsItem.skuList.length">
                    重量（{{
                        `${goodsItem.skuList[0].suitNum}${goodsItem.unitName}起售` }}）
                </div>
                <el-input v-model="number" readonly placeholder="请输入">
                    <template #append>{{ goodsItem.unitName }}</template>
                </el-input>
            </div>
        </div>
        <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="price_item">
            <span class="p">￥{{ formatDecimal(goodsItem.lowPrice * number) }}</span>
            <span v-if="goodsItem.isStock">库存：{{ goodsItem.stockNumber }}</span>
        </div>
        <div class="footer">
            <el-button style="width: 100%" :loading="loading" @click="dialogVisible = false">
                取消
            </el-button>
            <el-button type="primary" style="width: 100%" :loading="loading"
                :disabled="!!(number <= 0 || number < goodsItem.skuList[0].suitNum || (goodsItem.isStock && number > goodsItem.stockNumber))"
                @click="confirmHandle">
                <template v-if="goodsItem.isStock && number > goodsItem.stockNumber">
                    库存不足
                </template>
                <template v-else>
                    确认
                </template>
            </el-button>
        </div>
    </el-dialog>
</template>

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

const dialogVisible = ref(false);
const number = ref("");
const goodsItem = ref({})

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

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

function reset() {
    goodsItem.value = {}
    number.value = ''
}

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

// 删除
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) return
    if (number.value < goodsItem.value.skuList[0].suitNum) {
        ElMessage.error(`最少${goodsItem.value.skuList[0].suitNum}${goodsItem.value.unitName}`);
        return;
    }
    // goodsItem.value.productId = goodsItem.value.id
    // goodsItem.value.number = number.value
    dialogVisible.value = false;
    emit("success", { ...goodsItem.value.skuList[0], number: number.value, type: goodsItem.value.type });
}

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

<style scoped lang="scss">
.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: 50px;
    }
}

.input_wrap {
    display: flex;
    align-items: center;
    gap: 20px;

    .item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.price_item {
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .p {
        color: var(--el-color-danger);
    }
}

.footer {
    display: flex;
}
</style>
