<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;">
              <div>{{x.UpdateTime}}</div>
              <div>
                
                <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
              </div>
            </div>
            <q-circular-progress show-value class="text-red q-ma-md" :max='parseInt(x.Minutes)' :value="x.timevalue"
              size="70px" :thickness="0.2" color="light-blue" track-color="grey-3" @click.stop="playVoice(x.Path,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.MediaName}}</div>
            <div   style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">
              
              <span class="onetext" style="width: 50%;"><i class="iconfont icon-ico-64" style="font-size: 12px;color: #1890ff;margin-right: 3px;" ></i>{{x.MediaGroupName}}</span>
              <span class="onetext" style="width: 50%;text-align: right;" ><i class="iconfont icon-ren-" style="font-size: 14px;color: #1890ff;margin-right: 3px;" ></i>{{x.UpdateByName}}</span>
            </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='2' @editsuccess="getchildren" :editobj='editobj'
        @getcancel='Isadd=false'></alladdsc>
    </div>

  </div>
</template>

<script>
  import BenzAMRRecorder from 'benz-amr-recorder'
  import alladdsc from '../components/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 = row;
        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>
