<!-- 播报结果 -->
<template>
    <el-dialog title="提示" v-model="visible">
        <div class="content">
            <div style="font-size: 18px;">正在叫号，请稍等</div>
            <el-alert :title="statusList[item.status].text" :type="statusList[item.status].type" :closable="false" />
        </div>
        <div class="footer" style="display: flex;">
            <el-button style="width: 100%" @click="confirmHandle(2)">完成</el-button>
            <el-button type="primary" style="width: 100%" :loading="loading" @click="confirmHandle(3)">过号</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { updateState } from '@/api/queue.js'
import { useUser } from "@/store/user.js"
const store = useUser()

const emits = defineEmits(['success'])

const visible = ref(false)
const item = ref({})
const loading = ref(false)
const statusList = {
    '-1': {
        type: 'warning',
        text: '用户未订阅'
    },
    0: {
        type: 'danger',
        text: '失败'
    },
    1: {
        type: 'success',
        text: '成功'
    }
}

// 过号修改状态
async function confirmHandle(state) {
    try {
        await updateState({
            shopId: store.userInfo.shopId,
            callQueueId: item.value.id,
            state: state
        })
        visible.value = false
        emits('success')
    } catch (error) {
        console.log(error);
    }
}

function show(obj) {
    visible.value = true
    item.value = { ...obj }
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
}
</style>