<template>
    <el-dialog title="恢复挂起的订单" width="800" v-model="dialogVisible">
        <div class="pending_carts">
            <div class="item" v-for="(item, index) in goodsStore.pendingList" :key="index" @click="select(item)">
                <div class="time">
                    <el-icon class="icon">
                        <Clock />
                    </el-icon>
                    <span>{{ dayjs(item.pendingAt).format('HH:mm') }}</span>
                </div>
                <div class="info">
                    <span class="name">【{{ item.tableCode }}】{{ item.productName }}</span>
                    <span class="p">￥{{ formatDecimal(item.totalAmount) }}</span>
                </div>
            </div>
            <div class="empty">
                <el-empty description="暂无挂单" v-if="!goodsStore.pendingList.length" />
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { dayjs } from 'element-plus'
import { useGoods } from '@/store/goods.js'
import { formatDecimal } from '@/utils/index.js'

const goodsStore = useGoods()
const dialogVisible = ref(false)

// 恢复挂单
async function select(item) {
    dialogVisible.value = false
    await goodsStore.recoverPending(item)
}

function show() {
    dialogVisible.value = true
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.pending_carts {
    height: 50vh;
    overflow-y: auto;

    .item {
        display: flex;
        align-items: center;
        background-color: #efefef;
        border-radius: 6px;
        overflow: hidden;

        &:not(:first-child) {
            margin-top: 20px;
        }

        .time {
            padding: 20px 20px;
            display: flex;
            align-items: center;
            background-color: var(--el-color-warning);
            color: #fff;

            .icon {
                font-size: calc(var(--el-font-size-base) + 6px);
            }

            span {
                font-size: var(--el-font-size-base);
                margin-left: 4px;
            }
        }

        .info {
            flex: 1;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            font-size: var(--el-font-size-base);

            .p {
                color: var(--el-color-warning);
            }
        }
    }
}
</style>