<template>
    <el-dialog :model-value="modelValue" class="order-award-dialog" :show-close="false" :close-on-click-modal="false"
        :close-on-press-escape="false" align-center @update:model-value="(v) => $emit('update:modelValue', v)">
        <div class="body-wrap">
            <img :src="awardIcon" alt="award" />
            <div class="award-title">你真棒!</div>
            <div class="award-subtitle">恭喜您完成服务工单</div>
            <div class="award-points"><span class="light">+{{ points }}</span>&nbsp;&nbsp;积分</div>

        </div>
        <div class="body-footer" style="justify-content: center;">
            <el-button type="primary" class="award-btn" @click="onContinue">
                继续处理
            </el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import awardIcon from "@/assets/image/admin/orders/award.svg";

defineProps({
    modelValue: { type: Boolean, default: false },
    points: { type: [String, Number], default: 5 },
});

const emit = defineEmits(["update:modelValue", "continue"]);

const onContinue = () => {
    emit("update:modelValue", false);
    emit("continue");
};
</script>

<style lang="scss">
.order-award-dialog {
    width: 458px;

    .body-wrap {
        padding: 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        img {
            width: 90px;
            height: 83px;
            object-fit: contain;
        }

        .award-title {
            font-size: 22px;
            line-height: 38px;
            color: #1D2129;
            font-weight: 600;
        }

        .award-subtitle {
            font-size: 16px;
            line-height: 30px;
            color: #1D2129;
        }

        .award-points {
            font-weight: 600;
            font-size: 16px;
            color: #FF8D28;
            line-height: 34px;

            .light {
                font-size: 24px;
            }
        }
    }

    .award-btn {
        font-size: 14px;
        color: #FFFFFF;
        padding: 16px 46px;
    }
}
</style>