<!-- data-info 展示页测试 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <div class="submit-box--page">
                <el-steps :active="1" align-center simple style="margin-bottom: 50px;">
                    <el-step title="用户资料" icon="el-icon-User" />
                    <el-step title="详细信息" icon="el-icon-DocumentRemove" />
                </el-steps>
                <el-form :inline="false" label-width="8em">
                    <show-info name="用户编号：">{{ state.model.id }}</show-info>
                    <show-info name="用户昵称：">{{ state.model.name }}</show-info>
                    <show-info name="用户年龄：">{{ state.model.age }}</show-info>
                    <show-info name="日期展示：">{{ sa.forDate(state.model.createTime) }}</show-info>
                    <show-info name="日期时间：">{{ sa.forDate(state.model.createTime, 2) }}</show-info>
                    <show-info name="多行文本：">{{ state.model.intro }}</show-info>
                    <show-info name="普通文本：" type="text" :value="state.model.name"></show-info>
                    <show-info name="显示颜色：" type="color" :value="state.model.color"></show-info>
                    <show-info name="评分组件：" type="rate" :value="state.model.rate"></show-info>
                    <show-info name="个人余额：" type="money" :value="state.model.money"></show-info>
                    <show-info name="钱单位分：" type="money-f" :value="state.model.moneyFen"></show-info>
                    <show-info name="图片展示：" type="img" :value="state.model.img"></show-info>
                    <show-info name="展示音频：" type="audio" :value="state.model.audio"></show-info>
                    <show-info name="展示视频：" type="video" :value="state.model.video"></show-info>
                    <show-info name="展示文件：" type="file" :value="state.model.file"></show-info>
                    <show-list name="图片列表：" type="img-list" :value="state.model.imgList"></show-list>
                    <show-list name="音频列表：" type="audio-list" :value="state.model.audioList"></show-list>
                    <show-list name="视频列表：" type="video-list" :value="state.model.videoList"></show-list>
                    <show-list name="文件列表：" type="file-list" :value="state.model.fileList"></show-list>
                    <show-list name="图视结合：" type="img-video-list" :value="state.model.imgVideoList"></show-list>
                    <show-list name="文本列表：" type="text-list" :value="state.model.textList"></show-list>
                    <show-info name="富文本块：" type="rich-text" :value="state.model.content"></show-info>
                    <show-enum name="枚举展示：" :value="state.model.status" :jv="{1: '正常[green]', 2: '禁用[red]'}" br></show-enum>
                    <show-info name="展示链接：" type="link" :value="state.model.url"></show-info>
                    <in-item>
                        <el-button class="btn-13" type="success" icon="el-icon-Plus" @click="onSubmit">确认</el-button>
                    </in-item>
                    <div style="height: 200px"></div>
                </el-form>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="data-info">
import {getCurrentInstance, reactive} from "vue";
import router from "../../router";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    model: {
        id: router.currentRoute.value.meta.id || 0,
        name: '刘沉香',
        age: 18,
        createTime: new Date(),
        intro: '庄子说，人生天地之间，若白驹过隙，忽然而已。人生就是一场抵达，我们总以为来日方长... 庄子说，人生天地之间，若白驹过隙，忽然而已。人生就是一场抵达，我们总以为来日方长...',
        color: '#409eff',
        rate: 3,
        money: 1.01,
        moneyFen: 202,
        img: 'http://file.dev33.cn/ssp/ssp-logo-480.png',
        audio: 'http://file.dev33.cn/in-file/15998054742041893440109.mp3',
        video: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        file: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        imgList: 'http://file.dev33.cn/in-file/1599805642483567503625.jpg,http://file.dev33.cn/in-file/1599805642483567503625.jpg',
        audioList: 'http://file.dev33.cn/in-file/15998054742041893440109.mp3,http://file.dev33.cn/in-file/15998054742041893440109.mp3',
        videoList: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        fileList: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        imgVideoList: 'http://file.dev33.cn/in-file/1599805642483567503625.jpg,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        textList: '春眠不觉晓,处处闻啼鸟,夜来风雨声,花落知多少',
        content: '<p>第一段</p><p>第二段</p><p>第三段</p>',
        status: 1,
        url: 'https://gitee.com/dromara/sa-token'
    }
})

// ------------------ 函数 ------------------
const onSubmit = () => {
    console.log('submit!', JSON.stringify(state.model))
};


</script>

<style scoped lang="scss">
.submit-box--page{
    max-width: 800px;
}
</style>
