<template>
    <div id="app">
        <div style="width: 500px;">
            <el-form label-width="80px"> 
                <el-form-item label="音频">
                    <AudioUploader ref="refAudioUploader" v-model="itemData.url" @change="save"/>
                </el-form-item>

                <el-form-item label="时长（秒）">
                    <div style="display: flex;">
                        <el-input v-model="itemData.duration" @change="save"></el-input>
                        <el-button class="btn" type="ghost" size="mini" @click="updateDuration()">更新</el-button>
                    </div>
                </el-form-item>

                <el-form-item label="大小">
                    <el-input v-model="itemData.size" @change="save"></el-input>
                </el-form-item>

                <div v-for="conf,index in configArr" :key="index">
                    <el-form-item :class="{'warn': configArr[index] > itemData.duration}" :label="`第${index+1}页`">
                        <div style="display: flex;">
                            <el-input v-model="configArr[index].text"></el-input>
                            <el-button class="btn" type="ghost" size="mini" @click="playIndex(index)" icon="el-icon-video-play">播放</el-button>
                            <el-button class="btn" type="primary" size="mini" @click="setTag(index)" icon="el-icon-place">打点</el-button>
                            <el-button class="btn" type="danger" size="mini" @click="deleteConf(index)" icon="el-icon-delete">删除</el-button>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
            <div style="padding: 10px; text-align: center; border: 1px dashed #000000; cursor: pointer;" @click="addConfig()">
                <el-button class="btn" type="text" size="mini"icon="el-icon-plus">新建打点</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import AudioUploader from './components/AudioUploader.vue'

export default {
    name: 'App',
    components: {
        AudioUploader
    },
    data() {
        return {
            itemData: {
                "url": "",
                "duration": 0,
                "size": 0,
                "splitConfig": ""
            },
            configArr: [],
            // 结束时间点
            endConf: 0
        };
    },
    async mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await this.$getData();
            if(!res) {
                // 默认数据
                this.itemData = {
                    "url": "",
                    "duration": 0,
                    "size": 0,
                    "splitConfig": ""
                }
                if(this.itemData.splitConfig) {
                    const configArr = this.itemData.splitConfig.split(',')
                    this.configArr = []
                    configArr.forEach((item, index) => {
                        this.configArr.push({
                            text: item,
                        })
                    })
                    
                }
            } else {
                this.itemData = res
                if(this.itemData.splitConfig) {
                    const configArr = this.itemData.splitConfig.split(',')
                    this.configArr = []
                    configArr.forEach((item, index) => {
                        this.configArr.push({
                            text: item,
                        })
                    })
                }
            }
        },

        // 播放区间
        playScopeCallback() {
            const refAudio = this.$refs.refAudioUploader.getAudioRef();
            const currentTime = refAudio.currentTime;
            if (currentTime >= this.endConf) {
                refAudio.pause();
                refAudio.removeEventListener("timeupdate", this.playScopeCallback);
            }
        },

        // 播放单页音频
        playIndex(index) {
            const strConf = index - 1 < 0 ? 0 : this.configArr[index - 1].text
            const endConf = this.configArr[index].text
            const refAudio = this.$refs.refAudioUploader.getAudioRef();

            if(refAudio) {
                refAudio.currentTime = strConf;
                this.endConf = endConf;
                refAudio.removeEventListener("timeupdate", this.playScopeCallback);
                refAudio.addEventListener("timeupdate", this.playScopeCallback);

                refAudio.play();
            } else {
                this.$message({
                    type: 'error',
                    message: '请先上传音频'
                });
            }
            
        },

        // 打点
        setTag(index) {
            const refAudio = this.$refs.refAudioUploader.getAudioRef();
            if(refAudio) {
                this.configArr[index].text = refAudio.currentTime;
                this.save()
            } else {
                this.$message({
                    type: 'error',
                    message: '请先上传音频'
                });
            }
            
        },

        // 删除
        deleteConf(index) {
            this.$confirm('确认删除该页吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.configArr.splice(index, 1)
                this.save()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 更新时长
        updateDuration() {
            const refAudio = this.$refs.refAudioUploader.getAudioRef();
            if(this.$refs.refAudioUploader.getAudioRef()) {
                this.itemData.duration = this.$refs.refAudioUploader.getAudioRef().duration
                this.save()
            } else {
                this.$message({
                    type: 'error',
                    message: '请先上传音频'
                });
            }
        },

        // 添加新的配置
        addConfig() {
            const refAudio = this.$refs.refAudioUploader.getAudioRef();
            this.configArr.push(refAudio ? refAudio.currentTime : 0)
            this.save()
        },

        // 保存数据
        save() {
            let temp = []
            this.configArr.forEach((item, index) => {
                temp.push(item.text)
            })
            this.itemData.splitConfig = temp.join(',')
            this.$message({
                type: 'success',
                message: '保存成功',
                duration: 500
            });
            this.$setData(this.itemData)
        },
    }
}
</script>

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

#app {
    padding: 10px;
}

.btn {
    margin-left: 10px;
    font-size: 14px;
}

.warn .el-form-item__label {
    background-color: #F56C6C;
    color: #FFFFFF;
}
</style>
