<template>
    <div class="preview page">
        <van-nav-bar
            class="bg-skyBlue py-1"
            @click-left="$router.push('/card')"
        >
            <template #title>
                <h5 class="text-white mb-1"><strong>預覽</strong></h5>
            </template>
            <template #left>
                <h4>
                    <i
                        class="fa-solid fa-angle-left text-white"
                        :style="{ opacity: 0.5 }"
                    ></i>
                </h4>
            </template>
        </van-nav-bar>

        <div class="flex-section">
            <div class="table-responsive">
                <div class="chatbox">
                    <div id="flex" ref="flexRef"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onActivated, onDeactivated } from 'vue'

import { useRoute } from 'vue-router'

import { genCard1 } from '@/utils/card2'

const route = useRoute()
const flexRef = ref(null)

onActivated(() => {
    flexRef.value.innerHTML = ''
    let flexContent = genCard1(JSON.parse(history.state.content))
    flex2html("flex", flexContent)
})

onDeactivated(() => {
})

</script>

<style lang="less" scoped>
.flex-section {
    // color: white;
    // z-index: 99999;
    background-color: #333;
}


.chatbox {
    background-color: #000;
    margin-top: 10px;
    padding-top: 10px;
}


.table-responsive {
    width: 100%;
    overflow-x: auto;
}
</style>