<template>
    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
        <div class="drawer_wrap">
            <div class="pay_wrap">
                <fastPayCard ref="fastPayCardRef" type="1" :userInfo="userInfo" @paySuccess="paySuccess"
                    @close="dialogVisible = false" />
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import fastPayCard from "@/components/fastPayCard.vue";

const props = defineProps({
    userInfo: {
        type: [Object,String],
        default: {}
    }
})

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

const dialogVisible = ref(false);
const fastPayCardRef = ref(null);

// 订单已支付
function paySuccess() {
    dialogVisible.value = false;
    emit("paySuccess");
}

function show() {
    dialogVisible.value = true;
    setTimeout(() => {
        fastPayCardRef.value.reset();
    }, 100)
}

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

<style scoped lang="scss">
.drawer_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--el-font-size-base) 0;

    .pay_wrap {
        flex: 1;
    }
}
</style>