<template>
    <div class="audiomaterial" style="padding: 0;margin: 0;">

        <div class="page-content">
            <div>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传音频"
                    @click="goadd()"></q-btn>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
                    @click="pldelete()"></q-btn>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
                    @click="plmove()"></q-btn>
            </div>
            <div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;"
                v-if="dataList.length>0">
                <q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
                    :style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
                    @click="dataList[y].check = !dataList[y].check,$forceUpdate();">
                    <q-card-section>
                        <div
                            style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
                            <span>{{x.UpdateTime}}</span>
                            <q-icon
                                v-if="x.Media_Id && x.Media_Id!=''" 
                                size="20px" name="iconfont icon-yiqueren" color="green" >
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    已更新
                                </q-tooltip>
                            </q-icon>
                            <q-icon
                                v-if="x.Media_Id==''"
                                size="20px" name="iconfont icon-yiquxiao" color="red" >
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    未更新
                                </q-tooltip>
                            </q-icon>
                            <!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
                            <!-- <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
                                @click.stop="goedit(x)"></i> -->
                        </div>
<!-- 
                        <audio controls="controls" v-if='x.AudioModel && x.AudioModel.AudioPath'
                            style="margin-top: 10px;" class="imgstyle" :src="x.AudioModel.AudioPath"></audio> -->
                        <q-circular-progress
                            show-value
                            class="text-red q-ma-md"
                            :max='x.duration'
                            :value="x.timevalue"
                            size="70px"
                            :thickness="0.2"
                            color="light-blue"
                            track-color="grey-3"
                            @click.stop="playVoice(x.AudioModel.AudioPath,y)"
                        >
                            <q-icon name="volume_up" class="q-mr-xs" />
                            <span style="font-size: 11px;">
                                {{x.timevalue?x.timevalue.toFixed(1):0}}
                            </span>
                            
                        </q-circular-progress>
                        <div class="onetext" style="margin-top: 5px;">
                            {{x.AudioModel&&x.AudioModel.AudioName?x.AudioModel.AudioName:''}}</div>
                        <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateByName}}</div>
                        <div class="onetext" style="margin-top: 5px;">分组：{{x.MediumGroupName}}</div>
                    </q-card-section>
                </q-card>

            </div>
            <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据
            </div>

        </div>
        <div v-if="Isadd==true">
            <alladdsc :allclassifyList="allclassifyList" type='4' @editsuccess="getchildren" :editobj='editobj'
                @getcancel='Isadd=false'></alladdsc>
        </div>

    </div>
</template>

<script>
    import BenzAMRRecorder from 'benz-amr-recorder'
    import alladdsc from './allAddSC'
    export default {
        name: "audiomaterial",
        components: {
            alladdsc,
        },
        props: {
            dataList: {
                type: Array,
                default: [],
            },
            allclassifyList: {
                type: Array,
                default: [],
            }
        },
        data() {
            return {
                loading: false,
                Isadd: false,
                editobj: null,
                playRec: null, //播放对象
                voiceActive: null,
            }
        },
        created() {    

        },
        destroyed(){//页面销毁时候清楚音频的播放
            if(this.playRec){
                if (this.playRec.isPlaying()) {
                    this.playRec.stop()
                }
            }
        },
        methods: {
            goadd() {
                this.Isadd = true;
                this.editobj = null
            },
            goedit(row) {
                this.editobj = {}
                this.editobj.Id = row.Id;
                this.editobj.MediaGroupId = row.MediaGroupId;
                this.editobj.Type = row.Type;
                this.editobj.AudioModel = JSON.parse(JSON.stringify(row.AudioModel));
                this.Isadd = true
            },

            getchildren() {
                this.$emit('editsuccess')
                this.Isadd = false
            },

            pldelete() {
                this.$emit('getdelete')
            },
            plmove() {
                this.$emit('getmove')
            },
            playVoice(_url, index) {
                // TODO 这里暂时没处理 音频播放中暂停
                let vm = this
                if(vm.voiceActive && (vm.voiceActive !=index)){//如果再放一个点击另一个上一个清0
                    vm.dataList[vm.voiceActive].timevalue = 0
                }
                if (vm.playRec !== null) {
                    vm.stopPlayVoice(index)
                }
                vm.playRec = new BenzAMRRecorder()
                //⚠️注意跨域问题
                vm.playRec.initWithUrl(_url).then(function () {
                    vm.voiceActive = index
                    vm.playRec.play()
                    let timer = setInterval(() => {
                        vm.dataList[index].timevalue +=0.1 
                        vm.$forceUpdate();
                    }, 100);
                    
                    vm.playRec.onEnded(function () {
                        vm.voiceActive = null;
                        vm.dataList[index].timevalue = 0
                        clearInterval(timer);//停止
                        setTimeout(() => {
                            vm.$forceUpdate();
                        }, 1000);

                    })
                }).catch((e) => {
                    vm.$message.error('播放录音失败')
                })
            },
            //停止播放
            stopPlayVoice() {
                if(this.playRec){
                    if (this.playRec.isPlaying()) {
                        this.playRec.stop()
                    }
                }
            },


        }
    }

</script>

<style>
    .audiomaterial .Sysuser_Date .el-input--prefix .el-input__inner {
        background-color: red;
        border: 0;
    }

    .audiomaterial .state-item {
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        font-size: 10px;
    }

    .audiomaterial .frIdlist {
        padding: 3px 10px;
        border-radius: 3px;
        background: #EEEEEF;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .class-popover .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .audiomaterial .el-date-editor.el-input {
        width: 100%;
    }

    .audiomaterial .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .audiomaterial .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .audiomaterial .el-drawer.rtl {
        overflow: inherit;
    }

    .audiomaterial .imgcard {
        width: 300px;
        margin: 0 15px 15px 0
    }

    .audiomaterial .imgstyle {
        width: 100%;
        height: 45px;
        border-radius: 0;
    }

    .audiomaterial .onetext {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 260px;
    }
</style>