<template>
    <div id="app" style="width: 450px;">
        <el-form label-width="120px">
            <el-form-item label="视频">
                <VideoUploader v-model="itemData.url" @change="save"/>
            </el-form-item>
            <el-form-item label="静音视频(可选)">
                <VideoUploader v-model="itemData.muteVideoUrl" @change="save"/>
            </el-form-item>
            <el-form-item label="截图">
                <ImageUploader v-model="itemData.snapshotUrl" @change="save"/>
            </el-form-item>
            <el-form-item label="时长">
                <el-input v-model="itemData.duration" @change="save"></el-input>
            </el-form-item>
            <el-form-item label="大小">
                <el-input v-model="itemData.size" @change="save"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import VideoUploader from './components/VideoUploader.vue'
import ImageUploader from './components/ImageUploader.vue'

export default {
    name: 'App',
    components: {
        VideoUploader,
        ImageUploader
    },
    data() {
        return {
            itemData: {
                "url": "",
                "duration": 0,
                "size": 0,
                "snapshotUrl": "",
                "muteVideoUrl": ""
            }
        };
    },
    async mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await this.$getData();
            if(!res) {
                // 默认数据
                this.itemData = {
                    "url": "",
                    "duration": 0,
                    "size": 0,
                    "snapshotUrl": "",
                    "muteVideoUrl": ""
                }
            } else {
                this.itemData = res
            }
        },

        // 保存数据
        save() {
            this.$message({
                message: '保存成功',
                type: 'success',
                duration: 1000
            })
            this.$setData(this.itemData)
        }
    }
}
</script>

<style>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    background-color: #FFFFFF;
}

#app {}
</style>
