<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"></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"></el-input>
                </el-form-item>

                <template v-for="conf,index in configArr">
                    <el-form-item :class="{'warn': configArr[index] > itemData.duration}" :label="`第${index+1}页`">
                        <div style="display: flex;">
                            <el-input v-model="configArr[index]"></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>
                </template>
            </el-form>
            <el-button class="btn" type="danger" size="mini" @click="addConfig()" icon="el-icon-delete">新建</el-button>
        </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": "https://teach.cdn.ireadabc.com/066e70f0278240e000fd0b4e39d12ef9.mp3",
                    "duration": 127.08,
                    "size": 2033900,
                    "splitConfig": "23.361281,31.816778,40.853425,49.199478,57.893614,66.694963,75.30565,84.465703,93.306864,127.08"
                }
                if(this.itemData.splitConfig) {
                    this.configArr = this.itemData.splitConfig.split(',')
                }
            } else {
                this.itemData = res
                if(this.itemData.splitConfig) {
                    this.configArr = this.itemData.splitConfig.split(',')
                }
            }
        },

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

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

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

            refAudio.play();
        },

        // 打点
        setTag(index) {
            const refAudio = this.$refs.refAudioUploader.getAudioRef();
            this.configArr[index] = refAudio.currentTime;
            
            this.save()
        },

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

        // 更新时长
        updateDuration() {
            this.itemData.duration = this.$refs.refAudioUploader.getAudioRef().duration
            this.save()
        },

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

        // 保存数据
        save() {
            this.itemData.splitConfig = this.configArr.join(',')
            this.$setData(this.itemData)
        },

        handleUploading(progress) {

        }
    }
}
</script>

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

#app {
    padding: 10px;
}

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

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