<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.name" @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 TimeRangeSelector from './components/TimeRangeSelector.vue'
import { getSyllabusListById, getFirstCoursewareBySyllId, getPidPathName } from '@/api/syllabus'
import VideoUploader from './components/VideoUploader.vue'
import ImageUploader from './components/ImageUploader.vue'
import AudioUploader from './components/AudioUploader.vue'

export default {
    name: 'App',
    components: {
        TimeRangeSelector,
        VideoUploader,
        ImageUploader,
        AudioUploader
    },
    data() {
        return {
            itemData: {
                video_url: "",
                image_url: "",
                audio_url: ""
            }
        };
    },
    async mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await this.$getData();
            if(!res) {
                // 默认数据
                this.itemData = {
                    "url": "https://teach.cdn.ireadabc.com/b688da9ac31ccbcd83f75f3336728cfb.mp4",
                    "duration": 63.621995,
                    "size": 5803623,
                    "snapshotUrl": "https://teach.cdn.ireadabc.com/4b05b78396aae7e9fe146669ccd38052.jpg",
                    "muteVideoUrl": "https://teach.cdn.ireadabc.com/bec06eec1ce7488efd56130736d20900.mp4"
                }
            } 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: hidden;
    background-color: #FFFFFF;
}

#app {}
</style>
